@xui/breadcrumb 2.0.0-alpha.1 → 2.0.0-alpha.11

package/fesm2022/xui-breadcrumb.mjs

@@ -1,29 +1,54 @@
 import * as i0 from '@angular/core';
-import { input, computed, Component, booleanAttribute, Directive, NgModule } from '@angular/core';
+import { input, computed, Directive, ChangeDetectionStrategy, Component, booleanAttribute, contentChild, TemplateRef, numberAttribute, output } from '@angular/core';
+import { xui } from '@xui/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { matMoreHorizRound, matChevronRightRound } from '@ng-icons/material-icons/round';
-import { xui } from '@xui/core';
-import { XuiIconDirective } from '@xui/icon';
-import * as i1 from '@angular/router';
+import { XuiIcon } from '@xui/icon';
+import { NgTemplateOutlet } from '@angular/common';
 import { RouterLink } from '@angular/router';
+import { XuiOverflowList, XuiOverflowListItem, XuiOverflowListOverflow } from '@xui/overflow-list';
 
-class XuiBreadcrumbEllipsisComponent {
-    class = input('');
-    computedClass = computed(() => xui('flex items-center justify-center', this.class()));
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: XuiBreadcrumbEllipsisComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.3", type: XuiBreadcrumbEllipsisComponent, isStandalone: true, selector: "xui-breadcrumb-ellipsis", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ matMoreHorizRound })], ngImport: i0, template: `
+class XuiBreadcrumb {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('breadcrumb', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    computedClass = computed(() => xui(this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: XuiBreadcrumb, isStandalone: true, selector: "[xuiBreadcrumb]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "class": "computedClass()", "attr.aria-label": "ariaLabel()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiBreadcrumb, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[xuiBreadcrumb]',
+                    host: {
+                        role: 'navigation',
+                        '[class]': 'computedClass()',
+                        '[attr.aria-label]': 'ariaLabel()'
+                    }
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
+
+class XuiBreadcrumbEllipsis {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => xui('flex items-center justify-center', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiBreadcrumbEllipsis, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: XuiBreadcrumbEllipsis, isStandalone: true, selector: "xui-breadcrumb-ellipsis", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ matMoreHorizRound })], ngImport: i0, template: `
     <span role="presentation" aria-hidden="true" [class]="computedClass()">
       <ng-icon xui size="sm" name="matMoreHorizRound" />
       <span class="sr-only">More</span>
     </span>
-  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: XuiIconDirective, selector: "ng-icon[xui]", inputs: ["size"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: XuiIcon, selector: "ng-icon[xui]", inputs: ["class", "size", "color", "title"], exportAs: ["xuiIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: XuiBreadcrumbEllipsisComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiBreadcrumbEllipsis, decorators: [{
             type: Component,
             args: [{
                     selector: 'xui-breadcrumb-ellipsis',
-                    imports: [NgIcon, XuiIconDirective],
+                    imports: [NgIcon, XuiIcon],
                     providers: [provideIcons({ matMoreHorizRound })],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     <span role="presentation" aria-hidden="true" [class]="computedClass()">
       <ng-icon xui size="sm" name="matMoreHorizRound" />
@@ -31,16 +56,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
     </span>
   `
                 }]
-        }] });
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
-class XuiBreadcrumbItemDirective {
-    class = input('');
-    active = input(false, { transform: booleanAttribute });
-    computedClass = computed(() => xui('inline-flex items-center gap-1.5', this.active() && '[&>*]:font-semibold', this.class()));
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: XuiBreadcrumbItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.3", type: XuiBreadcrumbItemDirective, isStandalone: true, selector: "[xuiBreadcrumbItem]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+class XuiBreadcrumbItem {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    computedClass = computed(() => xui('inline-flex items-center gap-1.5', this.active() && '[&>*]:font-semibold', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiBreadcrumbItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: XuiBreadcrumbItem, isStandalone: true, selector: "[xuiBreadcrumbItem]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: XuiBreadcrumbItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiBreadcrumbItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[xuiBreadcrumbItem]',
@@ -48,50 +75,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
                         '[class]': 'computedClass()'
                     }
                 }]
-        }] });
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }] } });
 
-class XuiBreadcrumbLinkDirective {
-    class = input('');
-    link = input();
-    computedClass = computed(() => xui('transition-colors hover:text-foreground', this.class()));
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: XuiBreadcrumbLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.3", type: XuiBreadcrumbLinkDirective, isStandalone: true, selector: "[xuiBreadcrumbLink]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, hostDirectives: [{ directive: i1.RouterLink, inputs: ["target", "target", "queryParams", "queryParams", "fragment", "fragment", "queryParamsHandling", "queryParamsHandling", "state", "state", "info", "info", "relativeTo", "relativeTo", "preserveFragment", "preserveFragment", "skipLocationChange", "skipLocationChange", "replaceUrl", "replaceUrl", "routerLink", "link"] }], ngImport: i0 });
+/**
+ * A navigable crumb.
+ *
+ * ```html
+ * <a xuiBreadcrumbLink href="/projects">Projects</a>
+ * <a xuiBreadcrumbLink [routerLink]="['/projects']">Projects</a>
+ * ```
+ *
+ * This is styling and disabled semantics only — it deliberately does not
+ * compose `RouterLink`. Doing so made every breadcrumb fail to render without a
+ * `Router` in the injector, routed or not, because host directives are
+ * instantiated unconditionally. Applying `routerLink` alongside it costs the
+ * consumer nothing and keeps `@angular/router` optional.
+ */
+class XuiBreadcrumbLink {
+    /** The user-defined classes. Merged last so they win over the base classes. */
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    /** Renders the crumb as unreachable without dropping it from the trail. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    computedClass = computed(() => xui('hover:text-foreground rounded-sm transition-colors focus-visible:outline-5 focus-visible:outline-offset-2', this.disabled() && 'text-foreground-muted pointer-events-none opacity-60 hover:text-inherit', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiBreadcrumbLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: XuiBreadcrumbLink, isStandalone: true, selector: "[xuiBreadcrumbLink]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()", "attr.aria-disabled": "disabled() || null", "attr.tabindex": "disabled() ? -1 : null" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: XuiBreadcrumbLinkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiBreadcrumbLink, decorators: [{
             type: Directive,
             args: [{
                     selector: '[xuiBreadcrumbLink]',
-                    hostDirectives: [
-                        {
-                            directive: RouterLink,
-                            inputs: [
-                                'target',
-                                'queryParams',
-                                'fragment',
-                                'queryParamsHandling',
-                                'state',
-                                'info',
-                                'relativeTo',
-                                'preserveFragment',
-                                'skipLocationChange',
-                                'replaceUrl',
-                                'routerLink: link'
-                            ]
-                        }
-                    ],
                     host: {
-                        '[class]': 'computedClass()'
+                        '[class]': 'computedClass()',
+                        '[attr.aria-disabled]': 'disabled() || null',
+                        '[attr.tabindex]': 'disabled() ? -1 : null'
                     }
                 }]
-        }] });
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
-class XuiBreadcrumbListDirective {
-    class = input('');
-    computedClass = computed(() => xui('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', this.class()));
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: XuiBreadcrumbListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.3", type: XuiBreadcrumbListDirective, isStandalone: true, selector: "[xuiBreadcrumbList]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+class XuiBreadcrumbList {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => xui('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiBreadcrumbList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: XuiBreadcrumbList, isStandalone: true, selector: "[xuiBreadcrumbList]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: XuiBreadcrumbListDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiBreadcrumbList, decorators: [{
             type: Directive,
             args: [{
                     selector: '[xuiBreadcrumbList]',
@@ -99,115 +130,351 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
                         '[class]': 'computedClass()'
                     }
                 }]
-        }] });
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
-class XuiBreadcrumbPageDirective {
-    class = input('');
-    computedClass = computed(() => xui('font-normal text-foreground', this.class()));
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: XuiBreadcrumbPageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.3", type: XuiBreadcrumbPageDirective, isStandalone: true, selector: "[xuiBreadcrumbPage]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "link" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+class XuiBreadcrumbPage {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => xui('font-normal text-foreground', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiBreadcrumbPage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: XuiBreadcrumbPage, isStandalone: true, selector: "[xuiBreadcrumbPage]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "link", "aria-disabled": "true", "aria-current": "page" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: XuiBreadcrumbPageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiBreadcrumbPage, decorators: [{
             type: Directive,
             args: [{
                     selector: '[xuiBreadcrumbPage]',
                     host: {
                         role: 'link',
+                        'aria-disabled': 'true',
+                        'aria-current': 'page',
                         '[class]': 'computedClass()'
-                        // TODO
-                        // '[attr.aria-disabled]': 'disabled',
-                        // '[attr.aria-current]': 'page',
                     }
                 }]
-        }] });
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
-class XuiBreadcrumbSeparatorComponent {
-    class = input('');
-    computedClass = computed(() => xui('flex items-center justify-center [&>ng-icon]:w-3.5 [&>ng-icon]:h-3.5 [&>ng-icon]:flex', this.class()));
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: XuiBreadcrumbSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.3", type: XuiBreadcrumbSeparatorComponent, isStandalone: true, selector: "[xuiBreadcrumbSeparator]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, properties: { "class": "computedClass()", "attr.aria-hidden": "true" } }, providers: [provideIcons({ matChevronRightRound })], ngImport: i0, template: `
+class XuiBreadcrumbSeparator {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => xui('flex items-center justify-center [&>ng-icon]:text-[14px] [&>ng-icon]:flex!', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiBreadcrumbSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: XuiBreadcrumbSeparator, isStandalone: true, selector: "[xuiBreadcrumbSeparator]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation", "aria-hidden": "true" }, properties: { "class": "computedClass()" } }, providers: [provideIcons({ matChevronRightRound })], ngImport: i0, template: `
     <ng-content>
-      <ng-icon size="sm" xui name="matChevronRightRound" />
+      <ng-icon name="matChevronRightRound" />
     </ng-content>
-  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: XuiIconDirective, selector: "ng-icon[xui]", inputs: ["size"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: XuiBreadcrumbSeparatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiBreadcrumbSeparator, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[xuiBreadcrumbSeparator]',
-                    imports: [NgIcon, XuiIconDirective],
+                    imports: [NgIcon],
                     providers: [provideIcons({ matChevronRightRound })],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         role: 'presentation',
-                        '[class]': 'computedClass()',
-                        '[attr.aria-hidden]': 'true'
+                        'aria-hidden': 'true',
+                        '[class]': 'computedClass()'
                     },
                     template: `
     <ng-content>
-      <ng-icon size="sm" xui name="matChevronRightRound" />
+      <ng-icon name="matChevronRightRound" />
     </ng-content>
   `
                 }]
-        }] });
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
-class XuiBreadcrumbDirective {
-    class = input('');
-    ariaLabel = input('breadcrumb', { alias: 'aria-label' });
-    computedClass = computed(() => xui('', this.class()));
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: XuiBreadcrumbDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.3", type: XuiBreadcrumbDirective, isStandalone: true, selector: "[xuiBreadcrumb]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "class": "computedClass()", "attr.aria-label": "ariaLabel()" } }, ngImport: i0 });
+/** Replaces the default rendering of every crumb. */
+class XuiBreadcrumbsItem {
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiBreadcrumbsItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: XuiBreadcrumbsItem, isStandalone: true, selector: "ng-template[xuiBreadcrumbsItem]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: XuiBreadcrumbDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiBreadcrumbsItem, decorators: [{
             type: Directive,
+            args: [{ selector: 'ng-template[xuiBreadcrumbsItem]' }]
+        }] });
+/** Replaces the default rendering of the current crumb only. */
+class XuiBreadcrumbsCurrent {
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiBreadcrumbsCurrent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: XuiBreadcrumbsCurrent, isStandalone: true, selector: "ng-template[xuiBreadcrumbsCurrent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiBreadcrumbsCurrent, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[xuiBreadcrumbsCurrent]' }]
+        }] });
+/** Replaces the ellipsis shown in place of the collapsed crumbs. */
+class XuiBreadcrumbsOverflow {
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiBreadcrumbsOverflow, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: XuiBreadcrumbsOverflow, isStandalone: true, selector: "ng-template[xuiBreadcrumbsOverflow]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiBreadcrumbsOverflow, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[xuiBreadcrumbsOverflow]' }]
+        }] });
+/**
+ * A breadcrumb trail built from an array, collapsing to fit its container.
+ *
+ * ```html
+ * <xui-breadcrumbs [items]="crumbs()" (itemClick)="open($event)" />
+ * ```
+ *
+ * This is the assembled form of the breadcrumb parts, wired to
+ * `xui-overflow-list` so crumbs that do not fit fold into an ellipsis. Compose
+ * the parts directly when the markup has to differ; reach for this when the
+ * trail is data.
+ *
+ * The collapsed crumbs are handed to the overflow template, so a menu can be
+ * hung off the ellipsis. Without one they are not lost — the template receives
+ * them and `(overflow)` reports them.
+ *
+ * An `icon` names an `@ng-icons` icon that the application registers; this
+ * package cannot know the set in advance.
+ */
+class XuiBreadcrumbs {
+    itemTemplate = contentChild(XuiBreadcrumbsItem, { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    currentTemplate = contentChild(XuiBreadcrumbsCurrent, { ...(ngDevMode ? { debugName: "currentTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    overflowTemplate = contentChild(XuiBreadcrumbsOverflow, { ...(ngDevMode ? { debugName: "overflowTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    /** The user-defined classes. Merged last so they win over the base classes. */
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Which end collapses. A trail collapses from the start, keeping where you are. */
+    collapseFrom = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapseFrom" }] : /* istanbul ignore next */ []));
+    /** Never collapse below this many crumbs, however narrow the container gets. */
+    minVisibleItems = input(0, { ...(ngDevMode ? { debugName: "minVisibleItems" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Emits the collapsed crumbs whenever the set changes. */
+    overflow = output();
+    /** Emits when a navigable crumb is activated. A crumb with neither `href` nor `link` is not. */
+    itemClick = output();
+    computedClass = computed(() => xui('block min-w-0', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    /** The last crumb is where you are, unless an item says otherwise. */
+    isCurrent(index) {
+        return this.items()[index]?.current ?? index === this.items().length - 1;
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiBreadcrumbs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiBreadcrumbs, isStandalone: true, selector: "xui-breadcrumbs", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, collapseFrom: { classPropertyName: "collapseFrom", publicName: "collapseFrom", isSignal: true, isRequired: false, transformFunction: null }, minVisibleItems: { classPropertyName: "minVisibleItems", publicName: "minVisibleItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { overflow: "overflow", itemClick: "itemClick" }, host: { properties: { "class": "computedClass()" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: XuiBreadcrumbsItem, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "currentTemplate", first: true, predicate: XuiBreadcrumbsCurrent, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "overflowTemplate", first: true, predicate: XuiBreadcrumbsOverflow, descendants: true, read: TemplateRef, isSignal: true }], hostDirectives: [{ directive: XuiBreadcrumb, inputs: ["aria-label", "aria-label"] }], ngImport: i0, template: `
+    <xui-overflow-list
+      role="list"
+      itemRole="listitem"
+      class="text-foreground-muted gap-1.5 text-sm"
+      [items]="items()"
+      [collapseFrom]="collapseFrom()"
+      [minVisibleItems]="minVisibleItems()"
+      (overflow)="overflow.emit($event)"
+    >
+      <ng-template xuiOverflowListItem let-item let-index="index">
+        <span xuiBreadcrumbItem class="whitespace-nowrap">
+          @if (index > 0) {
+            <span xuiBreadcrumbSeparator></span>
+          }
+          <ng-container
+            *ngTemplateOutlet="
+              isCurrent(index)
+                ? (currentTemplate() ?? itemTemplate() ?? defaultCurrent)
+                : (itemTemplate() ?? defaultCrumb);
+              context: { $implicit: item, index: index, current: isCurrent(index) }
+            "
+          />
+        </span>
+      </ng-template>
+
+      <ng-template xuiOverflowListOverflow let-hidden let-count="count">
+        <span xuiBreadcrumbItem class="whitespace-nowrap">
+          @if (collapseFrom() === 'end') {
+            <span xuiBreadcrumbSeparator></span>
+          }
+          <ng-container
+            *ngTemplateOutlet="overflowTemplate() ?? defaultOverflow; context: { $implicit: hidden, count: count }"
+          />
+        </span>
+      </ng-template>
+    </xui-overflow-list>
+
+    <ng-template #defaultOverflow>
+      <xui-breadcrumb-ellipsis />
+    </ng-template>
+
+    <ng-template #defaultCurrent let-item>
+      <span xuiBreadcrumbPage class="inline-flex items-center gap-1.5">
+        <ng-container *ngTemplateOutlet="crumbBody; context: { $implicit: item }" />
+      </span>
+    </ng-template>
+
+    <ng-template #defaultCrumb let-item>
+      @if (item.link) {
+        <a
+          xuiBreadcrumbLink
+          class="inline-flex items-center gap-1.5"
+          [routerLink]="item.link"
+          [attr.target]="item.target"
+          [disabled]="item.disabled"
+          (click)="itemClick.emit(item)"
+        >
+          <ng-container *ngTemplateOutlet="crumbBody; context: { $implicit: item }" />
+        </a>
+      } @else if (item.href) {
+        <a
+          xuiBreadcrumbLink
+          class="inline-flex items-center gap-1.5"
+          [href]="item.href"
+          [attr.target]="item.target"
+          [disabled]="item.disabled"
+          (click)="itemClick.emit(item)"
+        >
+          <ng-container *ngTemplateOutlet="crumbBody; context: { $implicit: item }" />
+        </a>
+      } @else {
+        <span xuiBreadcrumbLink class="inline-flex items-center gap-1.5" [disabled]="item.disabled">
+          <ng-container *ngTemplateOutlet="crumbBody; context: { $implicit: item }" />
+        </span>
+      }
+    </ng-template>
+
+    <ng-template #crumbBody let-item>
+      @if (item.icon) {
+        <ng-icon xui size="sm" class="shrink-0" [name]="item.icon" />
+      }
+      @if (item.text) {
+        <span class="truncate">{{ item.text }}</span>
+      }
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { 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", "browserUrl", "routerLink"] }, { kind: "component", type: XuiBreadcrumbEllipsis, selector: "xui-breadcrumb-ellipsis", inputs: ["class"] }, { kind: "directive", type: XuiBreadcrumbItem, selector: "[xuiBreadcrumbItem]", inputs: ["class", "active"] }, { kind: "directive", type: XuiBreadcrumbLink, selector: "[xuiBreadcrumbLink]", inputs: ["class", "disabled"] }, { kind: "directive", type: XuiBreadcrumbPage, selector: "[xuiBreadcrumbPage]", inputs: ["class"] }, { kind: "component", type: XuiBreadcrumbSeparator, selector: "[xuiBreadcrumbSeparator]", inputs: ["class"] }, { kind: "directive", type: XuiIcon, selector: "ng-icon[xui]", inputs: ["class", "size", "color", "title"], exportAs: ["xuiIcon"] }, { kind: "component", type: XuiOverflowList, selector: "xui-overflow-list", inputs: ["class", "items", "collapseFrom", "minVisibleItems", "alwaysRenderOverflow", "itemRole"], outputs: ["overflow"] }, { kind: "directive", type: XuiOverflowListItem, selector: "ng-template[xuiOverflowListItem]" }, { kind: "directive", type: XuiOverflowListOverflow, selector: "ng-template[xuiOverflowListOverflow]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiBreadcrumbs, decorators: [{
+            type: Component,
             args: [{
-                    selector: '[xuiBreadcrumb]',
+                    selector: 'xui-breadcrumbs',
+                    imports: [
+                        NgIcon,
+                        NgTemplateOutlet,
+                        RouterLink,
+                        XuiBreadcrumbEllipsis,
+                        XuiBreadcrumbItem,
+                        XuiBreadcrumbLink,
+                        XuiBreadcrumbPage,
+                        XuiBreadcrumbSeparator,
+                        XuiIcon,
+                        XuiOverflowList,
+                        XuiOverflowListItem,
+                        XuiOverflowListOverflow
+                    ],
+                    hostDirectives: [{ directive: XuiBreadcrumb, inputs: ['aria-label'] }],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <xui-overflow-list
+      role="list"
+      itemRole="listitem"
+      class="text-foreground-muted gap-1.5 text-sm"
+      [items]="items()"
+      [collapseFrom]="collapseFrom()"
+      [minVisibleItems]="minVisibleItems()"
+      (overflow)="overflow.emit($event)"
+    >
+      <ng-template xuiOverflowListItem let-item let-index="index">
+        <span xuiBreadcrumbItem class="whitespace-nowrap">
+          @if (index > 0) {
+            <span xuiBreadcrumbSeparator></span>
+          }
+          <ng-container
+            *ngTemplateOutlet="
+              isCurrent(index)
+                ? (currentTemplate() ?? itemTemplate() ?? defaultCurrent)
+                : (itemTemplate() ?? defaultCrumb);
+              context: { $implicit: item, index: index, current: isCurrent(index) }
+            "
+          />
+        </span>
+      </ng-template>
+
+      <ng-template xuiOverflowListOverflow let-hidden let-count="count">
+        <span xuiBreadcrumbItem class="whitespace-nowrap">
+          @if (collapseFrom() === 'end') {
+            <span xuiBreadcrumbSeparator></span>
+          }
+          <ng-container
+            *ngTemplateOutlet="overflowTemplate() ?? defaultOverflow; context: { $implicit: hidden, count: count }"
+          />
+        </span>
+      </ng-template>
+    </xui-overflow-list>
+
+    <ng-template #defaultOverflow>
+      <xui-breadcrumb-ellipsis />
+    </ng-template>
+
+    <ng-template #defaultCurrent let-item>
+      <span xuiBreadcrumbPage class="inline-flex items-center gap-1.5">
+        <ng-container *ngTemplateOutlet="crumbBody; context: { $implicit: item }" />
+      </span>
+    </ng-template>
+
+    <ng-template #defaultCrumb let-item>
+      @if (item.link) {
+        <a
+          xuiBreadcrumbLink
+          class="inline-flex items-center gap-1.5"
+          [routerLink]="item.link"
+          [attr.target]="item.target"
+          [disabled]="item.disabled"
+          (click)="itemClick.emit(item)"
+        >
+          <ng-container *ngTemplateOutlet="crumbBody; context: { $implicit: item }" />
+        </a>
+      } @else if (item.href) {
+        <a
+          xuiBreadcrumbLink
+          class="inline-flex items-center gap-1.5"
+          [href]="item.href"
+          [attr.target]="item.target"
+          [disabled]="item.disabled"
+          (click)="itemClick.emit(item)"
+        >
+          <ng-container *ngTemplateOutlet="crumbBody; context: { $implicit: item }" />
+        </a>
+      } @else {
+        <span xuiBreadcrumbLink class="inline-flex items-center gap-1.5" [disabled]="item.disabled">
+          <ng-container *ngTemplateOutlet="crumbBody; context: { $implicit: item }" />
+        </span>
+      }
+    </ng-template>
+
+    <ng-template #crumbBody let-item>
+      @if (item.icon) {
+        <ng-icon xui size="sm" class="shrink-0" [name]="item.icon" />
+      }
+      @if (item.text) {
+        <span class="truncate">{{ item.text }}</span>
+      }
+    </ng-template>
+  `,
                     host: {
-                        role: 'navigation',
-                        '[class]': 'computedClass()',
-                        '[attr.aria-label]': 'ariaLabel()'
+                        '[class]': 'computedClass()'
                     }
                 }]
-        }] });
+        }], propDecorators: { itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => XuiBreadcrumbsItem), { ...{ read: TemplateRef }, isSignal: true }] }], currentTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => XuiBreadcrumbsCurrent), { ...{ read: TemplateRef }, isSignal: true }] }], overflowTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => XuiBreadcrumbsOverflow), { ...{ read: TemplateRef }, isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], collapseFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseFrom", required: false }] }], minVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "minVisibleItems", required: false }] }], overflow: [{ type: i0.Output, args: ["overflow"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
 
 const XuiBreadcrumbImports = [
-    XuiBreadcrumbDirective,
-    XuiBreadcrumbEllipsisComponent,
-    XuiBreadcrumbItemDirective,
-    XuiBreadcrumbLinkDirective,
-    XuiBreadcrumbListDirective,
-    XuiBreadcrumbPageDirective,
-    XuiBreadcrumbSeparatorComponent
+    XuiBreadcrumb,
+    XuiBreadcrumbEllipsis,
+    XuiBreadcrumbItem,
+    XuiBreadcrumbLink,
+    XuiBreadcrumbList,
+    XuiBreadcrumbPage,
+    XuiBreadcrumbSeparator,
+    XuiBreadcrumbs,
+    XuiBreadcrumbsCurrent,
+    XuiBreadcrumbsItem,
+    XuiBreadcrumbsOverflow
 ];
-class XuiBreadcrumbModule {
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: XuiBreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    /** @nocollapse */ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.3", ngImport: i0, type: XuiBreadcrumbModule, imports: [XuiBreadcrumbDirective,
-            XuiBreadcrumbEllipsisComponent,
-            XuiBreadcrumbItemDirective,
-            XuiBreadcrumbLinkDirective,
-            XuiBreadcrumbListDirective,
-            XuiBreadcrumbPageDirective,
-            XuiBreadcrumbSeparatorComponent], exports: [XuiBreadcrumbDirective,
-            XuiBreadcrumbEllipsisComponent,
-            XuiBreadcrumbItemDirective,
-            XuiBreadcrumbLinkDirective,
-            XuiBreadcrumbListDirective,
-            XuiBreadcrumbPageDirective,
-            XuiBreadcrumbSeparatorComponent] });
-    /** @nocollapse */ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: XuiBreadcrumbModule, imports: [XuiBreadcrumbEllipsisComponent,
-            XuiBreadcrumbSeparatorComponent] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: XuiBreadcrumbModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [...XuiBreadcrumbImports],
-                    exports: [...XuiBreadcrumbImports]
-                }]
-        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { XuiBreadcrumbDirective, XuiBreadcrumbEllipsisComponent, XuiBreadcrumbImports, XuiBreadcrumbItemDirective, XuiBreadcrumbLinkDirective, XuiBreadcrumbListDirective, XuiBreadcrumbModule, XuiBreadcrumbPageDirective, XuiBreadcrumbSeparatorComponent };
+export { XuiBreadcrumb, XuiBreadcrumbEllipsis, XuiBreadcrumbImports, XuiBreadcrumbItem, XuiBreadcrumbLink, XuiBreadcrumbList, XuiBreadcrumbPage, XuiBreadcrumbSeparator, XuiBreadcrumbs, XuiBreadcrumbsCurrent, XuiBreadcrumbsItem, XuiBreadcrumbsOverflow };
 //# sourceMappingURL=xui-breadcrumb.mjs.map