@koobiq/components 20.4.2 → 21.0.0

package/fesm2022/koobiq-components-breadcrumbs.mjs

@@ -1,31 +1,36 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, NgZone, ElementRef, input, booleanAttribute, output, signal, Input, Directive, computed, InjectionToken, TemplateRef, contentChild, ChangeDetectionStrategy, Component, contentChildren, forwardRef, viewChild, viewChildren, effect, ContentChild, ViewEncapsulation, NgModule } from '@angular/core';
+import { inject, ElementRef, input, booleanAttribute, output, signal, computed, Directive, NgZone, effect, InjectionToken, TemplateRef, contentChild, ChangeDetectionStrategy, Component, contentChildren, forwardRef, viewChild, viewChildren, ViewEncapsulation, NgModule } from '@angular/core';
 import { toObservable, outputToObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { RouterLink } from '@angular/router';
-import * as i4 from '@koobiq/components/button';
+import * as i5 from '@koobiq/components/button';
 import { KbqButton, KbqButtonStyles, KbqButtonModule } from '@koobiq/components/button';
-import { kbqInjectNativeElement, KbqComponentColors, PopUpPlacements } from '@koobiq/components/core';
-import * as i5 from '@koobiq/components/dropdown';
+import * as i3 from '@koobiq/components/core';
+import { kbqInjectNativeElement, KbqComponentColors, KbqLocaleOverridesDirective, KBQ_A11Y_LOCALE_CONFIGURATION, PopUpPlacements } from '@koobiq/components/core';
+import * as i6 from '@koobiq/components/dropdown';
 import { KbqDropdownTrigger, KbqDropdownModule } from '@koobiq/components/dropdown';
-import * as i3 from '@koobiq/components/icon';
+import * as i4 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
-import * as i7 from '@koobiq/components/overflow-items';
+import * as i8 from '@koobiq/components/overflow-items';
 import { KbqOverflowItemsResult, KbqOverflowItem, KbqOverflowItems, KbqOverflowItemsModule } from '@koobiq/components/overflow-items';
-import * as i6 from '@koobiq/components/title';
+import * as i7 from '@koobiq/components/title';
 import { KbqTitleModule } from '@koobiq/components/title';
 import { merge, switchMap, EMPTY, skip } from 'rxjs';
+import { Directionality } from '@angular/cdk/bidi';
+import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
 
 const ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus';
 const EVENT_OPTIONS = { bubbles: false, cancelable: true };
+/**
+ * `PageUp`/`PageDown` are deliberately absent: the primitive is used by navigation trails rather than by
+ * composite widgets, and swallowing the paging keys stops the document from scrolling.
+ */
 const MAP_KEY_TO_FOCUS_INTENT = {
     ArrowLeft: 'prev',
     ArrowUp: 'prev',
     ArrowRight: 'next',
     ArrowDown: 'next',
-    PageUp: 'first',
     Home: 'first',
-    PageDown: 'last',
     End: 'last'
 };
 function getDirectionAwareKey(key, dir) {
@@ -41,16 +46,14 @@ function getFocusIntent(event, orientation, dir) {
         return undefined;
     return MAP_KEY_TO_FOCUS_INTENT[key];
 }
-function focusFirst(candidates, preventScroll = false, rootNode) {
-    // eslint-disable-next-line no-restricted-globals
-    const PREVIOUSLY_FOCUSED_ELEMENT = rootNode?.activeElement ?? window.document.activeElement;
+function focusFirst(candidates, preventScroll = false) {
+    const previouslyFocusedElement = _getFocusedElementPierceShadowDom();
     for (const candidate of candidates) {
         // if focus is already where we want to go, we don't want to keep going through the candidates
-        if (candidate === PREVIOUSLY_FOCUSED_ELEMENT)
+        if (candidate === previouslyFocusedElement)
             return;
         candidate.focus({ preventScroll });
-        // eslint-disable-next-line no-restricted-globals
-        if (window.document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT)
+        if (_getFocusedElementPierceShadowDom() !== previouslyFocusedElement)
             return;
     }
 }
@@ -65,22 +68,48 @@ function generateId() {
     return `rf-item-${Math.random().toString(36).slice(2, 11)}`;
 }
 
+/**
+ * Moves the focus between the items of `KbqBreadcrumbs` with the arrow keys, keeping one of them in the tab
+ * order. The breadcrumbs apply it themselves, as a host directive.
+ *
+ * @docs-private
+ */
 class RdxRovingFocusGroupDirective {
     constructor() {
-        this.ngZone = inject(NgZone);
         this.elementRef = inject(ElementRef);
-        this.dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : []));
-        this.loop = input(true, ...(ngDevMode ? [{ debugName: "loop", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.preventScrollOnEntryFocus = input(false, ...(ngDevMode ? [{ debugName: "preventScrollOnEntryFocus", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.directionality = inject(Directionality, { optional: true });
+        /** @docs-private */
+        this.orientationInput = input(undefined, { ...(ngDevMode ? { debugName: "orientationInput" } : /* istanbul ignore next */ {}), alias: 'orientation' });
+        /**
+         * Reading direction the arrow keys are mapped against, written onto the host as `dir`. Left unset,
+         * no attribute is emitted — the element inherits the document direction, and the key mapping follows
+         * the ambient CDK `Directionality`.
+         */
+        this.dir = input(null, ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
+        /** Whether the arrow keys wrap around, from the last item to the first and back. */
+        this.loop = input(true, { ...(ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.preventScrollOnEntryFocus = input(false, { ...(ngDevMode ? { debugName: "preventScrollOnEntryFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.entryFocus = output();
         this.currentTabStopIdChange = output();
         /** @docs-private */
-        this.currentTabStopId = signal(null, ...(ngDevMode ? [{ debugName: "currentTabStopId" }] : []));
+        this.currentTabStopId = signal(null, ...(ngDevMode ? [{ debugName: "currentTabStopId" }] : /* istanbul ignore next */ []));
         /** @docs-private */
-        this.focusableItems = signal([], ...(ngDevMode ? [{ debugName: "focusableItems" }] : []));
-        this.isClickFocus = signal(false, ...(ngDevMode ? [{ debugName: "isClickFocus" }] : []));
-        this.isTabbingBackOut = signal(false, ...(ngDevMode ? [{ debugName: "isTabbingBackOut" }] : []));
-        this.focusableItemsCount = signal(0, ...(ngDevMode ? [{ debugName: "focusableItemsCount" }] : []));
+        this.focusableItems = signal([], ...(ngDevMode ? [{ debugName: "focusableItems" }] : /* istanbul ignore next */ []));
+        /** Tab stop id of each registered element, so the current tab stop can be resolved back to its node. */
+        this.itemIds = new WeakMap();
+        this.isTabbingBackOut = signal(false, ...(ngDevMode ? [{ debugName: "isTabbingBackOut" }] : /* istanbul ignore next */ []));
+        /**
+         * Reading direction the arrow keys are actually mapped against: the input when it is set, the
+         * ambient `Directionality` otherwise.
+         *
+         * @docs-private
+         */
+        this.resolvedDir = computed(() => this.dir() ?? this.directionality?.valueSignal() ?? 'ltr', ...(ngDevMode ? [{ debugName: "resolvedDir" }] : /* istanbul ignore next */ []));
+    }
+    ngOnChanges(changes) {
+        if (changes['orientationInput']) {
+            this.orientation = this.orientationInput();
+        }
     }
     /** @docs-private */
     get dataOrientation() {
@@ -92,29 +121,19 @@ class RdxRovingFocusGroupDirective {
     }
     /** @docs-private */
     handleBlur() {
+        if (!this.isTabbingBackOut())
+            return;
         this.isTabbingBackOut.set(false);
-    }
-    /** @docs-private */
-    handleMouseUp() {
-        // reset `isClickFocus` after 1 tick because handleFocus might not triggered due to focused element
-        this.ngZone.runOutsideAngular(() => {
-            Promise.resolve().then(() => {
-                this.ngZone.run(() => {
-                    this.isClickFocus.set(false);
-                });
-            });
-        });
+        this.syncTabIndex();
     }
     /** @docs-private */
     handleFocus(event) {
-        // We normally wouldn't need this check, because we already check
-        // that the focus is on the current target and not bubbling to it.
-        // We do this because Safari doesn't focus buttons when clicked, and
-        // instead, the wrapper will get focused and not through a bubbling event.
-        const isKeyboardFocus = !this.isClickFocus();
+        // Forwarded regardless of what moved the focus here: a click on the group's own padding lands on
+        // the host, which is a tab stop with nothing to do, and the trail would otherwise hold an
+        // invisible focus that the next Tab leaves altogether. A click on an item is unaffected — the
+        // item records itself as the current tab stop on `mousedown`, so the forward returns to it.
         if (event.currentTarget === this.elementRef.nativeElement &&
             event.target === event.currentTarget &&
-            isKeyboardFocus &&
             !this.isTabbingBackOut()) {
             const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
             this.elementRef.nativeElement.dispatchEvent(entryFocusEvent);
@@ -122,16 +141,11 @@ class RdxRovingFocusGroupDirective {
             if (!entryFocusEvent.defaultPrevented) {
                 const items = this.focusableItems().filter((item) => item.dataset['disabled'] !== '');
                 const activeItem = items.find((item) => item.getAttribute('data-active') === 'true');
-                const currentItem = items.find((item) => item.id === this.currentTabStopId());
+                const currentItem = items.find((item) => this.itemIds.get(item) === this.currentTabStopId());
                 const candidateItems = [activeItem, currentItem, ...items].filter(Boolean);
                 focusFirst(candidateItems, this.preventScrollOnEntryFocus());
             }
         }
-        this.isClickFocus.set(false);
-    }
-    /** @docs-private */
-    handleMouseDown() {
-        this.isClickFocus.set(true);
     }
     /** @docs-private */
     onItemFocus(tabStopId) {
@@ -141,33 +155,55 @@ class RdxRovingFocusGroupDirective {
     /** @docs-private */
     onItemShiftTab() {
         this.isTabbingBackOut.set(true);
+        this.syncTabIndex();
     }
-    /** @docs-private */
-    onFocusableItemAdd() {
-        this.focusableItemsCount.update((count) => count + 1);
-    }
-    /** @docs-private */
-    onFocusableItemRemove() {
-        this.focusableItemsCount.update((count) => Math.max(0, count - 1));
+    // The browser picks the Shift+Tab target right after the keydown, and the `focusout` that follows also
+    // comes before the host binding renders, so each latch transition writes the attribute at once.
+    syncTabIndex() {
+        this.elementRef.nativeElement.setAttribute('tabindex', String(this.tabIndex));
     }
-    /** @docs-private */
-    registerItem(item) {
-        const currentItems = this.focusableItems();
-        this.focusableItems.set([...currentItems, item]);
+    /**
+     * Registers `item` as a focusable member of the group, ignoring one that is not actually a
+     * descendant of the group's own host. A `TemplateRef` declared inside the group (a `kbqBreadcrumbView`,
+     * say) keeps resolving an injected group through its declaration-site injector even when something
+     * outside the group's DOM subtree — a dropdown replaying a hidden item's template, for instance —
+     * instantiates it a second time via `ngTemplateOutlet`. That copy is not reachable by this group's
+     * arrow keys and must not register, or the trail ends up with a phantom, unfocusable duplicate.
+     *
+     * @docs-private
+     */
+    registerItem(item, tabStopId) {
+        if (!this.elementRef.nativeElement.contains(item))
+            return;
+        if (tabStopId !== undefined) {
+            this.itemIds.set(item, tabStopId);
+        }
+        this.focusableItems.update((items) => {
+            if (items.includes(item))
+                return items;
+            // Sorted by actual DOM position rather than appended: registration order follows when each
+            // item's effect happens to run, which does not track document order (a static element and
+            // one rendered through `NgTemplateOutlet` can register in either order regardless of where
+            // they end up in the tree). Arrow-key traversal has to follow the visual order instead.
+            return [...items, item].sort((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
+        });
     }
     /** @docs-private */
     unregisterItem(item) {
-        const currentItems = this.focusableItems();
-        this.focusableItems.set(currentItems.filter((el) => el !== item));
+        if (this.itemIds.get(item) === this.currentTabStopId()) {
+            this.currentTabStopId.set(null);
+        }
+        this.itemIds.delete(item);
+        this.focusableItems.update((items) => items.filter((el) => el !== item));
     }
     /** @docs-private */
     getFocusableItemsCount() {
-        return this.focusableItemsCount();
+        return this.focusableItems().length;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RdxRovingFocusGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: RdxRovingFocusGroupDirective, isStandalone: true, selector: "[rdxRovingFocusGroup]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: false, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, preventScrollOnEntryFocus: { classPropertyName: "preventScrollOnEntryFocus", publicName: "preventScrollOnEntryFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { entryFocus: "entryFocus", currentTabStopIdChange: "currentTabStopIdChange" }, host: { listeners: { "focus": "handleFocus($event)", "blur": "handleBlur()", "mouseup": "handleMouseUp()", "mousedown": "handleMouseDown()" }, properties: { "attr.data-orientation": "dataOrientation", "attr.tabindex": "tabIndex", "attr.dir": "dir()" }, styleAttribute: "outline: none;" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: RdxRovingFocusGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: RdxRovingFocusGroupDirective, isStandalone: true, selector: "[rdxRovingFocusGroup]", inputs: { orientationInput: { classPropertyName: "orientationInput", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, preventScrollOnEntryFocus: { classPropertyName: "preventScrollOnEntryFocus", publicName: "preventScrollOnEntryFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { entryFocus: "entryFocus", currentTabStopIdChange: "currentTabStopIdChange" }, host: { listeners: { "focus": "handleFocus($event)", "focusout": "handleBlur()" }, properties: { "attr.data-orientation": "dataOrientation", "attr.tabindex": "tabIndex", "attr.dir": "dir()" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RdxRovingFocusGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: RdxRovingFocusGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxRovingFocusGroup]',
@@ -176,54 +212,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         '[attr.tabindex]': 'tabIndex',
                         '[attr.dir]': 'dir()',
                         '(focus)': 'handleFocus($event)',
-                        '(blur)': 'handleBlur()',
-                        '(mouseup)': 'handleMouseUp()',
-                        '(mousedown)': 'handleMouseDown()',
-                        style: 'outline: none;'
+                        '(focusout)': 'handleBlur()'
                     }
                 }]
-        }], propDecorators: { orientation: [{
-                type: Input
-            }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], preventScrollOnEntryFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventScrollOnEntryFocus", required: false }] }], entryFocus: [{ type: i0.Output, args: ["entryFocus"] }], currentTabStopIdChange: [{ type: i0.Output, args: ["currentTabStopIdChange"] }] } });
+        }], propDecorators: { orientationInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], preventScrollOnEntryFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventScrollOnEntryFocus", required: false }] }], entryFocus: [{ type: i0.Output, args: ["entryFocus"] }], currentTabStopIdChange: [{ type: i0.Output, args: ["currentTabStopIdChange"] }] } });
 
+/**
+ * An item of the roving focus of `KbqBreadcrumbs`. `KbqBreadcrumbButton` applies it itself, as a host directive.
+ *
+ * @docs-private
+ */
 class RdxRovingFocusItemDirective {
     constructor() {
         this.elementRef = inject(ElementRef);
         this.ngZone = inject(NgZone);
         this.parent = inject(RdxRovingFocusGroupDirective);
-        this.focusable = input(true, ...(ngDevMode ? [{ debugName: "focusable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.active = input(true, ...(ngDevMode ? [{ debugName: "active", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.tabStopId = input(undefined, ...(ngDevMode ? [{ debugName: "tabStopId" }] : []));
-        this.allowShiftKey = input(false, ...(ngDevMode ? [{ debugName: "allowShiftKey", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.id = computed(() => this.tabStopId() || generateId(), ...(ngDevMode ? [{ debugName: "id" }] : []));
+        /**
+         * Whether the item takes part in the roving focus. The arrow keys skip an item that does not, and a click
+         * does not focus it.
+         */
+        this.focusable = input(true, { ...(ngDevMode ? { debugName: "focusable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Whether the item is the one focus returns to when the group is re-entered. Defaults to `false`, so
+         * that `data-active` discriminates: with every item active the lookup degenerates to the first one.
+         */
+        this.active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.tabStopId = input('', ...(ngDevMode ? [{ debugName: "tabStopId" }] : /* istanbul ignore next */ []));
+        this.allowShiftKey = input(false, { ...(ngDevMode ? { debugName: "allowShiftKey" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.id = computed(() => this.tabStopId() || generateId(), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         /** @docs-private */
-        this.isCurrentTabStop = computed(() => this.parent.currentTabStopId() === this.id(), ...(ngDevMode ? [{ debugName: "isCurrentTabStop" }] : []));
-    }
-    /**
-     * Lifecycle hook triggered on initialization.
-     * Registers the element with the parent roving focus group if it is focusable.
-     * @docs-private
-     */
-    ngOnInit() {
-        if (this.focusable()) {
-            this.parent.registerItem(this.elementRef.nativeElement);
-            this.parent.onFocusableItemAdd();
-        }
+        this.isCurrentTabStop = computed(() => this.parent.currentTabStopId() === this.id(), ...(ngDevMode ? [{ debugName: "isCurrentTabStop" }] : /* istanbul ignore next */ []));
+        // Registration follows `focusable`, which the host binds to a derived expression: an item that
+        // becomes focusable after creation has to join the group, and one that stops being focusable has
+        // to leave it, or the group keeps counting an element the arrow keys can no longer reach.
+        effect((onCleanup) => {
+            if (!this.focusable())
+                return;
+            const element = this.elementRef.nativeElement;
+            this.parent.registerItem(element, this.id());
+            onCleanup(() => this.parent.unregisterItem(element));
+        });
     }
     /**
      * Lifecycle hook triggered on destruction.
-     * Unregisters the element from the parent roving focus group if it is focusable.
+     * Unregisters the element from the parent roving focus group.
+     *
      * @docs-private
      */
     ngOnDestroy() {
-        if (this.focusable()) {
-            this.parent.unregisterItem(this.elementRef.nativeElement);
-            this.parent.onFocusableItemRemove();
-        }
+        this.parent.unregisterItem(this.elementRef.nativeElement);
     }
     /**
      * Determines the `tabIndex` of the element.
      * Returns `0` if the element is the current tab stop; otherwise, returns `-1`.
+     *
      * @docs-private
      */
     get tabIndex() {
@@ -250,6 +292,7 @@ class RdxRovingFocusItemDirective {
      * Supports navigation based on orientation and direction, and focuses appropriate elements.
      *
      * @param event The `KeyboardEvent` object.
+     *
      * @docs-private
      */
     handleKeydown(event) {
@@ -259,7 +302,7 @@ class RdxRovingFocusItemDirective {
         }
         if (event.target !== this.elementRef.nativeElement)
             return;
-        const focusIntent = getFocusIntent(event, this.parent.orientation, this.parent.dir());
+        const focusIntent = getFocusIntent(event, this.parent.orientation, this.parent.resolvedDir());
         if (focusIntent !== undefined) {
             if (event.metaKey || event.ctrlKey || event.altKey || (this.allowShiftKey() ? false : event.shiftKey)) {
                 return;
@@ -279,15 +322,15 @@ class RdxRovingFocusItemDirective {
             }
             this.ngZone.runOutsideAngular(() => {
                 Promise.resolve().then(() => {
-                    focusFirst(candidateNodes, false, this.elementRef.nativeElement);
+                    focusFirst(candidateNodes, false);
                 });
             });
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RdxRovingFocusItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: RdxRovingFocusItemDirective, isStandalone: true, selector: "[rdxRovingFocusItem]", inputs: { focusable: { classPropertyName: "focusable", publicName: "focusable", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, tabStopId: { classPropertyName: "tabStopId", publicName: "tabStopId", isSignal: true, isRequired: false, transformFunction: null }, allowShiftKey: { classPropertyName: "allowShiftKey", publicName: "allowShiftKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousedown": "handleMouseDown($event)", "keydown": "handleKeydown($event)", "focus": "onFocus()" }, properties: { "attr.tabindex": "tabIndex", "attr.data-orientation": "parent.orientation", "attr.data-active": "active()", "attr.data-disabled": "!focusable() ? \"\" : undefined" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: RdxRovingFocusItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: RdxRovingFocusItemDirective, isStandalone: true, selector: "[rdxRovingFocusItem]", inputs: { focusable: { classPropertyName: "focusable", publicName: "focusable", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, tabStopId: { classPropertyName: "tabStopId", publicName: "tabStopId", isSignal: true, isRequired: false, transformFunction: null }, allowShiftKey: { classPropertyName: "allowShiftKey", publicName: "allowShiftKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousedown": "handleMouseDown($event)", "keydown": "handleKeydown($event)", "focus": "onFocus()" }, properties: { "attr.tabindex": "tabIndex", "attr.data-orientation": "parent.orientation", "attr.data-active": "active()", "attr.data-disabled": "!focusable() ? \"\" : undefined" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: RdxRovingFocusItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: RdxRovingFocusItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxRovingFocusItem]',
@@ -301,7 +344,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         '(focus)': 'onFocus()'
                     }
                 }]
-        }], propDecorators: { focusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusable", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], tabStopId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabStopId", required: false }] }], allowShiftKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowShiftKey", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { focusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusable", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], tabStopId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabStopId", required: false }] }], allowShiftKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowShiftKey", required: false }] }] } });
 
 const KBQ_BREADCRUMBS_DEFAULT_CONFIGURATION = {
     max: 4,
@@ -318,12 +361,13 @@ const kbqBreadcrumbsConfigurationProvider = (configuration) => ({
 });
 class KbqBreadcrumbsSeparator {
     constructor() {
+        // TODO: the library reads the template with `{ read: TemplateRef }`; kept as public API at the DS-2196 review.
         this.templateRef = inject(TemplateRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqBreadcrumbsSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqBreadcrumbsSeparator, isStandalone: true, selector: "ng-template[kbqBreadcrumbsSeparator]", host: { classAttribute: "kbq-breadcrumbs-separator" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqBreadcrumbsSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqBreadcrumbsSeparator, isStandalone: true, selector: "ng-template[kbqBreadcrumbsSeparator]", host: { classAttribute: "kbq-breadcrumbs-separator" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqBreadcrumbsSeparator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqBreadcrumbsSeparator, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[kbqBreadcrumbsSeparator]',
@@ -334,7 +378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
         }] });
 /**
  * Directive to style and configure buttons used as breadcrumb items.
- * - Inherits focus management behavior from `RdxRovingFocusItemDirective`.
+ * - Takes part in the roving focus of `KbqBreadcrumbs`: the arrow keys move between the items.
  * - Optionally injects `KbqButton` to customize its style for breadcrumb usage.
  * - Sets `type="button"` on a `<button>` host, so a breadcrumb never submits a surrounding form.
  */
@@ -344,15 +388,16 @@ class KbqBreadcrumbButton {
         this.element = kbqInjectNativeElement();
     }
     ngOnInit() {
-        if (this.button) {
-            this.button.color = KbqComponentColors.Contrast;
-            this.button.kbqStyle = KbqButtonStyles.Transparent;
-        }
+        // Applied through the seams that yield to the consumer: writing `color`/`kbqStyle` directly marks
+        // the value as owned by the button, which overwrites a binding the consumer authored and opts the
+        // button out of a surrounding `KbqButtonGroupRoot` for good.
+        this.button?.setKbqStyleFromGroup(KbqButtonStyles.Transparent);
+        this.button?.setColorFromGroup(KbqComponentColors.Contrast);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqBreadcrumbButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqBreadcrumbButton, isStandalone: true, selector: "[kbq-button][kbqBreadcrumb]", host: { properties: { "attr.type": "element.nodeName === \"BUTTON\" ? \"button\" : null" }, classAttribute: "kbq-breadcrumb-item" }, hostDirectives: [{ directive: RdxRovingFocusItemDirective, inputs: ["focusable", "focusable"] }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqBreadcrumbButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqBreadcrumbButton, isStandalone: true, selector: "[kbq-button][kbqBreadcrumb]", host: { properties: { "attr.type": "element.nodeName === \"BUTTON\" ? \"button\" : null" }, classAttribute: "kbq-breadcrumb-item" }, hostDirectives: [{ directive: RdxRovingFocusItemDirective, inputs: ["focusable", "focusable"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqBreadcrumbButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqBreadcrumbButton, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbq-button][kbqBreadcrumb]',
@@ -374,12 +419,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  */
 class KbqBreadcrumbView {
     constructor() {
+        // TODO: the library reads the template with `{ read: TemplateRef }`; kept as public API at the DS-2196 review.
         this.templateRef = inject(TemplateRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqBreadcrumbView, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqBreadcrumbView, isStandalone: true, selector: "[kbqBreadcrumbView]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqBreadcrumbView, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqBreadcrumbView, isStandalone: true, selector: "[kbqBreadcrumbView]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqBreadcrumbView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqBreadcrumbView, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqBreadcrumbView]'
@@ -394,94 +440,103 @@ class KbqBreadcrumbItem {
          * The text displayed for the breadcrumb item.
          * This text will be shown if breadcrumb item is hidden in dropdown.
          */
-        this.text = input(undefined, ...(ngDevMode ? [{ debugName: "text" }] : []));
+        this.text = input('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
         /**
          * Indicates whether the breadcrumb item is disabled.
          */
-        this.disabled = input(undefined, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * Indicates whether the breadcrumb item is the current/active item.
-         * Defaults to `false`.
+         * Indicates whether the breadcrumb item is the current/active item, which the trail exposes as
+         * `aria-current="page"`. The last item of a trail is current regardless of this input.
          */
-        this.current = input(false, ...(ngDevMode ? [{ debugName: "current", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.current = input(false, { ...(ngDevMode ? { debugName: "current" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * A reference to a custom template provided for the breadcrumb item content.
          * The template can be used to override the default appearance of the breadcrumb.
          */
-        this.customTemplateRef = contentChild(KbqBreadcrumbView, ...(ngDevMode ? [{ debugName: "customTemplateRef", read: TemplateRef }] : [{ read: TemplateRef }]));
+        this.customTemplateRef = contentChild(KbqBreadcrumbView, { ...(ngDevMode ? { debugName: "customTemplateRef" } : /* istanbul ignore next */ {}), read: TemplateRef });
         /**
          * An optional `RouterLink` instance for navigating to a specific route.
          * Injected from the host element, if available and projecting to the hidden breadcrumb item in dropdown.
          */
         this.routerLink = inject(RouterLink, { optional: true, host: true });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqBreadcrumbItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.30", type: KbqBreadcrumbItem, isStandalone: true, selector: "kbq-breadcrumb-item", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.tabIndex": "null" } }, queries: [{ propertyName: "customTemplateRef", first: true, predicate: KbqBreadcrumbView, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqBreadcrumbItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.25", type: KbqBreadcrumbItem, isStandalone: true, selector: "kbq-breadcrumb-item", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "customTemplateRef", first: true, predicate: KbqBreadcrumbView, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: `
         <ng-content />
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqBreadcrumbItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqBreadcrumbItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'kbq-breadcrumb-item',
                     template: `
         <ng-content />
     `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[attr.tabIndex]': 'null'
-                    }
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], customTemplateRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqBreadcrumbView), { ...{ read: TemplateRef }, isSignal: true }] }] } });
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], customTemplateRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqBreadcrumbView), { ...{
+                            read: TemplateRef
+                        }, isSignal: true }] }] } });
 class KbqBreadcrumbs {
     constructor() {
         this.configuration = inject(KBQ_BREADCRUMBS_CONFIGURATION);
+        /** Accessible names of the landmark itself and of the icon-only button revealing the collapsed items. */
+        this.a11yLocaleConfiguration = inject(KbqLocaleOverridesDirective, { self: true }).read('a11y', KBQ_A11Y_LOCALE_CONFIGURATION);
         /**
-         * Determines if a negative margin should be applied to the first breadcrumb item.
-         *
-         * @see KbqBreadcrumbsConfiguration
+         * Accessible name of the navigation landmark. Set it whenever a page renders more than one trail, so
+         * assistive technology can tell them apart. Left unset, the name comes from the active locale.
+         */
+        this.ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+        /**
+         * Determines if a negative margin should be applied to the first breadcrumb item. The default comes from
+         * {@link KbqBreadcrumbsConfiguration}.
          */
-        this.firstItemNegativeMargin = input(this.configuration.firstItemNegativeMargin, ...(ngDevMode ? [{ debugName: "firstItemNegativeMargin", transform: booleanAttribute }] : [{
-                transform: booleanAttribute
-            }]));
+        this.firstItemNegativeMargin = input(this.configuration.firstItemNegativeMargin, { ...(ngDevMode ? { debugName: "firstItemNegativeMargin" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Size of the breadcrumbs. Affects font size.
          * Default value is taken from the global configuration.
          */
-        this.size = input(this.configuration.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.size = input(this.configuration.size, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         /**
          * Maximum number of visible breadcrumb items.
          * Remaining items are collapsed into a dropdown if the total exceeds this value.
          * Default value is taken from the global configuration.
          */
-        this.max = input(this.configuration.max, ...(ngDevMode ? [{ debugName: "max" }] : []));
+        this.max = input(this.configuration.max, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
         /**
          * Indicates whether the breadcrumbs are disabled.
-         * When disabled, user interactions are blocked.
+         * When disabled, every item and the expand button stop navigating and leave the tab order.
          */
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Wrapping behavior of the breadcrumb items.
          */
-        this.wrapMode = input(this.configuration.wrapMode, ...(ngDevMode ? [{ debugName: "wrapMode" }] : []));
-        this.items = contentChildren(forwardRef(() => KbqBreadcrumbItem), ...(ngDevMode ? [{ debugName: "items" }] : []));
-        this.breadcrumbsResult = viewChild('breadcrumbsResult', ...(ngDevMode ? [{ debugName: "breadcrumbsResult", read: ElementRef }] : [{ read: ElementRef }]));
-        this.resultDropdownTrigger = viewChild('breadcrumbsResult', ...(ngDevMode ? [{ debugName: "resultDropdownTrigger", read: KbqDropdownTrigger }] : [{ read: KbqDropdownTrigger }]));
-        this.result = viewChild(KbqOverflowItemsResult, ...(ngDevMode ? [{ debugName: "result" }] : []));
-        this.overflowItems = viewChildren(forwardRef(() => KbqOverflowItem), ...(ngDevMode ? [{ debugName: "overflowItems" }] : []));
-        this.overflowItemsDir = viewChild(KbqOverflowItems, ...(ngDevMode ? [{ debugName: "overflowItemsDir" }] : []));
+        this.wrapMode = input(this.configuration.wrapMode, ...(ngDevMode ? [{ debugName: "wrapMode" }] : /* istanbul ignore next */ []));
+        this.separator = contentChild(KbqBreadcrumbsSeparator, { ...(ngDevMode ? { debugName: "separator" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.items = contentChildren(forwardRef(() => KbqBreadcrumbItem), ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.resultDropdownTrigger = viewChild('breadcrumbsResult', { ...(ngDevMode ? { debugName: "resultDropdownTrigger" } : /* istanbul ignore next */ {}), read: KbqDropdownTrigger });
+        this.result = viewChild(KbqOverflowItemsResult, ...(ngDevMode ? [{ debugName: "result" }] : /* istanbul ignore next */ []));
+        this.overflowItems = viewChildren(forwardRef(() => KbqOverflowItem), ...(ngDevMode ? [{ debugName: "overflowItems" }] : /* istanbul ignore next */ []));
+        this.overflowItemsDir = viewChild(KbqOverflowItems, ...(ngDevMode ? [{ debugName: "overflowItemsDir" }] : /* istanbul ignore next */ []));
         /**
          * Ensures at least minimum number of breadcrumb items are shown.
          */
         this.minVisibleItems = 2;
         this.KbqComponentColors = KbqComponentColors;
-        this.KbqButtonStyles = KbqButtonStyles;
         this.PopUpPlacements = PopUpPlacements;
+        /**
+         * `<nav>` is a landmark already, so the role is written only onto the other host forms. Resolved once:
+         * the tag name of a host element never changes.
+         */
+        this.hostRole = kbqInjectNativeElement().tagName === 'NAV' ? null : 'navigation';
+        /** Consumer-authored name of the landmark, falling back to the active locale. */
+        this.resolvedAriaLabel = computed(() => this.ariaLabel() ?? this.a11yLocaleConfiguration().breadcrumbs, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
         /** @docs-private */
-        this.itemsExcludingEdges = computed(() => this.items().slice(1, -1), ...(ngDevMode ? [{ debugName: "itemsExcludingEdges" }] : []));
+        this.itemsExcludingEdges = computed(() => this.items().slice(1, -1), ...(ngDevMode ? [{ debugName: "itemsExcludingEdges" }] : /* istanbul ignore next */ []));
         this.hiddenItemIDs = computed(() => new Set(this.overflowItems()
             .filter((item) => item.hidden())
-            .map((item) => item.id())), ...(ngDevMode ? [{ debugName: "hiddenItemIDs" }] : []));
+            .map((item) => item.id())), ...(ngDevMode ? [{ debugName: "hiddenItemIDs" }] : /* istanbul ignore next */ []));
         /** @docs-private */
         this.maxVisibleItems = computed(() => {
             const max = this.max();
@@ -489,21 +544,13 @@ class KbqBreadcrumbs {
             if (max === null || max >= count || max < this.minVisibleItems)
                 return null;
             return max - 1;
-        }, ...(ngDevMode ? [{ debugName: "maxVisibleItems" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "maxVisibleItems" }] : /* istanbul ignore next */ []));
         this.maxHiddenItems = new Set();
         const group = inject(RdxRovingFocusGroupDirective, { self: true });
         group.orientation = 'horizontal';
         merge(toObservable(this.overflowItemsDir).pipe(switchMap((dir) => (dir ? outputToObservable(dir.changes) : EMPTY))), toObservable(this.max).pipe(skip(1)))
             .pipe(takeUntilDestroyed())
             .subscribe(() => this.enforceMaxVisible());
-        effect(() => {
-            const focusableItems = group.focusableItems();
-            const expandButton = this.breadcrumbsResult()?.nativeElement;
-            if (focusableItems.length < 2 || focusableItems[0] !== expandButton)
-                return;
-            const [first, second, ...rest] = focusableItems;
-            group.focusableItems.set([second, first, ...rest]);
-        });
     }
     enforceMaxVisible() {
         const max = this.maxVisibleItems();
@@ -540,10 +587,10 @@ class KbqBreadcrumbs {
             result?.show();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqBreadcrumbs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqBreadcrumbs, isStandalone: true, selector: "kbq-breadcrumbs,[kbq-breadcrumbs]", inputs: { firstItemNegativeMargin: { classPropertyName: "firstItemNegativeMargin", publicName: "firstItemNegativeMargin", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, wrapMode: { classPropertyName: "wrapMode", publicName: "wrapMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-breadcrumbs_compact": "size() === \"compact\"", "class.kbq-breadcrumbs_normal": "size() === \"normal\"", "class.kbq-breadcrumbs_big": "size() === \"big\"", "class.kbq-breadcrumbs_wrap": "wrapMode() === \"wrap\"", "class.kbq-breadcrumbs_first-item-negative-margin": "firstItemNegativeMargin()", "attr.aria-label": "'breadcrumb'" }, classAttribute: "kbq-breadcrumbs" }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => KbqBreadcrumbItem), isSignal: true }, { propertyName: "separator", first: true, predicate: KbqBreadcrumbsSeparator, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "breadcrumbsResult", first: true, predicate: ["breadcrumbsResult"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "resultDropdownTrigger", first: true, predicate: ["breadcrumbsResult"], descendants: true, read: KbqDropdownTrigger, isSignal: true }, { propertyName: "result", first: true, predicate: KbqOverflowItemsResult, descendants: true, isSignal: true }, { propertyName: "overflowItems", predicate: i0.forwardRef(() => KbqOverflowItem), descendants: true, isSignal: true }, { propertyName: "overflowItemsDir", first: true, predicate: KbqOverflowItems, descendants: true, isSignal: true }], hostDirectives: [{ directive: RdxRovingFocusGroupDirective }], ngImport: i0, template: "@let allItems = items();\n@if (allItems.length < minVisibleItems || wrapMode() !== 'auto') {\n    @for (item of allItems; track item) {\n        <div class=\"kbq-breadcrumb-item__container\">\n            <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: item, last: $last }\" />\n            @if (!$last) {\n                <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n            }\n        </div>\n    }\n} @else {\n    <div #kbqOverflowItems=\"kbqOverflowItems\" kbqOverflowItems reverseOverflowOrder class=\"layout-align-start-center\">\n        <div class=\"kbq-breadcrumb-item__container\" [kbqOverflowItem]=\"0\" [order]=\"allItems.length\">\n            <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: allItems[0], last: false }\" />\n            <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n        </div>\n        <div kbqOverflowItemsResult class=\"kbq-breadcrumb-item__container\">\n            <button\n                #breadcrumbsResult\n                kbq-button\n                kbqBreadcrumb\n                class=\"kbq-breadcrumb__expand\"\n                [kbqDropdownTriggerFor]=\"hiddenBreadcrumbsDropdown\"\n                [kbqStyle]=\"KbqButtonStyles.Transparent\"\n            >\n                <i kbq-icon=\"kbq-ellipsis-horizontal_16\" [color]=\"KbqComponentColors.ContrastFade\"></i>\n            </button>\n            <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n\n            <kbq-dropdown #hiddenBreadcrumbsDropdown=\"kbqDropdown\">\n                @for (item of allItems; track item) {\n                    @if (hiddenItemIDs().has($index)) {\n                        <a kbq-dropdown-item [routerLink]=\"item.routerLink?.urlTree\" [disabled]=\"item.disabled()\">\n                            {{ item.text() }}\n                        </a>\n                    }\n                }\n            </kbq-dropdown>\n        </div>\n        @for (item of itemsExcludingEdges(); track item) {\n            <div class=\"kbq-breadcrumb-item__container\" [kbqOverflowItem]=\"$index + 1\">\n                <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: item, last: false }\" />\n                <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n            </div>\n        }\n        <div alwaysVisible class=\"kbq-breadcrumb-item__container\" [kbqOverflowItem]=\"allItems.length - 1\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    breadcrumbTemplate;\n                    context: { $implicit: allItems[allItems.length - 1], last: true }\n                \"\n            />\n        </div>\n    </div>\n}\n\n<ng-template #breadcrumbTemplate let-item let-last=\"last\">\n    @if (item.customTemplateRef()) {\n        <ng-container [ngTemplateOutlet]=\"item.customTemplateRef()!\" />\n    } @else {\n        <a\n            kbq-button\n            kbq-title\n            kbqBreadcrumb\n            [focusable]=\"!item.disabled() && !last\"\n            [routerLink]=\"item.routerLink?.urlTree\"\n            [attr.aria-current]=\"last ? 'page' : null\"\n            [disabled]=\"item.disabled() || last\"\n            [kbqPlacementPriority]=\"PopUpPlacements.Bottom\"\n            [kbqTooltipArrow]=\"false\"\n        >\n            {{ item.text() }}\n        </a>\n    }\n</ng-template>\n\n<ng-template #separatorTemplate>\n    @if (separator) {\n        <ng-container [ngTemplateOutlet]=\"separator\" />\n    } @else {\n        <i kbq-icon=\"\" class=\"kbq-breadcrumb__separator\" [color]=\"KbqComponentColors.ContrastFade\">&nbsp;/&nbsp;</i>\n    }\n</ng-template>\n", styles: [".kbq-breadcrumbs{display:flex;align-items:center;gap:var(--kbq-breadcrumbs-gap);flex-grow:1}.kbq-breadcrumbs kbq-breadcrumb-item{display:none;position:absolute;top:0;left:0}.kbq-breadcrumbs .kbq-overflow-items{padding:1px}.kbq-breadcrumbs .kbq-breadcrumb-item__container{display:inline-flex;align-items:center}.kbq-breadcrumbs.kbq-breadcrumbs_first-item-negative-margin .kbq-overflow-items{margin-left:var(--kbq-breadcrumb-item-negative-margin)}.kbq-breadcrumbs.kbq-breadcrumbs_wrap{flex-wrap:wrap}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button-icon{--kbq-breadcrumb-item-height: var(--kbq-size-xxl)}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb__expand.kbq-button-icon{--kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-xxs)}.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding)}.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button-icon{--kbq-button-size-height: var(--kbq-breadcrumb-item-height)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-size-height: var(--kbq-breadcrumb-item-height);--kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding);--kbq-button-size-border-radius: var(--kbq-breadcrumb-item-border-radius)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger{--kbq-dropdown-trigger-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding)}.kbq-breadcrumbs .kbq-breadcrumb-item:focus-visible{outline-offset:unset}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon{--kbq-button-icon-size-horizontal-padding: var(--kbq-breadcrumb-item-expand-horizontal-padding)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast-secondary);--kbq-button-transparent-contrast-fade-on-right-icon: var(--kbq-breadcrumb-item-icon-color);--kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-item-icon-color)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button[aria-current=page],.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon[aria-current=page]{--kbq-button-transparent-contrast-fade-on-states-disabled-foreground: var(--kbq-foreground-contrast)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button[aria-current=page].kbq-disabled,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon[aria-current=page].kbq-disabled{--kbq-button-transparent-contrast-fade-on-states-disabled-left-icon: var( --kbq-breadcrumb-item-icon-color );--kbq-button-transparent-contrast-fade-on-states-disabled-right-icon: var( --kbq-breadcrumb-item-icon-color )}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var( --kbq-states-icon-contrast-fade-hover );--kbq-button-transparent-contrast-fade-on-right-icon: var( --kbq-states-icon-contrast-fade-hover )}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).kbq-active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).kbq-active .kbq-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var( --kbq-states-icon-contrast-fade-active );--kbq-button-transparent-contrast-fade-on-right-icon: var( --kbq-states-icon-contrast-fade-active )}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-expand-icon-color)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-icon-contrast-fade)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-states-icon-contrast-fade-hover)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).kbq-active .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-states-icon-contrast-fade-active)}.kbq-breadcrumbs .kbq-breadcrumb_current .kbq-button.kbq-button_transparent.kbq-contrast,.kbq-breadcrumbs .kbq-breadcrumb_current .kbq-button-icon.kbq-button_transparent.kbq-contrast{--kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast)}.kbq-breadcrumbs .kbq-breadcrumb_current{color:var(--kbq-foreground-contrast)}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button-icon{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button-icon{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button-icon{font-size:var(--kbq-typography-subheading-font-size);font-style:var(--kbq-typography-subheading-font-style);font-weight:var(--kbq-typography-subheading-font-weight);line-height:var(--kbq-typography-subheading-line-height);font-family:var(--kbq-typography-subheading-font-family);text-transform:var(--kbq-typography-subheading-text-transform);font-feature-settings:var(--kbq-typography-subheading-font-feature-settings);letter-spacing:var(--kbq-typography-subheading-letter-spacing)}.kbq-breadcrumbs .kbq-breadcrumb__separator{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}\n", ":where(.kbq-breadcrumbs){--kbq-breadcrumb-item-horizontal-padding: var(--kbq-size-xs);--kbq-breadcrumb-item-height: var(--kbq-size-3xl);--kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-s);--kbq-breadcrumb-expand-icon-color: var(--kbq-icon-contrast-fade);--kbq-breadcrumb-item-border-radius: var(--kbq-size-xs);--kbq-breadcrumb-item-icon-color: var(--kbq-icon-contrast-fade);--kbq-breadcrumb-item-negative-margin: calc(-1 * var(--kbq-size-xs));--kbq-breadcrumbs-gap: 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i4.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i4.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: i4.KbqButtonDropdownTrigger, selector: "[kbq-button][kbqDropdownTriggerFor]" }, { kind: "ngmodule", type: KbqDropdownModule }, { kind: "component", type: i5.KbqDropdown, selector: "kbq-dropdown", inputs: ["navigationWithWrap", "xPosition", "yPosition", "overlapTriggerY", "overlapTriggerX", "hasBackdrop", "class", "backdropClass", "panelWidth", "panelMinWidth", "panelMaxWidth", "safeArea"], outputs: ["closed"], exportAs: ["kbqDropdown"] }, { kind: "component", type: i5.KbqDropdownItem, selector: "kbq-dropdown-item, [kbq-dropdown-item]", inputs: ["disabled", "progress"], exportAs: ["kbqDropdownItem"] }, { kind: "directive", type: i5.KbqDropdownTrigger, selector: "[kbqDropdownTriggerFor]", inputs: ["offsetX", "offsetY", "kbqDropdownTriggerData", "openByArrowDown", "demoteOverlay", "kbqDropdownTriggerRestoreFocus", "kbqDropdownTriggerFor"], outputs: ["dropdownOpened", "dropdownClosed"], exportAs: ["kbqDropdownTrigger"] }, { kind: "directive", type: KbqBreadcrumbButton, selector: "[kbq-button][kbqBreadcrumb]" }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i6.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title"], exportAs: ["kbqTitle"] }, { kind: "ngmodule", type: KbqOverflowItemsModule }, { kind: "directive", type: i7.KbqOverflowItems, selector: "[kbqOverflowItems]", inputs: ["reverseOverflowOrder", "debounceTime", "additionalResizeObserverTargets", "orientation", "wrap"], outputs: ["changes"], exportAs: ["kbqOverflowItems"] }, { kind: "directive", type: i7.KbqOverflowItem, selector: "[kbqOverflowItem]", inputs: ["kbqOverflowItem", "order", "alwaysVisible"], exportAs: ["kbqOverflowItem"] }, { kind: "directive", type: i7.KbqOverflowItemsResult, selector: "[kbqOverflowItemsResult]", exportAs: ["kbqOverflowItemsResult"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqBreadcrumbs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqBreadcrumbs, isStandalone: true, selector: "kbq-breadcrumbs,[kbq-breadcrumbs]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, firstItemNegativeMargin: { classPropertyName: "firstItemNegativeMargin", publicName: "firstItemNegativeMargin", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, wrapMode: { classPropertyName: "wrapMode", publicName: "wrapMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-breadcrumbs_compact": "size() === \"compact\"", "class.kbq-breadcrumbs_normal": "size() === \"normal\"", "class.kbq-breadcrumbs_big": "size() === \"big\"", "class.kbq-breadcrumbs_wrap": "wrapMode() === \"wrap\"", "class.kbq-breadcrumbs_first-item-negative-margin": "firstItemNegativeMargin()", "class.kbq-disabled": "disabled()", "attr.role": "hostRole", "attr.aria-label": "resolvedAriaLabel()" }, classAttribute: "kbq-breadcrumbs" }, queries: [{ propertyName: "separator", first: true, predicate: KbqBreadcrumbsSeparator, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "items", predicate: i0.forwardRef(() => KbqBreadcrumbItem), isSignal: true }], viewQueries: [{ propertyName: "resultDropdownTrigger", first: true, predicate: ["breadcrumbsResult"], descendants: true, read: KbqDropdownTrigger, isSignal: true }, { propertyName: "result", first: true, predicate: KbqOverflowItemsResult, descendants: true, isSignal: true }, { propertyName: "overflowItems", predicate: i0.forwardRef(() => KbqOverflowItem), descendants: true, isSignal: true }, { propertyName: "overflowItemsDir", first: true, predicate: KbqOverflowItems, descendants: true, isSignal: true }], hostDirectives: [{ directive: RdxRovingFocusGroupDirective, inputs: ["dir", "dir", "loop", "loop"] }, { directive: i3.KbqLocaleOverridesDirective, inputs: ["kbqLocaleOverrides", "localeOverrides"] }], ngImport: i0, template: "@let allItems = items();\n@if (allItems.length < minVisibleItems || wrapMode() !== 'auto') {\n    <div class=\"kbq-breadcrumbs__list\" role=\"list\">\n        @for (item of allItems; track item) {\n            <div class=\"kbq-breadcrumb-item__container\" role=\"listitem\">\n                <ng-container\n                    [ngTemplateOutlet]=\"breadcrumbTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item, last: $last }\"\n                />\n                @if (!$last) {\n                    <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n                }\n            </div>\n        }\n    </div>\n} @else {\n    <div\n        #kbqOverflowItems=\"kbqOverflowItems\"\n        kbqOverflowItems\n        reverseOverflowOrder\n        role=\"list\"\n        class=\"layout-align-start-center\"\n    >\n        <div class=\"kbq-breadcrumb-item__container\" role=\"listitem\" [kbqOverflowItem]=\"0\" [order]=\"allItems.length\">\n            <ng-container\n                [ngTemplateOutlet]=\"breadcrumbTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: allItems[0], last: false }\"\n            />\n            <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n        </div>\n        <div kbqOverflowItemsResult class=\"kbq-breadcrumb-item__container\" role=\"listitem\">\n            <button\n                #breadcrumbsResult\n                kbq-button\n                kbqBreadcrumb\n                class=\"kbq-breadcrumb__expand\"\n                [attr.aria-label]=\"a11yLocaleConfiguration().expandBreadcrumbs\"\n                [focusable]=\"!disabled()\"\n                [disabled]=\"disabled()\"\n                [kbqDropdownTriggerFor]=\"hiddenBreadcrumbsDropdown\"\n            >\n                <i kbq-icon=\"kbq-ellipsis-horizontal_16\" [color]=\"KbqComponentColors.ContrastFade\"></i>\n            </button>\n            <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n\n            <kbq-dropdown #hiddenBreadcrumbsDropdown=\"kbqDropdown\">\n                @for (item of allItems; track item) {\n                    @if (hiddenItemIDs().has($index)) {\n                        <a\n                            kbq-dropdown-item\n                            [routerLink]=\"item.routerLink?.urlTree\"\n                            [attr.aria-current]=\"item.current() ? 'page' : null\"\n                            [disabled]=\"disabled() || item.disabled()\"\n                        >\n                            @if (item.customTemplateRef(); as customTemplateRef) {\n                                <ng-container [ngTemplateOutlet]=\"customTemplateRef\" />\n                            } @else {\n                                {{ item.text() }}\n                            }\n                        </a>\n                    }\n                }\n            </kbq-dropdown>\n        </div>\n        @for (item of itemsExcludingEdges(); track item) {\n            <div class=\"kbq-breadcrumb-item__container\" role=\"listitem\" [kbqOverflowItem]=\"$index + 1\">\n                <ng-container\n                    [ngTemplateOutlet]=\"breadcrumbTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item, last: false }\"\n                />\n                <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n            </div>\n        }\n        <div\n            alwaysVisible\n            class=\"kbq-breadcrumb-item__container\"\n            role=\"listitem\"\n            [kbqOverflowItem]=\"allItems.length - 1\"\n        >\n            <ng-container\n                [ngTemplateOutlet]=\"breadcrumbTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: allItems[allItems.length - 1], last: true }\"\n            />\n        </div>\n    </div>\n}\n\n<ng-template #breadcrumbTemplate let-item let-last=\"last\">\n    @if (item.customTemplateRef()) {\n        <ng-container [ngTemplateOutlet]=\"item.customTemplateRef()!\" />\n    } @else {\n        <a\n            kbq-button\n            kbq-title\n            kbqBreadcrumb\n            [focusable]=\"!disabled() && !item.disabled() && !last\"\n            [routerLink]=\"item.routerLink?.urlTree\"\n            [attr.aria-current]=\"item.current() || last ? 'page' : null\"\n            [disabled]=\"disabled() || item.disabled() || last\"\n            [kbqPlacementPriority]=\"PopUpPlacements.Bottom\"\n            [kbqTooltipArrow]=\"false\"\n        >\n            {{ item.text() }}\n        </a>\n    }\n</ng-template>\n\n<ng-template #separatorTemplate>\n    @if (separator(); as separatorTemplateRef) {\n        <ng-container [ngTemplateOutlet]=\"separatorTemplateRef\" />\n    } @else {\n        <i aria-hidden=\"true\" class=\"kbq-breadcrumb__separator\">&nbsp;/&nbsp;</i>\n    }\n</ng-template>\n", styles: [".kbq-breadcrumbs{display:flex;align-items:center;gap:var(--kbq-breadcrumbs-gap);flex-grow:1}.kbq-breadcrumbs kbq-breadcrumb-item{display:none;position:absolute;top:0;left:0}.kbq-breadcrumbs .kbq-overflow-items{padding:1px}.kbq-breadcrumbs .kbq-breadcrumbs__list{display:flex;align-items:center;gap:var(--kbq-breadcrumbs-gap)}.kbq-breadcrumbs .kbq-breadcrumb-item__container{display:inline-flex;align-items:center}.kbq-breadcrumbs.kbq-breadcrumbs_first-item-negative-margin .kbq-overflow-items,.kbq-breadcrumbs.kbq-breadcrumbs_first-item-negative-margin .kbq-breadcrumbs__list{margin-left:var(--kbq-breadcrumb-item-negative-margin)}.kbq-breadcrumbs.kbq-breadcrumbs_wrap,.kbq-breadcrumbs.kbq-breadcrumbs_wrap .kbq-breadcrumbs__list{flex-wrap:wrap}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button-icon{--kbq-breadcrumb-item-height: var(--kbq-size-xxl)}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb__expand.kbq-button-icon{--kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-xxs)}.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding)}.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button-icon{--kbq-button-size-height: var(--kbq-breadcrumb-item-height)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-size-height: var(--kbq-breadcrumb-item-height);--kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding);--kbq-button-size-border-radius: var(--kbq-breadcrumb-item-border-radius)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger{--kbq-dropdown-trigger-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding)}.kbq-breadcrumbs .kbq-breadcrumb-item:focus-visible{outline-offset:unset}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon{--kbq-button-icon-size-horizontal-padding: var(--kbq-breadcrumb-item-expand-horizontal-padding)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast-secondary);--kbq-button-transparent-contrast-fade-on-right-icon: var(--kbq-breadcrumb-item-icon-color);--kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-item-icon-color)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button[aria-current=page],.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon[aria-current=page]{--kbq-button-transparent-contrast-fade-on-states-disabled-foreground: var(--kbq-foreground-contrast)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button[aria-current=page].kbq-disabled,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon[aria-current=page].kbq-disabled{--kbq-button-transparent-contrast-fade-on-states-disabled-left-icon: var( --kbq-breadcrumb-item-icon-color );--kbq-button-transparent-contrast-fade-on-states-disabled-right-icon: var( --kbq-breadcrumb-item-icon-color )}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var( --kbq-states-icon-contrast-fade-hover );--kbq-button-transparent-contrast-fade-on-right-icon: var( --kbq-states-icon-contrast-fade-hover )}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).kbq-active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).kbq-active .kbq-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var( --kbq-states-icon-contrast-fade-active );--kbq-button-transparent-contrast-fade-on-right-icon: var( --kbq-states-icon-contrast-fade-active )}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-expand-icon-color)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-icon-contrast-fade)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-states-icon-contrast-fade-hover)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).kbq-active .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-states-icon-contrast-fade-active)}.kbq-breadcrumbs .kbq-breadcrumb__separator{color:var(--kbq-icon-contrast-fade)}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button-icon{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button-icon{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button-icon{font-size:var(--kbq-typography-subheading-font-size);font-style:var(--kbq-typography-subheading-font-style);font-weight:var(--kbq-typography-subheading-font-weight);line-height:var(--kbq-typography-subheading-line-height);font-family:var(--kbq-typography-subheading-font-family);text-transform:var(--kbq-typography-subheading-text-transform);font-feature-settings:var(--kbq-typography-subheading-font-feature-settings);letter-spacing:var(--kbq-typography-subheading-letter-spacing)}.kbq-breadcrumbs .kbq-breadcrumb__separator{-webkit-user-select:none;user-select:none;font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}\n", ":where(.kbq-breadcrumbs){--kbq-breadcrumb-item-horizontal-padding: var(--kbq-size-xs);--kbq-breadcrumb-item-height: var(--kbq-size-3xl);--kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-s);--kbq-breadcrumb-expand-icon-color: var(--kbq-icon-contrast-fade);--kbq-breadcrumb-item-border-radius: var(--kbq-size-xs);--kbq-breadcrumb-item-icon-color: var(--kbq-icon-contrast-fade);--kbq-breadcrumb-item-negative-margin: calc(-1 * var(--kbq-size-xs));--kbq-breadcrumbs-gap: 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i4.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i5.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i5.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: i5.KbqButtonDropdownTrigger, selector: "[kbq-button][kbqDropdownTriggerFor]" }, { kind: "ngmodule", type: KbqDropdownModule }, { kind: "component", type: i6.KbqDropdown, selector: "kbq-dropdown", inputs: ["activeDescendantNavigation", "navigationWithWrap", "xPosition", "yPosition", "overlapTriggerY", "overlapTriggerX", "hasBackdrop", "class", "backdropClass", "panelWidth", "panelMinWidth", "panelMaxWidth", "safeArea"], outputs: ["xPositionChange", "yPositionChange", "overlapTriggerYChange", "overlapTriggerXChange", "closed"], exportAs: ["kbqDropdown"] }, { kind: "component", type: i6.KbqDropdownItem, selector: "kbq-dropdown-item, [kbq-dropdown-item]", inputs: ["disabled", "progress"], exportAs: ["kbqDropdownItem"] }, { kind: "directive", type: i6.KbqDropdownTrigger, selector: "[kbqDropdownTriggerFor]", inputs: ["offsetX", "offsetY", "kbqDropdownTriggerData", "openByArrowDown", "kbqDropdownTriggerOrigin", "kbqDropdownTriggerAutoFocus", "kbqDropdownTriggerRestoreFocus", "kbqDropdownTriggerFor"], outputs: ["offsetXChange", "openByArrowDownChange", "kbqDropdownTriggerRestoreFocusChange", "dropdownOpened", "dropdownClosed"], exportAs: ["kbqDropdownTrigger"] }, { kind: "directive", type: KbqBreadcrumbButton, selector: "[kbq-button][kbqBreadcrumb]" }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i7.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }, { kind: "ngmodule", type: KbqOverflowItemsModule }, { kind: "directive", type: i8.KbqOverflowItems, selector: "[kbqOverflowItems]", inputs: ["reverseOverflowOrder", "debounceTime", "additionalResizeObserverTargets", "orientation", "wrap"], outputs: ["changes"], exportAs: ["kbqOverflowItems"] }, { kind: "directive", type: i8.KbqOverflowItem, selector: "[kbqOverflowItem]", inputs: ["kbqOverflowItem", "order", "alwaysVisible"], exportAs: ["kbqOverflowItem"] }, { kind: "directive", type: i8.KbqOverflowItemsResult, selector: "[kbqOverflowItemsResult]", exportAs: ["kbqOverflowItemsResult"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqBreadcrumbs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqBreadcrumbs, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-breadcrumbs,[kbq-breadcrumbs]', imports: [
                         NgTemplateOutlet,
@@ -561,12 +608,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         '[class.kbq-breadcrumbs_big]': 'size() === "big"',
                         '[class.kbq-breadcrumbs_wrap]': 'wrapMode() === "wrap"',
                         '[class.kbq-breadcrumbs_first-item-negative-margin]': 'firstItemNegativeMargin()',
-                        '[attr.aria-label]': "'breadcrumb'"
-                    }, hostDirectives: [RdxRovingFocusGroupDirective], template: "@let allItems = items();\n@if (allItems.length < minVisibleItems || wrapMode() !== 'auto') {\n    @for (item of allItems; track item) {\n        <div class=\"kbq-breadcrumb-item__container\">\n            <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: item, last: $last }\" />\n            @if (!$last) {\n                <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n            }\n        </div>\n    }\n} @else {\n    <div #kbqOverflowItems=\"kbqOverflowItems\" kbqOverflowItems reverseOverflowOrder class=\"layout-align-start-center\">\n        <div class=\"kbq-breadcrumb-item__container\" [kbqOverflowItem]=\"0\" [order]=\"allItems.length\">\n            <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: allItems[0], last: false }\" />\n            <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n        </div>\n        <div kbqOverflowItemsResult class=\"kbq-breadcrumb-item__container\">\n            <button\n                #breadcrumbsResult\n                kbq-button\n                kbqBreadcrumb\n                class=\"kbq-breadcrumb__expand\"\n                [kbqDropdownTriggerFor]=\"hiddenBreadcrumbsDropdown\"\n                [kbqStyle]=\"KbqButtonStyles.Transparent\"\n            >\n                <i kbq-icon=\"kbq-ellipsis-horizontal_16\" [color]=\"KbqComponentColors.ContrastFade\"></i>\n            </button>\n            <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n\n            <kbq-dropdown #hiddenBreadcrumbsDropdown=\"kbqDropdown\">\n                @for (item of allItems; track item) {\n                    @if (hiddenItemIDs().has($index)) {\n                        <a kbq-dropdown-item [routerLink]=\"item.routerLink?.urlTree\" [disabled]=\"item.disabled()\">\n                            {{ item.text() }}\n                        </a>\n                    }\n                }\n            </kbq-dropdown>\n        </div>\n        @for (item of itemsExcludingEdges(); track item) {\n            <div class=\"kbq-breadcrumb-item__container\" [kbqOverflowItem]=\"$index + 1\">\n                <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: item, last: false }\" />\n                <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n            </div>\n        }\n        <div alwaysVisible class=\"kbq-breadcrumb-item__container\" [kbqOverflowItem]=\"allItems.length - 1\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    breadcrumbTemplate;\n                    context: { $implicit: allItems[allItems.length - 1], last: true }\n                \"\n            />\n        </div>\n    </div>\n}\n\n<ng-template #breadcrumbTemplate let-item let-last=\"last\">\n    @if (item.customTemplateRef()) {\n        <ng-container [ngTemplateOutlet]=\"item.customTemplateRef()!\" />\n    } @else {\n        <a\n            kbq-button\n            kbq-title\n            kbqBreadcrumb\n            [focusable]=\"!item.disabled() && !last\"\n            [routerLink]=\"item.routerLink?.urlTree\"\n            [attr.aria-current]=\"last ? 'page' : null\"\n            [disabled]=\"item.disabled() || last\"\n            [kbqPlacementPriority]=\"PopUpPlacements.Bottom\"\n            [kbqTooltipArrow]=\"false\"\n        >\n            {{ item.text() }}\n        </a>\n    }\n</ng-template>\n\n<ng-template #separatorTemplate>\n    @if (separator) {\n        <ng-container [ngTemplateOutlet]=\"separator\" />\n    } @else {\n        <i kbq-icon=\"\" class=\"kbq-breadcrumb__separator\" [color]=\"KbqComponentColors.ContrastFade\">&nbsp;/&nbsp;</i>\n    }\n</ng-template>\n", styles: [".kbq-breadcrumbs{display:flex;align-items:center;gap:var(--kbq-breadcrumbs-gap);flex-grow:1}.kbq-breadcrumbs kbq-breadcrumb-item{display:none;position:absolute;top:0;left:0}.kbq-breadcrumbs .kbq-overflow-items{padding:1px}.kbq-breadcrumbs .kbq-breadcrumb-item__container{display:inline-flex;align-items:center}.kbq-breadcrumbs.kbq-breadcrumbs_first-item-negative-margin .kbq-overflow-items{margin-left:var(--kbq-breadcrumb-item-negative-margin)}.kbq-breadcrumbs.kbq-breadcrumbs_wrap{flex-wrap:wrap}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button-icon{--kbq-breadcrumb-item-height: var(--kbq-size-xxl)}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb__expand.kbq-button-icon{--kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-xxs)}.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding)}.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button-icon{--kbq-button-size-height: var(--kbq-breadcrumb-item-height)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-size-height: var(--kbq-breadcrumb-item-height);--kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding);--kbq-button-size-border-radius: var(--kbq-breadcrumb-item-border-radius)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger{--kbq-dropdown-trigger-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding)}.kbq-breadcrumbs .kbq-breadcrumb-item:focus-visible{outline-offset:unset}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon{--kbq-button-icon-size-horizontal-padding: var(--kbq-breadcrumb-item-expand-horizontal-padding)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast-secondary);--kbq-button-transparent-contrast-fade-on-right-icon: var(--kbq-breadcrumb-item-icon-color);--kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-item-icon-color)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button[aria-current=page],.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon[aria-current=page]{--kbq-button-transparent-contrast-fade-on-states-disabled-foreground: var(--kbq-foreground-contrast)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button[aria-current=page].kbq-disabled,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon[aria-current=page].kbq-disabled{--kbq-button-transparent-contrast-fade-on-states-disabled-left-icon: var( --kbq-breadcrumb-item-icon-color );--kbq-button-transparent-contrast-fade-on-states-disabled-right-icon: var( --kbq-breadcrumb-item-icon-color )}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var( --kbq-states-icon-contrast-fade-hover );--kbq-button-transparent-contrast-fade-on-right-icon: var( --kbq-states-icon-contrast-fade-hover )}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).kbq-active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).kbq-active .kbq-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var( --kbq-states-icon-contrast-fade-active );--kbq-button-transparent-contrast-fade-on-right-icon: var( --kbq-states-icon-contrast-fade-active )}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-expand-icon-color)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-icon-contrast-fade)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-states-icon-contrast-fade-hover)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).kbq-active .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-states-icon-contrast-fade-active)}.kbq-breadcrumbs .kbq-breadcrumb_current .kbq-button.kbq-button_transparent.kbq-contrast,.kbq-breadcrumbs .kbq-breadcrumb_current .kbq-button-icon.kbq-button_transparent.kbq-contrast{--kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast)}.kbq-breadcrumbs .kbq-breadcrumb_current{color:var(--kbq-foreground-contrast)}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button-icon{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button-icon{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button-icon{font-size:var(--kbq-typography-subheading-font-size);font-style:var(--kbq-typography-subheading-font-style);font-weight:var(--kbq-typography-subheading-font-weight);line-height:var(--kbq-typography-subheading-line-height);font-family:var(--kbq-typography-subheading-font-family);text-transform:var(--kbq-typography-subheading-text-transform);font-feature-settings:var(--kbq-typography-subheading-font-feature-settings);letter-spacing:var(--kbq-typography-subheading-letter-spacing)}.kbq-breadcrumbs .kbq-breadcrumb__separator{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}\n", ":where(.kbq-breadcrumbs){--kbq-breadcrumb-item-horizontal-padding: var(--kbq-size-xs);--kbq-breadcrumb-item-height: var(--kbq-size-3xl);--kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-s);--kbq-breadcrumb-expand-icon-color: var(--kbq-icon-contrast-fade);--kbq-breadcrumb-item-border-radius: var(--kbq-size-xs);--kbq-breadcrumb-item-icon-color: var(--kbq-icon-contrast-fade);--kbq-breadcrumb-item-negative-margin: calc(-1 * var(--kbq-size-xs));--kbq-breadcrumbs-gap: 0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { firstItemNegativeMargin: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstItemNegativeMargin", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], wrapMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapMode", required: false }] }], separator: [{
-                type: ContentChild,
-                args: [KbqBreadcrumbsSeparator, { read: TemplateRef }]
-            }], items: [{ type: i0.ContentChildren, args: [forwardRef(() => KbqBreadcrumbItem), { isSignal: true }] }], breadcrumbsResult: [{ type: i0.ViewChild, args: ['breadcrumbsResult', { ...{ read: ElementRef }, isSignal: true }] }], resultDropdownTrigger: [{ type: i0.ViewChild, args: ['breadcrumbsResult', { ...{ read: KbqDropdownTrigger }, isSignal: true }] }], result: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqOverflowItemsResult), { isSignal: true }] }], overflowItems: [{ type: i0.ViewChildren, args: [forwardRef(() => KbqOverflowItem), { isSignal: true }] }], overflowItemsDir: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqOverflowItems), { isSignal: true }] }] } });
+                        '[class.kbq-disabled]': 'disabled()',
+                        '[attr.role]': 'hostRole',
+                        '[attr.aria-label]': 'resolvedAriaLabel()'
+                    }, hostDirectives: [
+                        {
+                            directive: RdxRovingFocusGroupDirective,
+                            inputs: ['dir', 'loop']
+                        },
+                        { directive: KbqLocaleOverridesDirective, inputs: ['kbqLocaleOverrides: localeOverrides'] }
+                    ], template: "@let allItems = items();\n@if (allItems.length < minVisibleItems || wrapMode() !== 'auto') {\n    <div class=\"kbq-breadcrumbs__list\" role=\"list\">\n        @for (item of allItems; track item) {\n            <div class=\"kbq-breadcrumb-item__container\" role=\"listitem\">\n                <ng-container\n                    [ngTemplateOutlet]=\"breadcrumbTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item, last: $last }\"\n                />\n                @if (!$last) {\n                    <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n                }\n            </div>\n        }\n    </div>\n} @else {\n    <div\n        #kbqOverflowItems=\"kbqOverflowItems\"\n        kbqOverflowItems\n        reverseOverflowOrder\n        role=\"list\"\n        class=\"layout-align-start-center\"\n    >\n        <div class=\"kbq-breadcrumb-item__container\" role=\"listitem\" [kbqOverflowItem]=\"0\" [order]=\"allItems.length\">\n            <ng-container\n                [ngTemplateOutlet]=\"breadcrumbTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: allItems[0], last: false }\"\n            />\n            <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n        </div>\n        <div kbqOverflowItemsResult class=\"kbq-breadcrumb-item__container\" role=\"listitem\">\n            <button\n                #breadcrumbsResult\n                kbq-button\n                kbqBreadcrumb\n                class=\"kbq-breadcrumb__expand\"\n                [attr.aria-label]=\"a11yLocaleConfiguration().expandBreadcrumbs\"\n                [focusable]=\"!disabled()\"\n                [disabled]=\"disabled()\"\n                [kbqDropdownTriggerFor]=\"hiddenBreadcrumbsDropdown\"\n            >\n                <i kbq-icon=\"kbq-ellipsis-horizontal_16\" [color]=\"KbqComponentColors.ContrastFade\"></i>\n            </button>\n            <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n\n            <kbq-dropdown #hiddenBreadcrumbsDropdown=\"kbqDropdown\">\n                @for (item of allItems; track item) {\n                    @if (hiddenItemIDs().has($index)) {\n                        <a\n                            kbq-dropdown-item\n                            [routerLink]=\"item.routerLink?.urlTree\"\n                            [attr.aria-current]=\"item.current() ? 'page' : null\"\n                            [disabled]=\"disabled() || item.disabled()\"\n                        >\n                            @if (item.customTemplateRef(); as customTemplateRef) {\n                                <ng-container [ngTemplateOutlet]=\"customTemplateRef\" />\n                            } @else {\n                                {{ item.text() }}\n                            }\n                        </a>\n                    }\n                }\n            </kbq-dropdown>\n        </div>\n        @for (item of itemsExcludingEdges(); track item) {\n            <div class=\"kbq-breadcrumb-item__container\" role=\"listitem\" [kbqOverflowItem]=\"$index + 1\">\n                <ng-container\n                    [ngTemplateOutlet]=\"breadcrumbTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item, last: false }\"\n                />\n                <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n            </div>\n        }\n        <div\n            alwaysVisible\n            class=\"kbq-breadcrumb-item__container\"\n            role=\"listitem\"\n            [kbqOverflowItem]=\"allItems.length - 1\"\n        >\n            <ng-container\n                [ngTemplateOutlet]=\"breadcrumbTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: allItems[allItems.length - 1], last: true }\"\n            />\n        </div>\n    </div>\n}\n\n<ng-template #breadcrumbTemplate let-item let-last=\"last\">\n    @if (item.customTemplateRef()) {\n        <ng-container [ngTemplateOutlet]=\"item.customTemplateRef()!\" />\n    } @else {\n        <a\n            kbq-button\n            kbq-title\n            kbqBreadcrumb\n            [focusable]=\"!disabled() && !item.disabled() && !last\"\n            [routerLink]=\"item.routerLink?.urlTree\"\n            [attr.aria-current]=\"item.current() || last ? 'page' : null\"\n            [disabled]=\"disabled() || item.disabled() || last\"\n            [kbqPlacementPriority]=\"PopUpPlacements.Bottom\"\n            [kbqTooltipArrow]=\"false\"\n        >\n            {{ item.text() }}\n        </a>\n    }\n</ng-template>\n\n<ng-template #separatorTemplate>\n    @if (separator(); as separatorTemplateRef) {\n        <ng-container [ngTemplateOutlet]=\"separatorTemplateRef\" />\n    } @else {\n        <i aria-hidden=\"true\" class=\"kbq-breadcrumb__separator\">&nbsp;/&nbsp;</i>\n    }\n</ng-template>\n", styles: [".kbq-breadcrumbs{display:flex;align-items:center;gap:var(--kbq-breadcrumbs-gap);flex-grow:1}.kbq-breadcrumbs kbq-breadcrumb-item{display:none;position:absolute;top:0;left:0}.kbq-breadcrumbs .kbq-overflow-items{padding:1px}.kbq-breadcrumbs .kbq-breadcrumbs__list{display:flex;align-items:center;gap:var(--kbq-breadcrumbs-gap)}.kbq-breadcrumbs .kbq-breadcrumb-item__container{display:inline-flex;align-items:center}.kbq-breadcrumbs.kbq-breadcrumbs_first-item-negative-margin .kbq-overflow-items,.kbq-breadcrumbs.kbq-breadcrumbs_first-item-negative-margin .kbq-breadcrumbs__list{margin-left:var(--kbq-breadcrumb-item-negative-margin)}.kbq-breadcrumbs.kbq-breadcrumbs_wrap,.kbq-breadcrumbs.kbq-breadcrumbs_wrap .kbq-breadcrumbs__list{flex-wrap:wrap}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button-icon{--kbq-breadcrumb-item-height: var(--kbq-size-xxl)}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb__expand.kbq-button-icon{--kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-xxs)}.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding)}.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button-icon{--kbq-button-size-height: var(--kbq-breadcrumb-item-height)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-size-height: var(--kbq-breadcrumb-item-height);--kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding);--kbq-button-size-border-radius: var(--kbq-breadcrumb-item-border-radius)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger{--kbq-dropdown-trigger-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding)}.kbq-breadcrumbs .kbq-breadcrumb-item:focus-visible{outline-offset:unset}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon{--kbq-button-icon-size-horizontal-padding: var(--kbq-breadcrumb-item-expand-horizontal-padding)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast-secondary);--kbq-button-transparent-contrast-fade-on-right-icon: var(--kbq-breadcrumb-item-icon-color);--kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-item-icon-color)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button[aria-current=page],.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon[aria-current=page]{--kbq-button-transparent-contrast-fade-on-states-disabled-foreground: var(--kbq-foreground-contrast)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button[aria-current=page].kbq-disabled,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon[aria-current=page].kbq-disabled{--kbq-button-transparent-contrast-fade-on-states-disabled-left-icon: var( --kbq-breadcrumb-item-icon-color );--kbq-button-transparent-contrast-fade-on-states-disabled-right-icon: var( --kbq-breadcrumb-item-icon-color )}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var( --kbq-states-icon-contrast-fade-hover );--kbq-button-transparent-contrast-fade-on-right-icon: var( --kbq-states-icon-contrast-fade-hover )}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).kbq-active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).kbq-active .kbq-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var( --kbq-states-icon-contrast-fade-active );--kbq-button-transparent-contrast-fade-on-right-icon: var( --kbq-states-icon-contrast-fade-active )}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-expand-icon-color)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-icon-contrast-fade)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-states-icon-contrast-fade-hover)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).kbq-active .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-states-icon-contrast-fade-active)}.kbq-breadcrumbs .kbq-breadcrumb__separator{color:var(--kbq-icon-contrast-fade)}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button-icon{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button-icon{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button-icon{font-size:var(--kbq-typography-subheading-font-size);font-style:var(--kbq-typography-subheading-font-style);font-weight:var(--kbq-typography-subheading-font-weight);line-height:var(--kbq-typography-subheading-line-height);font-family:var(--kbq-typography-subheading-font-family);text-transform:var(--kbq-typography-subheading-text-transform);font-feature-settings:var(--kbq-typography-subheading-font-feature-settings);letter-spacing:var(--kbq-typography-subheading-letter-spacing)}.kbq-breadcrumbs .kbq-breadcrumb__separator{-webkit-user-select:none;user-select:none;font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}\n", ":where(.kbq-breadcrumbs){--kbq-breadcrumb-item-horizontal-padding: var(--kbq-size-xs);--kbq-breadcrumb-item-height: var(--kbq-size-3xl);--kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-s);--kbq-breadcrumb-expand-icon-color: var(--kbq-icon-contrast-fade);--kbq-breadcrumb-item-border-radius: var(--kbq-size-xs);--kbq-breadcrumb-item-icon-color: var(--kbq-icon-contrast-fade);--kbq-breadcrumb-item-negative-margin: calc(-1 * var(--kbq-size-xs));--kbq-breadcrumbs-gap: 0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], firstItemNegativeMargin: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstItemNegativeMargin", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], wrapMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapMode", required: false }] }], separator: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqBreadcrumbsSeparator), { ...{ read: TemplateRef }, isSignal: true }] }], items: [{ type: i0.ContentChildren, args: [forwardRef(() => KbqBreadcrumbItem), { isSignal: true }] }], resultDropdownTrigger: [{ type: i0.ViewChild, args: ['breadcrumbsResult', { ...{ read: KbqDropdownTrigger }, isSignal: true }] }], result: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqOverflowItemsResult), { isSignal: true }] }], overflowItems: [{ type: i0.ViewChildren, args: [forwardRef(() => KbqOverflowItem), { isSignal: true }] }], overflowItemsDir: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqOverflowItems), { isSignal: true }] }] } });
 
 const COMPONENTS = [
     KbqBreadcrumbs,
@@ -576,8 +628,8 @@ const COMPONENTS = [
     KbqBreadcrumbButton
 ];
 class KbqBreadcrumbsModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqBreadcrumbsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqBreadcrumbsModule, imports: [KbqBreadcrumbs,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqBreadcrumbsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqBreadcrumbsModule, imports: [KbqBreadcrumbs,
             KbqBreadcrumbItem,
             KbqBreadcrumbView,
             KbqBreadcrumbsSeparator,
@@ -586,9 +638,9 @@ class KbqBreadcrumbsModule {
             KbqBreadcrumbView,
             KbqBreadcrumbsSeparator,
             KbqBreadcrumbButton] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqBreadcrumbsModule, imports: [KbqBreadcrumbs] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqBreadcrumbsModule, imports: [KbqBreadcrumbs] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqBreadcrumbsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqBreadcrumbsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS,