@styloviz/breadcrumb 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 StyloViz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,64 @@
+# @styloviz/breadcrumb
+
+> 4 visual variants, 5 separator styles, a sibling-page dropdown switcher, badges, disabled crumbs, collapsible middle crumbs, a loading skeleton, and full keyboard support.
+
+Part of the **StyloViz UI Kit** — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, `OnPush`, strongly typed, dark-mode ready.
+
+## Installation
+
+```bash
+npm install @styloviz/core @styloviz/breadcrumb
+```
+
+Requires `@angular/core` and `@angular/common` >= 21. `@styloviz/core` is a peer dependency shared by every component. Prefer everything at once? `@styloviz/all` installs the whole free tier in one command.
+
+## Usage
+
+```ts
+import { SvBreadcrumbComponent } from '@styloviz/breadcrumb';
+
+@Component({
+  standalone: true,
+  imports: [SvBreadcrumbComponent],
+  template: `
+    <sv-breadcrumb [items]="crumbs" />
+  `,
+})
+export class DemoComponent {}
+```
+
+## Inputs
+
+| Input | Type | Default | Description |
+| --- | --- | --- | --- |
+| `items` | `BreadcrumbItem[]` | `[]` | Ordered list of crumbs. The last item is treated as the current page. |
+| `separator` | `BreadcrumbSeparator` | `'chevron'` | Separator style between crumbs. Use `custom` with `customSeparatorPath`. |
+| `customSeparatorPath` | `string` | `''` | SVG `<path d="...">` used when `separator="custom"`. |
+| `variant` | `BreadcrumbVariant` | `'plain'` | Visual style of the crumb trail. |
+| `size` | `BreadcrumbSize` | `'md'` | Size of the breadcrumb text and icons. |
+| `maxVisible` | `number` | `0` | Maximum number of crumbs to show before collapsing the middle ones. Set to `0` to always show all. |
+| `expandable` | `boolean` | `true` | Allow the collapsed ellipsis to be clicked to reveal the hidden middle crumbs. When `false` the ellipsis is purely decorative. |
+| `showHomeIcon` | `boolean` | `false` | Prepends a home icon to the first crumb when it has no explicit `iconPath`. |
+| `truncateLabels` | `boolean` | `false` | Clips long labels to a fixed width with an ellipsis and a title tooltip. |
+| `collapseOnMobile` | `boolean` | `false` | Hides middle crumbs below the `sm` breakpoint (pure CSS) to keep long trails compact on phones. |
+| `loading` | `boolean` | `false` | Shows an animated skeleton in place of the crumb trail while data is loading. |
+| `skeletonCount` | `number` | `3` | Number of skeleton segments rendered when `loading` is `true`. |
+| `ariaLabel` | `string` | `'Breadcrumb'` | Accessible label for the breadcrumb navigation landmark. |
+| `customClass` | `string` | `''` | Additional CSS classes on the root `<nav>` element. |
+
+## Outputs
+
+| Output | Type | Description |
+| --- | --- | --- |
+| `crumbClick` | `BreadcrumbItem` | Emitted when a crumb with a `routerLink` is clicked. |
+| `expand` | `void` | Emitted when the collapsed ellipsis is expanded to reveal hidden crumbs. |
+| `collapse` | `void` | Emitted when an expanded trail is collapsed back via the toggle. |
+| `menuItemSelect` | `BreadcrumbMenuItem` | Emitted when a sibling page is chosen from a crumb's dropdown switcher. |
+
+## Documentation
+
+Full API reference and live demos: https://styloviz.dev/docs/breadcrumb
+
+## License
+
+MIT

package/fesm2022/styloviz-breadcrumb.mjs

@@ -0,0 +1,466 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, ApplicationRef, input, output, signal, viewChildren, computed, TemplateRef, HostListener, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { RouterLink } from '@angular/router';
+
+// ─── Separator SVG paths ──────────────────────────────────────────────────────
+const SEPARATOR_PATHS = {
+    slash: null, // rendered as a text character
+    chevron: 'M9 18l6-6-6-6',
+    dot: null, // rendered as a text character
+    arrow: 'M5 12h14M12 5l7 7-7 7',
+};
+/** Default "home" glyph used by `showHomeIcon` on the first crumb. */
+const HOME_ICON_PATH = 'M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 ' +
+    '1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 ' +
+    '1.125-.504 1.125-1.125V9.75M8.25 21h8.25';
+/** Chevron-down glyph used by the sibling-menu trigger button. */
+const MENU_CARET_PATH = 'M6 9l6 6 6-6';
+/** Fixed sibling-menu panel width in px — matches the panel's CSS min-width. */
+const MENU_PANEL_W = 192;
+/** Approximate max panel height (px) — used only for the vertical flip decision. */
+const MENU_PANEL_H = 240;
+/** Gap between trigger edge and panel (px). */
+const GAP = 4;
+let uidCounter = 0;
+// ─── Component ───────────────────────────────────────────────────────────────
+/**
+ * Breadcrumb — A navigation trail showing the user's location within the app.
+ *
+ * Features:
+ * - Accepts flat `items` array — no routing knowledge required
+ * - 5 separator styles: slash · chevron · dot · arrow · custom (bring your own SVG path)
+ * - 4 visual variants: plain · contained · pills · underline
+ * - Optional icon before each crumb label, plus an automatic home icon on the first crumb
+ * - Per-crumb badge, disabled state, and a sibling-page dropdown switcher (ARIA menu-button)
+ * - Sibling-menu panel is rendered in a true `document.body` portal so it always escapes
+ *   ancestor `overflow:hidden`/scroll/transform containment (see dropdown-instruction.md)
+ * - Automatic "current page" ARIA on the last crumb
+ * - Collapsible middle crumbs when more than `maxVisible` items — the ellipsis is a real
+ *   open/close toggle (`toggleCollapse`), not a one-way reveal, with `expand`/`collapse` outputs
+ * - Optional label truncation with a tooltip, and CSS-only mobile collapse
+ * - Loading skeleton state for async breadcrumb sources
+ * - 3 sizes: sm · md · lg
+ * - Full dark-mode support
+ * - Accessible: `<nav aria-label>`, `<ol>`, `aria-current="page"`, `aria-disabled`,
+ *   full keyboard support (Tab, Enter, Escape, ↑ ↓ Home End inside the sibling menu)
+ */
+class SvBreadcrumbComponent {
+    host = inject((ElementRef));
+    appRef = inject(ApplicationRef);
+    uid = `sv-breadcrumb-${uidCounter++}`;
+    // ── Inputs ────────────────────────────────────────────────────────────────
+    /** Ordered list of crumbs. The last item is treated as the current page. */
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Separator style between crumbs. Use `custom` with `customSeparatorPath`. @default 'chevron' */
+    separator = input('chevron', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    /** SVG `<path d="...">` used when `separator="custom"`. */
+    customSeparatorPath = input('', ...(ngDevMode ? [{ debugName: "customSeparatorPath" }] : /* istanbul ignore next */ []));
+    /** Visual style of the crumb trail. @default 'plain' */
+    variant = input('plain', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Size of the breadcrumb text and icons. @default 'md' */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum number of crumbs to show before collapsing the middle ones.
+     * Set to `0` to always show all. @default 0
+     */
+    maxVisible = input(0, ...(ngDevMode ? [{ debugName: "maxVisible" }] : /* istanbul ignore next */ []));
+    /**
+     * Allow the collapsed ellipsis to be clicked to reveal the hidden middle
+     * crumbs. When `false` the ellipsis is purely decorative. @default true
+     */
+    expandable = input(true, ...(ngDevMode ? [{ debugName: "expandable" }] : /* istanbul ignore next */ []));
+    /** Prepends a home icon to the first crumb when it has no explicit `iconPath`. @default false */
+    showHomeIcon = input(false, ...(ngDevMode ? [{ debugName: "showHomeIcon" }] : /* istanbul ignore next */ []));
+    /** Clips long labels to a fixed width with an ellipsis and a title tooltip. @default false */
+    truncateLabels = input(false, ...(ngDevMode ? [{ debugName: "truncateLabels" }] : /* istanbul ignore next */ []));
+    /** Hides middle crumbs below the `sm` breakpoint (pure CSS) to keep long trails compact on phones. @default false */
+    collapseOnMobile = input(false, ...(ngDevMode ? [{ debugName: "collapseOnMobile" }] : /* istanbul ignore next */ []));
+    /** Shows an animated skeleton in place of the crumb trail while data is loading. @default false */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** Number of skeleton segments rendered when `loading` is `true`. @default 3 */
+    skeletonCount = input(3, ...(ngDevMode ? [{ debugName: "skeletonCount" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the breadcrumb navigation landmark. @default 'Breadcrumb' */
+    ariaLabel = input('Breadcrumb', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Additional CSS classes on the root `<nav>` element. */
+    customClass = input('', ...(ngDevMode ? [{ debugName: "customClass" }] : /* istanbul ignore next */ []));
+    // ── Outputs ───────────────────────────────────────────────────────────────
+    /** Emitted when a crumb with a `routerLink` is clicked. */
+    crumbClick = output();
+    /** Emitted when the collapsed ellipsis is expanded to reveal hidden crumbs. */
+    expand = output();
+    /** Emitted when an expanded trail is collapsed back via the toggle. */
+    collapse = output();
+    /** Emitted when a sibling page is chosen from a crumb's dropdown switcher. */
+    menuItemSelect = output();
+    // ── Internal state ──────────────────────────────────────────────────────────
+    /** Whether the user has expanded the collapsed middle crumbs. */
+    isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+    /** Index (within `visibleItems`) of the crumb whose sibling menu is open, or `null`. */
+    openMenuIndex = signal(null, ...(ngDevMode ? [{ debugName: "openMenuIndex" }] : /* istanbul ignore next */ []));
+    /** Roving-tabindex focus position inside the currently open sibling menu. */
+    activeMenuItemIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeMenuItemIndex" }] : /* istanbul ignore next */ []));
+    /** Anchor to restore focus to when the sibling menu closes. */
+    triggerEl = null;
+    menuItemRefs = viewChildren('menuItemEl', ...(ngDevMode ? [{ debugName: "menuItemRefs" }] : /* istanbul ignore next */ []));
+    /** Whether the open sibling menu should render above (vs. below) its trigger. */
+    menuAbove = signal(false, ...(ngDevMode ? [{ debugName: "menuAbove" }] : /* istanbul ignore next */ []));
+    /**
+     * Inline style object applied to the portaled menu panel. Uses
+     * `position: fixed` with exact viewport coordinates so the panel escapes
+     * all parent `overflow`/transform containment (dropdown-instruction.md §1–2).
+     */
+    menuPanelStyle = signal({}, ...(ngDevMode ? [{ debugName: "menuPanelStyle" }] : /* istanbul ignore next */ []));
+    // ── Body-portal state (dropdown-instruction.md §1) ────────────────────────
+    portalEl = null;
+    portalView = null;
+    /** The ng-template holding the sibling-menu panel markup. */
+    menuPanelTpl;
+    /**
+     * Capture-phase scroll listener — fires for ANY scrollable ancestor, not
+     * just the window, so the panel tracks its trigger through nested
+     * scroll containers (dropdown-instruction.md §6).
+     */
+    _rafId = null;
+    _scrollHandler = () => {
+        if (this.openMenuIndex() === null)
+            return;
+        if (this._rafId !== null)
+            return;
+        this._rafId = requestAnimationFrame(() => {
+            this._rafId = null;
+            if (this.openMenuIndex() !== null) {
+                this._calcMenuPos();
+                this.portalView?.detectChanges();
+            }
+        });
+    };
+    // ── Computed ──────────────────────────────────────────────────────────────
+    /** Whether `maxVisible` would collapse this trail at all, regardless of expanded state. */
+    isCollapsible = computed(() => {
+        const max = this.maxVisible();
+        return max > 0 && this.items().length > max;
+    }, ...(ngDevMode ? [{ debugName: "isCollapsible" }] : /* istanbul ignore next */ []));
+    /** Number of crumbs currently hidden behind the ellipsis (0 when expanded or not collapsible). */
+    hiddenCount = computed(() => {
+        if (!this.isCollapsible() || this.isExpanded())
+            return 0;
+        return this.items().length - 2; // all but first + last
+    }, ...(ngDevMode ? [{ debugName: "hiddenCount" }] : /* istanbul ignore next */ []));
+    /** How many crumbs the toggle would hide/reveal, regardless of its current state. */
+    toggleCount = computed(() => this.isCollapsible() ? this.items().length - 2 : 0, ...(ngDevMode ? [{ debugName: "toggleCount" }] : /* istanbul ignore next */ []));
+    /**
+     * Crumbs actually rendered. When collapsible, a `'__ellipsis__'` toggle
+     * token always sits right after the first crumb — collapsed it hides the
+     * middle crumbs, expanded it re-collapses them, so the trail can be
+     * toggled open and closed rather than only ever revealed once.
+     */
+    visibleItems = computed(() => {
+        const all = this.items();
+        if (!this.isCollapsible())
+            return all;
+        const first = all[0];
+        const last = all[all.length - 1];
+        if (!this.isExpanded())
+            return [first, '__ellipsis__', last];
+        return [first, '__ellipsis__', ...all.slice(1, -1), last];
+    }, ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
+    /** Whether there are collapsed crumbs. */
+    hasEllipsis = computed(() => this.visibleItems().includes('__ellipsis__'), ...(ngDevMode ? [{ debugName: "hasEllipsis" }] : /* istanbul ignore next */ []));
+    /** SVG path for the current separator (null means text character). */
+    separatorPath = computed(() => {
+        const sep = this.separator();
+        if (sep === 'custom')
+            return this.customSeparatorPath() || SEPARATOR_PATHS.chevron;
+        return SEPARATOR_PATHS[sep];
+    }, ...(ngDevMode ? [{ debugName: "separatorPath" }] : /* istanbul ignore next */ []));
+    /** Text character used as separator (only for slash / dot). */
+    separatorChar = computed(() => {
+        switch (this.separator()) {
+            case 'slash': return '/';
+            case 'dot': return '·';
+            default: return '';
+        }
+    }, ...(ngDevMode ? [{ debugName: "separatorChar" }] : /* istanbul ignore next */ []));
+    /** Whether the separator is rendered as SVG (true) or a text character (false). */
+    isSvgSeparator = computed(() => this.separatorPath() !== null, ...(ngDevMode ? [{ debugName: "isSvgSeparator" }] : /* istanbul ignore next */ []));
+    /** Numbered array driving the loading skeleton's segment count. */
+    skeletonItems = computed(() => Array.from({ length: Math.max(1, this.skeletonCount()) }, (_, i) => i), ...(ngDevMode ? [{ debugName: "skeletonItems" }] : /* istanbul ignore next */ []));
+    /** The crumb whose sibling menu is currently open, or `null`. Drives the portaled panel. */
+    openMenuItem = computed(() => {
+        const index = this.openMenuIndex();
+        if (index === null)
+            return null;
+        const item = this.visibleItems()[index];
+        return item && this.isBreadcrumbItem(item) ? item : null;
+    }, ...(ngDevMode ? [{ debugName: "openMenuItem" }] : /* istanbul ignore next */ []));
+    // ── Size maps ─────────────────────────────────────────────────────────────
+    textClass = computed(() => ({
+        sm: 'text-xs',
+        md: 'text-sm',
+        lg: 'text-base',
+    })[this.size()], ...(ngDevMode ? [{ debugName: "textClass" }] : /* istanbul ignore next */ []));
+    iconClass = computed(() => ({
+        sm: 'h-3 w-3',
+        md: 'h-3.5 w-3.5',
+        lg: 'h-4 w-4',
+    })[this.size()], ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
+    separatorClass = computed(() => ({
+        sm: 'h-3 w-3',
+        md: 'h-3.5 w-3.5',
+        lg: 'h-4 w-4',
+    })[this.size()], ...(ngDevMode ? [{ debugName: "separatorClass" }] : /* istanbul ignore next */ []));
+    // ── Variant class maps ────────────────────────────────────────────────────
+    /** Extra classes applied to the root `<nav>` for container-style variants. */
+    navWrapperClass = computed(() => this.variant() === 'contained'
+        ? 'inline-flex items-center rounded-lg border border-gray-200/80 bg-gray-50/70 px-3 py-1.5 dark:border-gray-800 dark:bg-gray-800/40'
+        : '', ...(ngDevMode ? [{ debugName: "navWrapperClass" }] : /* istanbul ignore next */ []));
+    /** Classes for a clickable (routerLink) crumb. */
+    linkClasses = computed(() => {
+        const base = 'flex items-center gap-1 text-gray-500 transition-colors hover:text-gray-700 ' +
+            'dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none focus-visible:rounded ' +
+            'focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1';
+        switch (this.variant()) {
+            case 'pills': return `${base} rounded-full px-2.5 py-1 hover:bg-gray-100 dark:hover:bg-gray-800/70`;
+            case 'underline': return `${base} border-b-2 border-transparent pb-0.5 hover:border-gray-300 dark:hover:border-gray-600`;
+            default: return base;
+        }
+    }, ...(ngDevMode ? [{ debugName: "linkClasses" }] : /* istanbul ignore next */ []));
+    /** Classes for the current-page (last) crumb. */
+    currentClasses = computed(() => {
+        const base = 'flex items-center gap-1 font-medium text-gray-900 dark:text-white';
+        switch (this.variant()) {
+            case 'pills': return `${base} rounded-full bg-primary-50 px-2.5 py-1 text-primary-700 dark:bg-primary-500/10 dark:text-primary-400`;
+            case 'underline': return `${base} border-b-2 border-primary-600 pb-0.5 text-primary-700 dark:border-primary-400 dark:text-primary-400`;
+            default: return base;
+        }
+    }, ...(ngDevMode ? [{ debugName: "currentClasses" }] : /* istanbul ignore next */ []));
+    /** Classes for a non-linked middle crumb (no routerLink, not disabled). */
+    middleClasses = computed(() => {
+        const base = 'flex items-center gap-1 text-gray-500 dark:text-gray-400';
+        return this.variant() === 'pills' ? `${base} rounded-full px-2.5 py-1` : base;
+    }, ...(ngDevMode ? [{ debugName: "middleClasses" }] : /* istanbul ignore next */ []));
+    /** Classes for a disabled crumb. */
+    disabledClasses = computed(() => {
+        const base = 'flex items-center gap-1 cursor-not-allowed text-gray-300 opacity-60 dark:text-gray-600';
+        return this.variant() === 'pills' ? `${base} rounded-full px-2.5 py-1` : base;
+    }, ...(ngDevMode ? [{ debugName: "disabledClasses" }] : /* istanbul ignore next */ []));
+    // ── Helpers ───────────────────────────────────────────────────────────────
+    isLastItem(item) {
+        const all = this.visibleItems();
+        return all[all.length - 1] === item;
+    }
+    isFirstItem(item) {
+        return this.visibleItems()[0] === item;
+    }
+    isBreadcrumbItem(item) {
+        return item !== '__ellipsis__';
+    }
+    /** True for crumbs strictly between the first and last — used to CSS-hide on mobile. */
+    isMiddleItem(item) {
+        if (!this.isBreadcrumbItem(item))
+            return false;
+        return !this.isFirstItem(item) && !this.isLastItem(item);
+    }
+    /** Resolves the icon shown before a crumb's label, falling back to the home icon. */
+    iconPathFor(item) {
+        if (item.iconPath)
+            return item.iconPath;
+        if (this.showHomeIcon() && this.isFirstItem(item))
+            return HOME_ICON_PATH;
+        return undefined;
+    }
+    onCrumbClick(item) {
+        if (item.disabled)
+            return;
+        if (item.routerLink) {
+            this.crumbClick.emit(item);
+        }
+    }
+    /**
+     * Toggle the collapsed middle crumbs open or closed. Unlike a one-way
+     * "reveal", calling this again while expanded collapses the trail back —
+     * the ellipsis token stays clickable in both states (see `visibleItems`).
+     */
+    toggleCollapse() {
+        if (!this.expandable() || !this.isCollapsible())
+            return;
+        const next = !this.isExpanded();
+        this.isExpanded.set(next);
+        if (next)
+            this.expand.emit();
+        else
+            this.collapse.emit();
+    }
+    // ── Lifecycle ─────────────────────────────────────────────────────────────
+    ngOnInit() {
+        // Capture phase catches scroll from any scrollable ancestor, not just window
+        // (dropdown-instruction.md §6).
+        window.addEventListener('scroll', this._scrollHandler, { passive: true, capture: true });
+    }
+    ngOnDestroy() {
+        window.removeEventListener('scroll', this._scrollHandler, true);
+        if (this._rafId !== null)
+            cancelAnimationFrame(this._rafId);
+        this._destroyMenuPortal();
+    }
+    // ── Sibling dropdown menu (ARIA menu-button + body-portal pattern) ───────
+    /** Stable DOM id for the (single, reused) sibling-menu panel. */
+    menuPanelId = `${this.uid}-menu`;
+    toggleMenu(index, event) {
+        event.stopPropagation();
+        if (this.openMenuIndex() === index) {
+            this.closeMenu();
+            return;
+        }
+        if (this.openMenuIndex() !== null)
+            this._destroyMenuPortal();
+        this.triggerEl = event.currentTarget;
+        this._calcMenuPos();
+        // Mount the panel into document.body via a true portal so it always
+        // escapes ancestor overflow/transform clipping (dropdown-instruction.md §1).
+        this.portalEl = document.createElement('div');
+        this.portalEl.className = 'sv-breadcrumb-menu-portal';
+        document.body.appendChild(this.portalEl);
+        this.portalView = this.menuPanelTpl.createEmbeddedView({});
+        this.appRef.attachView(this.portalView);
+        this.portalView.rootNodes.forEach((n) => this.portalEl.appendChild(n));
+        this.openMenuIndex.set(index);
+        this.activeMenuItemIndex.set(0);
+        this.portalView.detectChanges();
+        queueMicrotask(() => this.menuItemRefs()[0]?.nativeElement.focus());
+    }
+    closeMenu() {
+        if (this.openMenuIndex() === null)
+            return;
+        this._destroyMenuPortal();
+        this.openMenuIndex.set(null);
+        this.triggerEl?.focus();
+        this.triggerEl = null;
+    }
+    selectMenuItem(item) {
+        this.menuItemSelect.emit(item);
+        this.closeMenu();
+    }
+    onMenuKeydown(event) {
+        const refs = this.menuItemRefs();
+        if (!refs.length)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.activeMenuItemIndex.update(i => Math.min(i + 1, refs.length - 1));
+                refs[this.activeMenuItemIndex()].nativeElement.focus();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.activeMenuItemIndex.update(i => Math.max(i - 1, 0));
+                refs[this.activeMenuItemIndex()].nativeElement.focus();
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.activeMenuItemIndex.set(0);
+                refs[0].nativeElement.focus();
+                break;
+            case 'End':
+                event.preventDefault();
+                this.activeMenuItemIndex.set(refs.length - 1);
+                refs[refs.length - 1].nativeElement.focus();
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.closeMenu();
+                break;
+            case 'Tab':
+                this.closeMenu();
+                break;
+        }
+    }
+    /** Position the portaled panel against `triggerEl`, flipping to fit the viewport. */
+    _calcMenuPos() {
+        const trigger = this.triggerEl ?? this.host.nativeElement;
+        const rect = trigger.getBoundingClientRect();
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const spaceBelow = vh - rect.bottom;
+        const spaceAbove = rect.top;
+        const above = spaceBelow < MENU_PANEL_H && spaceAbove > spaceBelow;
+        const right = rect.left + MENU_PANEL_W > vw;
+        this.menuAbove.set(above);
+        const style = {
+            position: 'fixed',
+            zIndex: '9999',
+            minWidth: `${MENU_PANEL_W}px`,
+        };
+        style[above ? 'bottom' : 'top'] = above
+            ? `${vh - rect.top + GAP}px`
+            : `${rect.bottom + GAP}px`;
+        style[right ? 'right' : 'left'] = right
+            ? `${vw - rect.right}px`
+            : `${rect.left}px`;
+        this.menuPanelStyle.set(style);
+    }
+    _destroyMenuPortal() {
+        if (this.portalView) {
+            this.appRef.detachView(this.portalView);
+            this.portalView.destroy();
+            this.portalView = null;
+        }
+        this.portalEl?.remove();
+        this.portalEl = null;
+    }
+    // ── Global listeners ──────────────────────────────────────────────────────
+    /**
+     * Click-outside close. The panel lives in `document.body`, not inside this
+     * component's DOM subtree, so both the host AND the portal element must be
+     * checked (dropdown-instruction.md §7).
+     */
+    onDocumentMousedown(event) {
+        if (this.openMenuIndex() === null)
+            return;
+        const target = event.target;
+        if (this.host.nativeElement.contains(target))
+            return;
+        if (this.portalEl?.contains(target))
+            return;
+        this.closeMenu();
+    }
+    /** Viewport resize invalidates the computed coordinates — close rather than reposition
+     *  with stale numbers (dropdown-instruction.md §8). */
+    onWindowResize() {
+        if (this.openMenuIndex() !== null)
+            this.closeMenu();
+    }
+    /** Scoped to the host so it only fires while focus/interaction is on the trigger;
+     *  focus inside the portaled panel is handled by `onMenuKeydown` (dropdown-instruction.md §9). */
+    onHostEscape() {
+        if (this.openMenuIndex() !== null)
+            this.closeMenu();
+    }
+    menuCaretPath = MENU_CARET_PATH;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SvBreadcrumbComponent, isStandalone: true, selector: "sv-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, customSeparatorPath: { classPropertyName: "customSeparatorPath", publicName: "customSeparatorPath", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxVisible: { classPropertyName: "maxVisible", publicName: "maxVisible", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, showHomeIcon: { classPropertyName: "showHomeIcon", publicName: "showHomeIcon", isSignal: true, isRequired: false, transformFunction: null }, truncateLabels: { classPropertyName: "truncateLabels", publicName: "truncateLabels", isSignal: true, isRequired: false, transformFunction: null }, collapseOnMobile: { classPropertyName: "collapseOnMobile", publicName: "collapseOnMobile", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, skeletonCount: { classPropertyName: "skeletonCount", publicName: "skeletonCount", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { crumbClick: "crumbClick", expand: "expand", collapse: "collapse", menuItemSelect: "menuItemSelect" }, host: { listeners: { "document:mousedown": "onDocumentMousedown($event)", "window:resize": "onWindowResize()", "keydown.escape": "onHostEscape()" } }, viewQueries: [{ propertyName: "menuItemRefs", predicate: ["menuItemEl"], descendants: true, isSignal: true }, { propertyName: "menuPanelTpl", first: true, predicate: ["menuPanelTpl"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<!-- \u2500\u2500 Reusable fragments \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n\n<ng-template #iconTpl let-item>\n  @if (iconPathFor(item); as path) {\n    <svg\n      [ngClass]=\"iconClass()\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path [attr.d]=\"path\" />\n    </svg>\n  }\n</ng-template>\n\n<ng-template #badgeTpl let-item>\n  @if (item.badge !== undefined && item.badge !== null) {\n    <span\n      class=\"inline-flex items-center justify-center rounded-full bg-gray-200 px-1.5 py-0.5\n             text-[10px] font-semibold leading-none text-gray-700 dark:bg-gray-700 dark:text-gray-200\"\n    >\n      {{ item.badge }}\n    </span>\n  }\n</ng-template>\n\n<ng-template #labelTpl let-item>\n  @if (truncateLabels()) {\n    <span\n      class=\"inline-block max-w-[10rem] truncate align-bottom\"\n      [attr.title]=\"item.title ?? item.label\"\n    >{{ item.label }}</span>\n  } @else {\n    {{ item.label }}\n  }\n</ng-template>\n\n<ng-template #menuTriggerTpl let-item let-idx=\"idx\">\n  @if (item.menu?.length && !item.disabled) {\n    <button\n      type=\"button\"\n      data-trigger\n      class=\"flex items-center rounded p-0.5 text-gray-400 transition-colors hover:text-gray-700\n             focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500\n             focus-visible:ring-offset-1 dark:text-gray-500 dark:hover:text-gray-200\"\n      aria-haspopup=\"menu\"\n      [attr.aria-expanded]=\"openMenuIndex() === idx\"\n      [attr.aria-controls]=\"menuPanelId\"\n      [attr.aria-label]=\"'Switch page under ' + item.label\"\n      (click)=\"toggleMenu(idx, $event)\"\n    >\n      <svg class=\"h-3 w-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n           stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <path [attr.d]=\"menuCaretPath\" />\n      </svg>\n    </button>\n  }\n</ng-template>\n\n<!-- \u2500\u2500 Sibling-menu panel \u2014 rendered into document.body via a true body portal\n     (dropdown-instruction.md \u00A71) so it always escapes ancestor overflow/transform\n     clipping. Never rendered in place; only instantiated on open by toggleMenu(). \u2500\u2500 -->\n<ng-template #menuPanelTpl>\n  @if (openMenuItem(); as item) {\n    <div\n      [id]=\"menuPanelId\"\n      role=\"menu\"\n      [attr.aria-label]=\"item.label + ' pages'\"\n      class=\"overflow-hidden rounded-lg border border-gray-100 bg-white py-1 shadow-xl\n             dark:border-gray-800 dark:bg-gray-900\"\n      [style.position]=\"menuPanelStyle()['position']\"\n      [style.zIndex]=\"menuPanelStyle()['zIndex']\"\n      [style.minWidth]=\"menuPanelStyle()['minWidth']\"\n      [style.top]=\"menuPanelStyle()['top']\"\n      [style.bottom]=\"menuPanelStyle()['bottom']\"\n      [style.left]=\"menuPanelStyle()['left']\"\n      [style.right]=\"menuPanelStyle()['right']\"\n      (keydown)=\"onMenuKeydown($event)\"\n    >\n      @for (mi of item.menu; track mi.label) {\n        <a\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          #menuItemEl\n          [routerLink]=\"mi.routerLink\"\n          class=\"flex items-center gap-2 px-3 py-1.5 text-xs text-gray-600 transition-colors\n                 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus-visible:bg-gray-50\n                 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white dark:focus-visible:bg-gray-800\"\n          (click)=\"selectMenuItem(mi)\"\n        >\n          @if (mi.iconPath) {\n            <svg class=\"h-3.5 w-3.5 shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                 stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path [attr.d]=\"mi.iconPath\" />\n            </svg>\n          }\n          {{ mi.label }}\n        </a>\n      }\n    </div>\n  }\n</ng-template>\n\n<!-- \u2500\u2500 Root \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n\n<nav\n  [ngClass]=\"['flex', navWrapperClass(), customClass()]\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  @if (loading()) {\n    <div\n      class=\"flex items-center gap-2\"\n      [ngClass]=\"textClass()\"\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-busy=\"true\"\n    >\n      <span class=\"sr-only\">Loading breadcrumb\u2026</span>\n      @for (i of skeletonItems(); track i; let last = $last) {\n        <span\n          class=\"h-3.5 animate-pulse rounded bg-gray-200 dark:bg-gray-700\"\n          [style.width.px]=\"40 + (i % 3) * 24\"\n          aria-hidden=\"true\"\n        ></span>\n        @if (!last) {\n          <span class=\"select-none text-gray-300 dark:text-gray-600\" aria-hidden=\"true\">/</span>\n        }\n      }\n    </div>\n  } @else {\n    <ol\n      role=\"list\"\n      [ngClass]=\"['flex flex-wrap items-center gap-1', textClass()]\"\n    >\n      @for (item of visibleItems(); track $index; let last = $last, idx = $index) {\n\n        <li\n          [ngClass]=\"[\n            'flex items-center gap-1',\n            (collapseOnMobile() && isMiddleItem(item)) ? 'hidden sm:flex' : ''\n          ]\"\n        >\n\n          <!-- \u2500\u2500 Crumb \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n          @if (isBreadcrumbItem(item)) {\n\n            @if (item.disabled) {\n              <!-- Disabled crumb \u2014 non-interactive -->\n              <span [ngClass]=\"disabledClasses()\" aria-disabled=\"true\">\n                <ng-container *ngTemplateOutlet=\"iconTpl; context: { $implicit: item }\" />\n                <ng-container *ngTemplateOutlet=\"labelTpl; context: { $implicit: item }\" />\n                <ng-container *ngTemplateOutlet=\"badgeTpl; context: { $implicit: item }\" />\n              </span>\n\n            } @else if (last) {\n              <!-- Current page \u2014 plain text, aria-current -->\n              <span [ngClass]=\"currentClasses()\" aria-current=\"page\">\n                <ng-container *ngTemplateOutlet=\"iconTpl; context: { $implicit: item }\" />\n                <ng-container *ngTemplateOutlet=\"labelTpl; context: { $implicit: item }\" />\n                <ng-container *ngTemplateOutlet=\"badgeTpl; context: { $implicit: item }\" />\n              </span>\n              <ng-container *ngTemplateOutlet=\"menuTriggerTpl; context: { $implicit: item, idx: idx }\" />\n\n            } @else if (item.routerLink) {\n              <!-- Linked crumb -->\n              <a\n                [routerLink]=\"item.routerLink\"\n                [ngClass]=\"linkClasses()\"\n                (click)=\"onCrumbClick(item)\"\n              >\n                <ng-container *ngTemplateOutlet=\"iconTpl; context: { $implicit: item }\" />\n                <ng-container *ngTemplateOutlet=\"labelTpl; context: { $implicit: item }\" />\n                <ng-container *ngTemplateOutlet=\"badgeTpl; context: { $implicit: item }\" />\n              </a>\n              <ng-container *ngTemplateOutlet=\"menuTriggerTpl; context: { $implicit: item, idx: idx }\" />\n\n            } @else {\n              <!-- Non-linked crumb (middle, no routerLink) -->\n              <span [ngClass]=\"middleClasses()\">\n                <ng-container *ngTemplateOutlet=\"iconTpl; context: { $implicit: item }\" />\n                <ng-container *ngTemplateOutlet=\"labelTpl; context: { $implicit: item }\" />\n                <ng-container *ngTemplateOutlet=\"badgeTpl; context: { $implicit: item }\" />\n              </span>\n              <ng-container *ngTemplateOutlet=\"menuTriggerTpl; context: { $implicit: item, idx: idx }\" />\n            }\n\n          } @else {\n            <!-- Ellipsis / collapse toggle \u2014 a real open\u2194close button when expandable -->\n            @if (expandable()) {\n              <button\n                type=\"button\"\n                class=\"flex items-center gap-0.5 rounded px-1 py-0.5 text-gray-400 transition-colors\n                       hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200\n                       focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500\n                       focus-visible:ring-offset-1\"\n                [attr.aria-expanded]=\"isExpanded()\"\n                [attr.aria-label]=\"isExpanded()\n                  ? 'Hide ' + toggleCount() + ' page' + (toggleCount() === 1 ? '' : 's')\n                  : 'Show ' + toggleCount() + ' hidden page' + (toggleCount() === 1 ? '' : 's')\"\n                (click)=\"toggleCollapse()\"\n              >\n                @if (isExpanded()) {\n                  <svg class=\"h-3 w-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n                       stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5\" />\n                  </svg>\n                } @else {\n                  <span class=\"h-1 w-1 rounded-full bg-current\"></span>\n                  <span class=\"h-1 w-1 rounded-full bg-current\"></span>\n                  <span class=\"h-1 w-1 rounded-full bg-current\"></span>\n                }\n              </button>\n            } @else {\n              <span\n                class=\"flex items-center gap-0.5 text-gray-500 dark:text-gray-400\"\n                aria-label=\"More pages\"\n              >\n                <span class=\"h-1 w-1 rounded-full bg-current\"></span>\n                <span class=\"h-1 w-1 rounded-full bg-current\"></span>\n                <span class=\"h-1 w-1 rounded-full bg-current\"></span>\n              </span>\n            }\n          }\n\n          <!-- \u2500\u2500 Separator (between items, not after the last) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n          @if (!last) {\n            @if (isSvgSeparator()) {\n              <svg\n                [ngClass]=\"[separatorClass(), 'shrink-0 text-gray-300 dark:text-gray-600']\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n              >\n                <path [attr.d]=\"separatorPath()\" />\n              </svg>\n            } @else {\n              <span\n                class=\"shrink-0 select-none text-gray-300 dark:text-gray-600\"\n                aria-hidden=\"true\"\n              >\n                {{ separatorChar() }}\n              </span>\n            }\n          }\n\n        </li>\n\n      }\n    </ol>\n  }\n</nav>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sv-breadcrumb', standalone: true, imports: [NgClass, NgTemplateOutlet, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- \u2500\u2500 Reusable fragments \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n\n<ng-template #iconTpl let-item>\n  @if (iconPathFor(item); as path) {\n    <svg\n      [ngClass]=\"iconClass()\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path [attr.d]=\"path\" />\n    </svg>\n  }\n</ng-template>\n\n<ng-template #badgeTpl let-item>\n  @if (item.badge !== undefined && item.badge !== null) {\n    <span\n      class=\"inline-flex items-center justify-center rounded-full bg-gray-200 px-1.5 py-0.5\n             text-[10px] font-semibold leading-none text-gray-700 dark:bg-gray-700 dark:text-gray-200\"\n    >\n      {{ item.badge }}\n    </span>\n  }\n</ng-template>\n\n<ng-template #labelTpl let-item>\n  @if (truncateLabels()) {\n    <span\n      class=\"inline-block max-w-[10rem] truncate align-bottom\"\n      [attr.title]=\"item.title ?? item.label\"\n    >{{ item.label }}</span>\n  } @else {\n    {{ item.label }}\n  }\n</ng-template>\n\n<ng-template #menuTriggerTpl let-item let-idx=\"idx\">\n  @if (item.menu?.length && !item.disabled) {\n    <button\n      type=\"button\"\n      data-trigger\n      class=\"flex items-center rounded p-0.5 text-gray-400 transition-colors hover:text-gray-700\n             focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500\n             focus-visible:ring-offset-1 dark:text-gray-500 dark:hover:text-gray-200\"\n      aria-haspopup=\"menu\"\n      [attr.aria-expanded]=\"openMenuIndex() === idx\"\n      [attr.aria-controls]=\"menuPanelId\"\n      [attr.aria-label]=\"'Switch page under ' + item.label\"\n      (click)=\"toggleMenu(idx, $event)\"\n    >\n      <svg class=\"h-3 w-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n           stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <path [attr.d]=\"menuCaretPath\" />\n      </svg>\n    </button>\n  }\n</ng-template>\n\n<!-- \u2500\u2500 Sibling-menu panel \u2014 rendered into document.body via a true body portal\n     (dropdown-instruction.md \u00A71) so it always escapes ancestor overflow/transform\n     clipping. Never rendered in place; only instantiated on open by toggleMenu(). \u2500\u2500 -->\n<ng-template #menuPanelTpl>\n  @if (openMenuItem(); as item) {\n    <div\n      [id]=\"menuPanelId\"\n      role=\"menu\"\n      [attr.aria-label]=\"item.label + ' pages'\"\n      class=\"overflow-hidden rounded-lg border border-gray-100 bg-white py-1 shadow-xl\n             dark:border-gray-800 dark:bg-gray-900\"\n      [style.position]=\"menuPanelStyle()['position']\"\n      [style.zIndex]=\"menuPanelStyle()['zIndex']\"\n      [style.minWidth]=\"menuPanelStyle()['minWidth']\"\n      [style.top]=\"menuPanelStyle()['top']\"\n      [style.bottom]=\"menuPanelStyle()['bottom']\"\n      [style.left]=\"menuPanelStyle()['left']\"\n      [style.right]=\"menuPanelStyle()['right']\"\n      (keydown)=\"onMenuKeydown($event)\"\n    >\n      @for (mi of item.menu; track mi.label) {\n        <a\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          #menuItemEl\n          [routerLink]=\"mi.routerLink\"\n          class=\"flex items-center gap-2 px-3 py-1.5 text-xs text-gray-600 transition-colors\n                 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus-visible:bg-gray-50\n                 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white dark:focus-visible:bg-gray-800\"\n          (click)=\"selectMenuItem(mi)\"\n        >\n          @if (mi.iconPath) {\n            <svg class=\"h-3.5 w-3.5 shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                 stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path [attr.d]=\"mi.iconPath\" />\n            </svg>\n          }\n          {{ mi.label }}\n        </a>\n      }\n    </div>\n  }\n</ng-template>\n\n<!-- \u2500\u2500 Root \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n\n<nav\n  [ngClass]=\"['flex', navWrapperClass(), customClass()]\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  @if (loading()) {\n    <div\n      class=\"flex items-center gap-2\"\n      [ngClass]=\"textClass()\"\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-busy=\"true\"\n    >\n      <span class=\"sr-only\">Loading breadcrumb\u2026</span>\n      @for (i of skeletonItems(); track i; let last = $last) {\n        <span\n          class=\"h-3.5 animate-pulse rounded bg-gray-200 dark:bg-gray-700\"\n          [style.width.px]=\"40 + (i % 3) * 24\"\n          aria-hidden=\"true\"\n        ></span>\n        @if (!last) {\n          <span class=\"select-none text-gray-300 dark:text-gray-600\" aria-hidden=\"true\">/</span>\n        }\n      }\n    </div>\n  } @else {\n    <ol\n      role=\"list\"\n      [ngClass]=\"['flex flex-wrap items-center gap-1', textClass()]\"\n    >\n      @for (item of visibleItems(); track $index; let last = $last, idx = $index) {\n\n        <li\n          [ngClass]=\"[\n            'flex items-center gap-1',\n            (collapseOnMobile() && isMiddleItem(item)) ? 'hidden sm:flex' : ''\n          ]\"\n        >\n\n          <!-- \u2500\u2500 Crumb \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n          @if (isBreadcrumbItem(item)) {\n\n            @if (item.disabled) {\n              <!-- Disabled crumb \u2014 non-interactive -->\n              <span [ngClass]=\"disabledClasses()\" aria-disabled=\"true\">\n                <ng-container *ngTemplateOutlet=\"iconTpl; context: { $implicit: item }\" />\n                <ng-container *ngTemplateOutlet=\"labelTpl; context: { $implicit: item }\" />\n                <ng-container *ngTemplateOutlet=\"badgeTpl; context: { $implicit: item }\" />\n              </span>\n\n            } @else if (last) {\n              <!-- Current page \u2014 plain text, aria-current -->\n              <span [ngClass]=\"currentClasses()\" aria-current=\"page\">\n                <ng-container *ngTemplateOutlet=\"iconTpl; context: { $implicit: item }\" />\n                <ng-container *ngTemplateOutlet=\"labelTpl; context: { $implicit: item }\" />\n                <ng-container *ngTemplateOutlet=\"badgeTpl; context: { $implicit: item }\" />\n              </span>\n              <ng-container *ngTemplateOutlet=\"menuTriggerTpl; context: { $implicit: item, idx: idx }\" />\n\n            } @else if (item.routerLink) {\n              <!-- Linked crumb -->\n              <a\n                [routerLink]=\"item.routerLink\"\n                [ngClass]=\"linkClasses()\"\n                (click)=\"onCrumbClick(item)\"\n              >\n                <ng-container *ngTemplateOutlet=\"iconTpl; context: { $implicit: item }\" />\n                <ng-container *ngTemplateOutlet=\"labelTpl; context: { $implicit: item }\" />\n                <ng-container *ngTemplateOutlet=\"badgeTpl; context: { $implicit: item }\" />\n              </a>\n              <ng-container *ngTemplateOutlet=\"menuTriggerTpl; context: { $implicit: item, idx: idx }\" />\n\n            } @else {\n              <!-- Non-linked crumb (middle, no routerLink) -->\n              <span [ngClass]=\"middleClasses()\">\n                <ng-container *ngTemplateOutlet=\"iconTpl; context: { $implicit: item }\" />\n                <ng-container *ngTemplateOutlet=\"labelTpl; context: { $implicit: item }\" />\n                <ng-container *ngTemplateOutlet=\"badgeTpl; context: { $implicit: item }\" />\n              </span>\n              <ng-container *ngTemplateOutlet=\"menuTriggerTpl; context: { $implicit: item, idx: idx }\" />\n            }\n\n          } @else {\n            <!-- Ellipsis / collapse toggle \u2014 a real open\u2194close button when expandable -->\n            @if (expandable()) {\n              <button\n                type=\"button\"\n                class=\"flex items-center gap-0.5 rounded px-1 py-0.5 text-gray-400 transition-colors\n                       hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200\n                       focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500\n                       focus-visible:ring-offset-1\"\n                [attr.aria-expanded]=\"isExpanded()\"\n                [attr.aria-label]=\"isExpanded()\n                  ? 'Hide ' + toggleCount() + ' page' + (toggleCount() === 1 ? '' : 's')\n                  : 'Show ' + toggleCount() + ' hidden page' + (toggleCount() === 1 ? '' : 's')\"\n                (click)=\"toggleCollapse()\"\n              >\n                @if (isExpanded()) {\n                  <svg class=\"h-3 w-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n                       stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5\" />\n                  </svg>\n                } @else {\n                  <span class=\"h-1 w-1 rounded-full bg-current\"></span>\n                  <span class=\"h-1 w-1 rounded-full bg-current\"></span>\n                  <span class=\"h-1 w-1 rounded-full bg-current\"></span>\n                }\n              </button>\n            } @else {\n              <span\n                class=\"flex items-center gap-0.5 text-gray-500 dark:text-gray-400\"\n                aria-label=\"More pages\"\n              >\n                <span class=\"h-1 w-1 rounded-full bg-current\"></span>\n                <span class=\"h-1 w-1 rounded-full bg-current\"></span>\n                <span class=\"h-1 w-1 rounded-full bg-current\"></span>\n              </span>\n            }\n          }\n\n          <!-- \u2500\u2500 Separator (between items, not after the last) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n          @if (!last) {\n            @if (isSvgSeparator()) {\n              <svg\n                [ngClass]=\"[separatorClass(), 'shrink-0 text-gray-300 dark:text-gray-600']\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n              >\n                <path [attr.d]=\"separatorPath()\" />\n              </svg>\n            } @else {\n              <span\n                class=\"shrink-0 select-none text-gray-300 dark:text-gray-600\"\n                aria-hidden=\"true\"\n              >\n                {{ separatorChar() }}\n              </span>\n            }\n          }\n\n        </li>\n\n      }\n    </ol>\n  }\n</nav>\n" }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], customSeparatorPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "customSeparatorPath", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisible", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], showHomeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHomeIcon", required: false }] }], truncateLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncateLabels", required: false }] }], collapseOnMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseOnMobile", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], skeletonCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonCount", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], crumbClick: [{ type: i0.Output, args: ["crumbClick"] }], expand: [{ type: i0.Output, args: ["expand"] }], collapse: [{ type: i0.Output, args: ["collapse"] }], menuItemSelect: [{ type: i0.Output, args: ["menuItemSelect"] }], menuItemRefs: [{ type: i0.ViewChildren, args: ['menuItemEl', { isSignal: true }] }], menuPanelTpl: [{
+                type: ViewChild,
+                args: ['menuPanelTpl', { read: TemplateRef }]
+            }], onDocumentMousedown: [{
+                type: HostListener,
+                args: ['document:mousedown', ['$event']]
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }], onHostEscape: [{
+                type: HostListener,
+                args: ['keydown.escape']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SvBreadcrumbComponent };
+//# sourceMappingURL=styloviz-breadcrumb.mjs.map

package/fesm2022/styloviz-breadcrumb.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styloviz-breadcrumb.mjs","sources":["../../../../projects/breadcrumb/src/lib/breadcrumb.component.ts","../../../../projects/breadcrumb/src/lib/breadcrumb.component.html","../../../../projects/breadcrumb/src/styloviz-breadcrumb.ts"],"sourcesContent":["import {\n  ApplicationRef,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  EmbeddedViewRef,\n  HostListener,\n  OnDestroy,\n  OnInit,\n  TemplateRef,\n  ViewChild,\n  computed,\n  inject,\n  input,\n  output,\n  signal,\n  viewChildren,\n} from '@angular/core';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { RouterLink } from '@angular/router';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\n/** A sibling page offered from a crumb's dropdown switcher. */\nexport interface BreadcrumbMenuItem {\n  /** Display label. */\n  label: string;\n  /** Router link (string or array). */\n  routerLink?: string | string[];\n  /** Optional SVG `<path d=\"...\">` shown before the label. */\n  iconPath?: string;\n}\n\n/** A single crumb in the breadcrumb trail. */\nexport interface BreadcrumbItem {\n  /** Display label. */\n  label: string;\n  /**\n   * Router link (string or array).\n   * Omit for the current / last crumb (renders as plain text).\n   */\n  routerLink?: string | string[];\n  /** Optional SVG `<path d=\"...\">` shown before the label. */\n  iconPath?: string;\n  /** Renders the crumb as non-interactive (e.g. permission-gated section). @default false */\n  disabled?: boolean;\n  /** Small count/status pill rendered after the label. */\n  badge?: string | number;\n  /** Sibling pages at this level — renders a dropdown-switcher trigger next to the crumb. */\n  menu?: BreadcrumbMenuItem[];\n  /** Full label shown as a tooltip when `truncateLabels` clips the visible text. */\n  title?: string;\n}\n\nexport type BreadcrumbSeparator = 'slash' | 'chevron' | 'dot' | 'arrow' | 'custom';\nexport type BreadcrumbVariant   = 'plain' | 'contained' | 'pills' | 'underline';\nexport type BreadcrumbSize      = 'sm' | 'md' | 'lg';\n\n// ─── Separator SVG paths ──────────────────────────────────────────────────────\n\nconst SEPARATOR_PATHS: Record<Exclude<BreadcrumbSeparator, 'custom'>, string | null> = {\n  slash:   null,   // rendered as a text character\n  chevron: 'M9 18l6-6-6-6',\n  dot:     null,   // rendered as a text character\n  arrow:   'M5 12h14M12 5l7 7-7 7',\n};\n\n/** Default \"home\" glyph used by `showHomeIcon` on the first crumb. */\nconst HOME_ICON_PATH =\n  'M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 ' +\n  '1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 ' +\n  '1.125-.504 1.125-1.125V9.75M8.25 21h8.25';\n\n/** Chevron-down glyph used by the sibling-menu trigger button. */\nconst MENU_CARET_PATH = 'M6 9l6 6 6-6';\n\n/** Fixed sibling-menu panel width in px — matches the panel's CSS min-width. */\nconst MENU_PANEL_W = 192;\n/** Approximate max panel height (px) — used only for the vertical flip decision. */\nconst MENU_PANEL_H = 240;\n/** Gap between trigger edge and panel (px). */\nconst GAP = 4;\n\nlet uidCounter = 0;\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\n/**\n * Breadcrumb — A navigation trail showing the user's location within the app.\n *\n * Features:\n * - Accepts flat `items` array — no routing knowledge required\n * - 5 separator styles: slash · chevron · dot · arrow · custom (bring your own SVG path)\n * - 4 visual variants: plain · contained · pills · underline\n * - Optional icon before each crumb label, plus an automatic home icon on the first crumb\n * - Per-crumb badge, disabled state, and a sibling-page dropdown switcher (ARIA menu-button)\n * - Sibling-menu panel is rendered in a true `document.body` portal so it always escapes\n *   ancestor `overflow:hidden`/scroll/transform containment (see dropdown-instruction.md)\n * - Automatic \"current page\" ARIA on the last crumb\n * - Collapsible middle crumbs when more than `maxVisible` items — the ellipsis is a real\n *   open/close toggle (`toggleCollapse`), not a one-way reveal, with `expand`/`collapse` outputs\n * - Optional label truncation with a tooltip, and CSS-only mobile collapse\n * - Loading skeleton state for async breadcrumb sources\n * - 3 sizes: sm · md · lg\n * - Full dark-mode support\n * - Accessible: `<nav aria-label>`, `<ol>`, `aria-current=\"page\"`, `aria-disabled`,\n *   full keyboard support (Tab, Enter, Escape, ↑ ↓ Home End inside the sibling menu)\n */\n@Component({\n  selector: 'sv-breadcrumb',\n  standalone: true,\n  imports: [NgClass, NgTemplateOutlet, RouterLink],\n  templateUrl: './breadcrumb.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SvBreadcrumbComponent implements OnInit, OnDestroy {\n  private readonly host = inject(ElementRef<HTMLElement>);\n  private readonly appRef = inject(ApplicationRef);\n  private readonly uid = `sv-breadcrumb-${uidCounter++}`;\n\n  // ── Inputs ────────────────────────────────────────────────────────────────\n\n  /** Ordered list of crumbs. The last item is treated as the current page. */\n  items = input<BreadcrumbItem[]>([]);\n\n  /** Separator style between crumbs. Use `custom` with `customSeparatorPath`. @default 'chevron' */\n  separator = input<BreadcrumbSeparator>('chevron');\n\n  /** SVG `<path d=\"...\">` used when `separator=\"custom\"`. */\n  customSeparatorPath = input<string>('');\n\n  /** Visual style of the crumb trail. @default 'plain' */\n  variant = input<BreadcrumbVariant>('plain');\n\n  /** Size of the breadcrumb text and icons. @default 'md' */\n  size = input<BreadcrumbSize>('md');\n\n  /**\n   * Maximum number of crumbs to show before collapsing the middle ones.\n   * Set to `0` to always show all. @default 0\n   */\n  maxVisible = input<number>(0);\n\n  /**\n   * Allow the collapsed ellipsis to be clicked to reveal the hidden middle\n   * crumbs. When `false` the ellipsis is purely decorative. @default true\n   */\n  expandable = input<boolean>(true);\n\n  /** Prepends a home icon to the first crumb when it has no explicit `iconPath`. @default false */\n  showHomeIcon = input<boolean>(false);\n\n  /** Clips long labels to a fixed width with an ellipsis and a title tooltip. @default false */\n  truncateLabels = input<boolean>(false);\n\n  /** Hides middle crumbs below the `sm` breakpoint (pure CSS) to keep long trails compact on phones. @default false */\n  collapseOnMobile = input<boolean>(false);\n\n  /** Shows an animated skeleton in place of the crumb trail while data is loading. @default false */\n  loading = input<boolean>(false);\n\n  /** Number of skeleton segments rendered when `loading` is `true`. @default 3 */\n  skeletonCount = input<number>(3);\n\n  /** Accessible label for the breadcrumb navigation landmark. @default 'Breadcrumb' */\n  ariaLabel = input<string>('Breadcrumb');\n\n  /** Additional CSS classes on the root `<nav>` element. */\n  customClass = input<string>('');\n\n  // ── Outputs ───────────────────────────────────────────────────────────────\n\n  /** Emitted when a crumb with a `routerLink` is clicked. */\n  crumbClick = output<BreadcrumbItem>();\n\n  /** Emitted when the collapsed ellipsis is expanded to reveal hidden crumbs. */\n  expand = output<void>();\n\n  /** Emitted when an expanded trail is collapsed back via the toggle. */\n  collapse = output<void>();\n\n  /** Emitted when a sibling page is chosen from a crumb's dropdown switcher. */\n  menuItemSelect = output<BreadcrumbMenuItem>();\n\n  // ── Internal state ──────────────────────────────────────────────────────────\n\n  /** Whether the user has expanded the collapsed middle crumbs. */\n  readonly isExpanded = signal(false);\n\n  /** Index (within `visibleItems`) of the crumb whose sibling menu is open, or `null`. */\n  readonly openMenuIndex = signal<number | null>(null);\n\n  /** Roving-tabindex focus position inside the currently open sibling menu. */\n  private readonly activeMenuItemIndex = signal(0);\n\n  /** Anchor to restore focus to when the sibling menu closes. */\n  private triggerEl: HTMLElement | null = null;\n\n  private readonly menuItemRefs = viewChildren<ElementRef<HTMLAnchorElement>>('menuItemEl');\n\n  /** Whether the open sibling menu should render above (vs. below) its trigger. */\n  readonly menuAbove = signal(false);\n\n  /**\n   * Inline style object applied to the portaled menu panel. Uses\n   * `position: fixed` with exact viewport coordinates so the panel escapes\n   * all parent `overflow`/transform containment (dropdown-instruction.md §1–2).\n   */\n  readonly menuPanelStyle = signal<Record<string, string>>({});\n\n  // ── Body-portal state (dropdown-instruction.md §1) ────────────────────────\n\n  private portalEl: HTMLElement | null = null;\n  private portalView: EmbeddedViewRef<object> | null = null;\n\n  /** The ng-template holding the sibling-menu panel markup. */\n  @ViewChild('menuPanelTpl', { read: TemplateRef })\n  private readonly menuPanelTpl!: TemplateRef<object>;\n\n  /**\n   * Capture-phase scroll listener — fires for ANY scrollable ancestor, not\n   * just the window, so the panel tracks its trigger through nested\n   * scroll containers (dropdown-instruction.md §6).\n   */\n  private _rafId: number | null = null;\n  private readonly _scrollHandler = (): void => {\n    if (this.openMenuIndex() === null) return;\n    if (this._rafId !== null) return;\n    this._rafId = requestAnimationFrame(() => {\n      this._rafId = null;\n      if (this.openMenuIndex() !== null) {\n        this._calcMenuPos();\n        this.portalView?.detectChanges();\n      }\n    });\n  };\n\n  // ── Computed ──────────────────────────────────────────────────────────────\n\n  /** Whether `maxVisible` would collapse this trail at all, regardless of expanded state. */\n  isCollapsible = computed<boolean>(() => {\n    const max = this.maxVisible();\n    return max > 0 && this.items().length > max;\n  });\n\n  /** Number of crumbs currently hidden behind the ellipsis (0 when expanded or not collapsible). */\n  hiddenCount = computed<number>(() => {\n    if (!this.isCollapsible() || this.isExpanded()) return 0;\n    return this.items().length - 2; // all but first + last\n  });\n\n  /** How many crumbs the toggle would hide/reveal, regardless of its current state. */\n  toggleCount = computed<number>(() =>\n    this.isCollapsible() ? this.items().length - 2 : 0,\n  );\n\n  /**\n   * Crumbs actually rendered. When collapsible, a `'__ellipsis__'` toggle\n   * token always sits right after the first crumb — collapsed it hides the\n   * middle crumbs, expanded it re-collapses them, so the trail can be\n   * toggled open and closed rather than only ever revealed once.\n   */\n  visibleItems = computed<Array<BreadcrumbItem | '__ellipsis__'>>(() => {\n    const all = this.items();\n    if (!this.isCollapsible()) return all;\n\n    const first = all[0];\n    const last  = all[all.length - 1];\n    if (!this.isExpanded()) return [first, '__ellipsis__', last];\n    return [first, '__ellipsis__', ...all.slice(1, -1), last];\n  });\n\n  /** Whether there are collapsed crumbs. */\n  hasEllipsis = computed(() => this.visibleItems().includes('__ellipsis__'));\n\n  /** SVG path for the current separator (null means text character). */\n  separatorPath = computed<string | null>(() => {\n    const sep = this.separator();\n    if (sep === 'custom') return this.customSeparatorPath() || SEPARATOR_PATHS.chevron;\n    return SEPARATOR_PATHS[sep];\n  });\n\n  /** Text character used as separator (only for slash / dot). */\n  separatorChar = computed<string>(() => {\n    switch (this.separator()) {\n      case 'slash': return '/';\n      case 'dot':   return '·';\n      default:      return '';\n    }\n  });\n\n  /** Whether the separator is rendered as SVG (true) or a text character (false). */\n  isSvgSeparator = computed(() => this.separatorPath() !== null);\n\n  /** Numbered array driving the loading skeleton's segment count. */\n  skeletonItems = computed<number[]>(() =>\n    Array.from({ length: Math.max(1, this.skeletonCount()) }, (_, i) => i),\n  );\n\n  /** The crumb whose sibling menu is currently open, or `null`. Drives the portaled panel. */\n  openMenuItem = computed<BreadcrumbItem | null>(() => {\n    const index = this.openMenuIndex();\n    if (index === null) return null;\n    const item = this.visibleItems()[index];\n    return item && this.isBreadcrumbItem(item) ? item : null;\n  });\n\n  // ── Size maps ─────────────────────────────────────────────────────────────\n\n  textClass = computed<string>(() => ({\n    sm: 'text-xs',\n    md: 'text-sm',\n    lg: 'text-base',\n  })[this.size()]);\n\n  iconClass = computed<string>(() => ({\n    sm: 'h-3 w-3',\n    md: 'h-3.5 w-3.5',\n    lg: 'h-4 w-4',\n  })[this.size()]);\n\n  separatorClass = computed<string>(() => ({\n    sm: 'h-3 w-3',\n    md: 'h-3.5 w-3.5',\n    lg: 'h-4 w-4',\n  })[this.size()]);\n\n  // ── Variant class maps ────────────────────────────────────────────────────\n\n  /** Extra classes applied to the root `<nav>` for container-style variants. */\n  navWrapperClass = computed<string>(() =>\n    this.variant() === 'contained'\n      ? 'inline-flex items-center rounded-lg border border-gray-200/80 bg-gray-50/70 px-3 py-1.5 dark:border-gray-800 dark:bg-gray-800/40'\n      : '',\n  );\n\n  /** Classes for a clickable (routerLink) crumb. */\n  linkClasses = computed<string>(() => {\n    const base = 'flex items-center gap-1 text-gray-500 transition-colors hover:text-gray-700 ' +\n      'dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none focus-visible:rounded ' +\n      'focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1';\n    switch (this.variant()) {\n      case 'pills':     return `${base} rounded-full px-2.5 py-1 hover:bg-gray-100 dark:hover:bg-gray-800/70`;\n      case 'underline': return `${base} border-b-2 border-transparent pb-0.5 hover:border-gray-300 dark:hover:border-gray-600`;\n      default:          return base;\n    }\n  });\n\n  /** Classes for the current-page (last) crumb. */\n  currentClasses = computed<string>(() => {\n    const base = 'flex items-center gap-1 font-medium text-gray-900 dark:text-white';\n    switch (this.variant()) {\n      case 'pills':     return `${base} rounded-full bg-primary-50 px-2.5 py-1 text-primary-700 dark:bg-primary-500/10 dark:text-primary-400`;\n      case 'underline': return `${base} border-b-2 border-primary-600 pb-0.5 text-primary-700 dark:border-primary-400 dark:text-primary-400`;\n      default:          return base;\n    }\n  });\n\n  /** Classes for a non-linked middle crumb (no routerLink, not disabled). */\n  middleClasses = computed<string>(() => {\n    const base = 'flex items-center gap-1 text-gray-500 dark:text-gray-400';\n    return this.variant() === 'pills' ? `${base} rounded-full px-2.5 py-1` : base;\n  });\n\n  /** Classes for a disabled crumb. */\n  disabledClasses = computed<string>(() => {\n    const base = 'flex items-center gap-1 cursor-not-allowed text-gray-300 opacity-60 dark:text-gray-600';\n    return this.variant() === 'pills' ? `${base} rounded-full px-2.5 py-1` : base;\n  });\n\n  // ── Helpers ───────────────────────────────────────────────────────────────\n\n  isLastItem(item: BreadcrumbItem | '__ellipsis__'): boolean {\n    const all = this.visibleItems();\n    return all[all.length - 1] === item;\n  }\n\n  isFirstItem(item: BreadcrumbItem | '__ellipsis__'): boolean {\n    return this.visibleItems()[0] === item;\n  }\n\n  isBreadcrumbItem(item: BreadcrumbItem | '__ellipsis__'): item is BreadcrumbItem {\n    return item !== '__ellipsis__';\n  }\n\n  /** True for crumbs strictly between the first and last — used to CSS-hide on mobile. */\n  isMiddleItem(item: BreadcrumbItem | '__ellipsis__'): boolean {\n    if (!this.isBreadcrumbItem(item)) return false;\n    return !this.isFirstItem(item) && !this.isLastItem(item);\n  }\n\n  /** Resolves the icon shown before a crumb's label, falling back to the home icon. */\n  iconPathFor(item: BreadcrumbItem): string | undefined {\n    if (item.iconPath) return item.iconPath;\n    if (this.showHomeIcon() && this.isFirstItem(item)) return HOME_ICON_PATH;\n    return undefined;\n  }\n\n  onCrumbClick(item: BreadcrumbItem): void {\n    if (item.disabled) return;\n    if (item.routerLink) {\n      this.crumbClick.emit(item);\n    }\n  }\n\n  /**\n   * Toggle the collapsed middle crumbs open or closed. Unlike a one-way\n   * \"reveal\", calling this again while expanded collapses the trail back —\n   * the ellipsis token stays clickable in both states (see `visibleItems`).\n   */\n  toggleCollapse(): void {\n    if (!this.expandable() || !this.isCollapsible()) return;\n    const next = !this.isExpanded();\n    this.isExpanded.set(next);\n    if (next) this.expand.emit();\n    else this.collapse.emit();\n  }\n\n  // ── Lifecycle ─────────────────────────────────────────────────────────────\n\n  ngOnInit(): void {\n    // Capture phase catches scroll from any scrollable ancestor, not just window\n    // (dropdown-instruction.md §6).\n    window.addEventListener('scroll', this._scrollHandler, { passive: true, capture: true });\n  }\n\n  ngOnDestroy(): void {\n    window.removeEventListener('scroll', this._scrollHandler, true);\n    if (this._rafId !== null) cancelAnimationFrame(this._rafId);\n    this._destroyMenuPortal();\n  }\n\n  // ── Sibling dropdown menu (ARIA menu-button + body-portal pattern) ───────\n\n  /** Stable DOM id for the (single, reused) sibling-menu panel. */\n  readonly menuPanelId = `${this.uid}-menu`;\n\n  toggleMenu(index: number, event: MouseEvent): void {\n    event.stopPropagation();\n    if (this.openMenuIndex() === index) {\n      this.closeMenu();\n      return;\n    }\n    if (this.openMenuIndex() !== null) this._destroyMenuPortal();\n\n    this.triggerEl = event.currentTarget as HTMLElement;\n    this._calcMenuPos();\n\n    // Mount the panel into document.body via a true portal so it always\n    // escapes ancestor overflow/transform clipping (dropdown-instruction.md §1).\n    this.portalEl = document.createElement('div');\n    this.portalEl.className = 'sv-breadcrumb-menu-portal';\n    document.body.appendChild(this.portalEl);\n\n    this.portalView = this.menuPanelTpl.createEmbeddedView({});\n    this.appRef.attachView(this.portalView);\n    this.portalView.rootNodes.forEach((n: Node) => this.portalEl!.appendChild(n));\n\n    this.openMenuIndex.set(index);\n    this.activeMenuItemIndex.set(0);\n    this.portalView.detectChanges();\n\n    queueMicrotask(() => this.menuItemRefs()[0]?.nativeElement.focus());\n  }\n\n  closeMenu(): void {\n    if (this.openMenuIndex() === null) return;\n    this._destroyMenuPortal();\n    this.openMenuIndex.set(null);\n    this.triggerEl?.focus();\n    this.triggerEl = null;\n  }\n\n  selectMenuItem(item: BreadcrumbMenuItem): void {\n    this.menuItemSelect.emit(item);\n    this.closeMenu();\n  }\n\n  onMenuKeydown(event: KeyboardEvent): void {\n    const refs = this.menuItemRefs();\n    if (!refs.length) return;\n\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        this.activeMenuItemIndex.update(i => Math.min(i + 1, refs.length - 1));\n        refs[this.activeMenuItemIndex()].nativeElement.focus();\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        this.activeMenuItemIndex.update(i => Math.max(i - 1, 0));\n        refs[this.activeMenuItemIndex()].nativeElement.focus();\n        break;\n      case 'Home':\n        event.preventDefault();\n        this.activeMenuItemIndex.set(0);\n        refs[0].nativeElement.focus();\n        break;\n      case 'End':\n        event.preventDefault();\n        this.activeMenuItemIndex.set(refs.length - 1);\n        refs[refs.length - 1].nativeElement.focus();\n        break;\n      case 'Escape':\n        event.preventDefault();\n        this.closeMenu();\n        break;\n      case 'Tab':\n        this.closeMenu();\n        break;\n    }\n  }\n\n  /** Position the portaled panel against `triggerEl`, flipping to fit the viewport. */\n  private _calcMenuPos(): void {\n    const trigger = this.triggerEl ?? this.host.nativeElement;\n    const rect = trigger.getBoundingClientRect();\n    const vw = window.innerWidth;\n    const vh = window.innerHeight;\n\n    const spaceBelow = vh - rect.bottom;\n    const spaceAbove = rect.top;\n    const above = spaceBelow < MENU_PANEL_H && spaceAbove > spaceBelow;\n    const right = rect.left + MENU_PANEL_W > vw;\n\n    this.menuAbove.set(above);\n\n    const style: Record<string, string> = {\n      position: 'fixed',\n      zIndex: '9999',\n      minWidth: `${MENU_PANEL_W}px`,\n    };\n    style[above ? 'bottom' : 'top'] = above\n      ? `${vh - rect.top + GAP}px`\n      : `${rect.bottom + GAP}px`;\n    style[right ? 'right' : 'left'] = right\n      ? `${vw - rect.right}px`\n      : `${rect.left}px`;\n\n    this.menuPanelStyle.set(style);\n  }\n\n  private _destroyMenuPortal(): void {\n    if (this.portalView) {\n      this.appRef.detachView(this.portalView);\n      this.portalView.destroy();\n      this.portalView = null;\n    }\n    this.portalEl?.remove();\n    this.portalEl = null;\n  }\n\n  // ── Global listeners ──────────────────────────────────────────────────────\n\n  /**\n   * Click-outside close. The panel lives in `document.body`, not inside this\n   * component's DOM subtree, so both the host AND the portal element must be\n   * checked (dropdown-instruction.md §7).\n   */\n  @HostListener('document:mousedown', ['$event'])\n  onDocumentMousedown(event: MouseEvent): void {\n    if (this.openMenuIndex() === null) return;\n    const target = event.target as Node;\n    if (this.host.nativeElement.contains(target)) return;\n    if (this.portalEl?.contains(target)) return;\n    this.closeMenu();\n  }\n\n  /** Viewport resize invalidates the computed coordinates — close rather than reposition\n   *  with stale numbers (dropdown-instruction.md §8). */\n  @HostListener('window:resize')\n  onWindowResize(): void {\n    if (this.openMenuIndex() !== null) this.closeMenu();\n  }\n\n  /** Scoped to the host so it only fires while focus/interaction is on the trigger;\n   *  focus inside the portaled panel is handled by `onMenuKeydown` (dropdown-instruction.md §9). */\n  @HostListener('keydown.escape')\n  onHostEscape(): void {\n    if (this.openMenuIndex() !== null) this.closeMenu();\n  }\n\n  readonly menuCaretPath = MENU_CARET_PATH;\n}\n","<!-- ── Reusable fragments ──────────────────────────────────────────────────── -->\n\n<ng-template #iconTpl let-item>\n  @if (iconPathFor(item); as path) {\n    <svg\n      [ngClass]=\"iconClass()\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path [attr.d]=\"path\" />\n    </svg>\n  }\n</ng-template>\n\n<ng-template #badgeTpl let-item>\n  @if (item.badge !== undefined && item.badge !== null) {\n    <span\n      class=\"inline-flex items-center justify-center rounded-full bg-gray-200 px-1.5 py-0.5\n             text-[10px] font-semibold leading-none text-gray-700 dark:bg-gray-700 dark:text-gray-200\"\n    >\n      {{ item.badge }}\n    </span>\n  }\n</ng-template>\n\n<ng-template #labelTpl let-item>\n  @if (truncateLabels()) {\n    <span\n      class=\"inline-block max-w-[10rem] truncate align-bottom\"\n      [attr.title]=\"item.title ?? item.label\"\n    >{{ item.label }}</span>\n  } @else {\n    {{ item.label }}\n  }\n</ng-template>\n\n<ng-template #menuTriggerTpl let-item let-idx=\"idx\">\n  @if (item.menu?.length && !item.disabled) {\n    <button\n      type=\"button\"\n      data-trigger\n      class=\"flex items-center rounded p-0.5 text-gray-400 transition-colors hover:text-gray-700\n             focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500\n             focus-visible:ring-offset-1 dark:text-gray-500 dark:hover:text-gray-200\"\n      aria-haspopup=\"menu\"\n      [attr.aria-expanded]=\"openMenuIndex() === idx\"\n      [attr.aria-controls]=\"menuPanelId\"\n      [attr.aria-label]=\"'Switch page under ' + item.label\"\n      (click)=\"toggleMenu(idx, $event)\"\n    >\n      <svg class=\"h-3 w-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n           stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <path [attr.d]=\"menuCaretPath\" />\n      </svg>\n    </button>\n  }\n</ng-template>\n\n<!-- ── Sibling-menu panel — rendered into document.body via a true body portal\n     (dropdown-instruction.md §1) so it always escapes ancestor overflow/transform\n     clipping. Never rendered in place; only instantiated on open by toggleMenu(). ── -->\n<ng-template #menuPanelTpl>\n  @if (openMenuItem(); as item) {\n    <div\n      [id]=\"menuPanelId\"\n      role=\"menu\"\n      [attr.aria-label]=\"item.label + ' pages'\"\n      class=\"overflow-hidden rounded-lg border border-gray-100 bg-white py-1 shadow-xl\n             dark:border-gray-800 dark:bg-gray-900\"\n      [style.position]=\"menuPanelStyle()['position']\"\n      [style.zIndex]=\"menuPanelStyle()['zIndex']\"\n      [style.minWidth]=\"menuPanelStyle()['minWidth']\"\n      [style.top]=\"menuPanelStyle()['top']\"\n      [style.bottom]=\"menuPanelStyle()['bottom']\"\n      [style.left]=\"menuPanelStyle()['left']\"\n      [style.right]=\"menuPanelStyle()['right']\"\n      (keydown)=\"onMenuKeydown($event)\"\n    >\n      @for (mi of item.menu; track mi.label) {\n        <a\n          role=\"menuitem\"\n          tabindex=\"-1\"\n          #menuItemEl\n          [routerLink]=\"mi.routerLink\"\n          class=\"flex items-center gap-2 px-3 py-1.5 text-xs text-gray-600 transition-colors\n                 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus-visible:bg-gray-50\n                 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white dark:focus-visible:bg-gray-800\"\n          (click)=\"selectMenuItem(mi)\"\n        >\n          @if (mi.iconPath) {\n            <svg class=\"h-3.5 w-3.5 shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n                 stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path [attr.d]=\"mi.iconPath\" />\n            </svg>\n          }\n          {{ mi.label }}\n        </a>\n      }\n    </div>\n  }\n</ng-template>\n\n<!-- ── Root ─────────────────────────────────────────────────────────────────── -->\n\n<nav\n  [ngClass]=\"['flex', navWrapperClass(), customClass()]\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  @if (loading()) {\n    <div\n      class=\"flex items-center gap-2\"\n      [ngClass]=\"textClass()\"\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-busy=\"true\"\n    >\n      <span class=\"sr-only\">Loading breadcrumb…</span>\n      @for (i of skeletonItems(); track i; let last = $last) {\n        <span\n          class=\"h-3.5 animate-pulse rounded bg-gray-200 dark:bg-gray-700\"\n          [style.width.px]=\"40 + (i % 3) * 24\"\n          aria-hidden=\"true\"\n        ></span>\n        @if (!last) {\n          <span class=\"select-none text-gray-300 dark:text-gray-600\" aria-hidden=\"true\">/</span>\n        }\n      }\n    </div>\n  } @else {\n    <ol\n      role=\"list\"\n      [ngClass]=\"['flex flex-wrap items-center gap-1', textClass()]\"\n    >\n      @for (item of visibleItems(); track $index; let last = $last, idx = $index) {\n\n        <li\n          [ngClass]=\"[\n            'flex items-center gap-1',\n            (collapseOnMobile() && isMiddleItem(item)) ? 'hidden sm:flex' : ''\n          ]\"\n        >\n\n          <!-- ── Crumb ─────────────────────────────────────────────────── -->\n          @if (isBreadcrumbItem(item)) {\n\n            @if (item.disabled) {\n              <!-- Disabled crumb — non-interactive -->\n              <span [ngClass]=\"disabledClasses()\" aria-disabled=\"true\">\n                <ng-container *ngTemplateOutlet=\"iconTpl; context: { $implicit: item }\" />\n                <ng-container *ngTemplateOutlet=\"labelTpl; context: { $implicit: item }\" />\n                <ng-container *ngTemplateOutlet=\"badgeTpl; context: { $implicit: item }\" />\n              </span>\n\n            } @else if (last) {\n              <!-- Current page — plain text, aria-current -->\n              <span [ngClass]=\"currentClasses()\" aria-current=\"page\">\n                <ng-container *ngTemplateOutlet=\"iconTpl; context: { $implicit: item }\" />\n                <ng-container *ngTemplateOutlet=\"labelTpl; context: { $implicit: item }\" />\n                <ng-container *ngTemplateOutlet=\"badgeTpl; context: { $implicit: item }\" />\n              </span>\n              <ng-container *ngTemplateOutlet=\"menuTriggerTpl; context: { $implicit: item, idx: idx }\" />\n\n            } @else if (item.routerLink) {\n              <!-- Linked crumb -->\n              <a\n                [routerLink]=\"item.routerLink\"\n                [ngClass]=\"linkClasses()\"\n                (click)=\"onCrumbClick(item)\"\n              >\n                <ng-container *ngTemplateOutlet=\"iconTpl; context: { $implicit: item }\" />\n                <ng-container *ngTemplateOutlet=\"labelTpl; context: { $implicit: item }\" />\n                <ng-container *ngTemplateOutlet=\"badgeTpl; context: { $implicit: item }\" />\n              </a>\n              <ng-container *ngTemplateOutlet=\"menuTriggerTpl; context: { $implicit: item, idx: idx }\" />\n\n            } @else {\n              <!-- Non-linked crumb (middle, no routerLink) -->\n              <span [ngClass]=\"middleClasses()\">\n                <ng-container *ngTemplateOutlet=\"iconTpl; context: { $implicit: item }\" />\n                <ng-container *ngTemplateOutlet=\"labelTpl; context: { $implicit: item }\" />\n                <ng-container *ngTemplateOutlet=\"badgeTpl; context: { $implicit: item }\" />\n              </span>\n              <ng-container *ngTemplateOutlet=\"menuTriggerTpl; context: { $implicit: item, idx: idx }\" />\n            }\n\n          } @else {\n            <!-- Ellipsis / collapse toggle — a real open↔close button when expandable -->\n            @if (expandable()) {\n              <button\n                type=\"button\"\n                class=\"flex items-center gap-0.5 rounded px-1 py-0.5 text-gray-400 transition-colors\n                       hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200\n                       focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500\n                       focus-visible:ring-offset-1\"\n                [attr.aria-expanded]=\"isExpanded()\"\n                [attr.aria-label]=\"isExpanded()\n                  ? 'Hide ' + toggleCount() + ' page' + (toggleCount() === 1 ? '' : 's')\n                  : 'Show ' + toggleCount() + ' hidden page' + (toggleCount() === 1 ? '' : 's')\"\n                (click)=\"toggleCollapse()\"\n              >\n                @if (isExpanded()) {\n                  <svg class=\"h-3 w-3\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n                       stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5\" />\n                  </svg>\n                } @else {\n                  <span class=\"h-1 w-1 rounded-full bg-current\"></span>\n                  <span class=\"h-1 w-1 rounded-full bg-current\"></span>\n                  <span class=\"h-1 w-1 rounded-full bg-current\"></span>\n                }\n              </button>\n            } @else {\n              <span\n                class=\"flex items-center gap-0.5 text-gray-500 dark:text-gray-400\"\n                aria-label=\"More pages\"\n              >\n                <span class=\"h-1 w-1 rounded-full bg-current\"></span>\n                <span class=\"h-1 w-1 rounded-full bg-current\"></span>\n                <span class=\"h-1 w-1 rounded-full bg-current\"></span>\n              </span>\n            }\n          }\n\n          <!-- ── Separator (between items, not after the last) ─────────── -->\n          @if (!last) {\n            @if (isSvgSeparator()) {\n              <svg\n                [ngClass]=\"[separatorClass(), 'shrink-0 text-gray-300 dark:text-gray-600']\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n              >\n                <path [attr.d]=\"separatorPath()\" />\n              </svg>\n            } @else {\n              <span\n                class=\"shrink-0 select-none text-gray-300 dark:text-gray-600\"\n                aria-hidden=\"true\"\n              >\n                {{ separatorChar() }}\n              </span>\n            }\n          }\n\n        </li>\n\n      }\n    </ol>\n  }\n</nav>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@styloviz/breadcrumb",
+  "version": "0.1.1",
+  "description": "4 visual variants, 5 separator styles, a sibling-page dropdown switcher, badges, disabled crumbs, collapsible middle crumbs, a loading skeleton, and full keyboard support.",
+  "license": "MIT",
+  "author": "sazzad-bs23",
+  "homepage": "https://styloviz.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rhossain/angular-tailwind-dashboard-components.git",
+    "directory": "projects/breadcrumb"
+  },
+  "bugs": {
+    "url": "https://github.com/rhossain/angular-tailwind-dashboard-components/issues"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=21.0.0",
+    "@angular/core": ">=21.0.0",
+    "@angular/router": ">=21.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/styloviz-breadcrumb.mjs",
+  "typings": "types/styloviz-breadcrumb.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/styloviz-breadcrumb.d.ts",
+      "default": "./fesm2022/styloviz-breadcrumb.mjs"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/types/styloviz-breadcrumb.d.ts

@@ -0,0 +1,212 @@
+import * as _angular_core from '@angular/core';
+import { OnInit, OnDestroy } from '@angular/core';
+
+/** A sibling page offered from a crumb's dropdown switcher. */
+interface BreadcrumbMenuItem {
+    /** Display label. */
+    label: string;
+    /** Router link (string or array). */
+    routerLink?: string | string[];
+    /** Optional SVG `<path d="...">` shown before the label. */
+    iconPath?: string;
+}
+/** A single crumb in the breadcrumb trail. */
+interface BreadcrumbItem {
+    /** Display label. */
+    label: string;
+    /**
+     * Router link (string or array).
+     * Omit for the current / last crumb (renders as plain text).
+     */
+    routerLink?: string | string[];
+    /** Optional SVG `<path d="...">` shown before the label. */
+    iconPath?: string;
+    /** Renders the crumb as non-interactive (e.g. permission-gated section). @default false */
+    disabled?: boolean;
+    /** Small count/status pill rendered after the label. */
+    badge?: string | number;
+    /** Sibling pages at this level — renders a dropdown-switcher trigger next to the crumb. */
+    menu?: BreadcrumbMenuItem[];
+    /** Full label shown as a tooltip when `truncateLabels` clips the visible text. */
+    title?: string;
+}
+type BreadcrumbSeparator = 'slash' | 'chevron' | 'dot' | 'arrow' | 'custom';
+type BreadcrumbVariant = 'plain' | 'contained' | 'pills' | 'underline';
+type BreadcrumbSize = 'sm' | 'md' | 'lg';
+/**
+ * Breadcrumb — A navigation trail showing the user's location within the app.
+ *
+ * Features:
+ * - Accepts flat `items` array — no routing knowledge required
+ * - 5 separator styles: slash · chevron · dot · arrow · custom (bring your own SVG path)
+ * - 4 visual variants: plain · contained · pills · underline
+ * - Optional icon before each crumb label, plus an automatic home icon on the first crumb
+ * - Per-crumb badge, disabled state, and a sibling-page dropdown switcher (ARIA menu-button)
+ * - Sibling-menu panel is rendered in a true `document.body` portal so it always escapes
+ *   ancestor `overflow:hidden`/scroll/transform containment (see dropdown-instruction.md)
+ * - Automatic "current page" ARIA on the last crumb
+ * - Collapsible middle crumbs when more than `maxVisible` items — the ellipsis is a real
+ *   open/close toggle (`toggleCollapse`), not a one-way reveal, with `expand`/`collapse` outputs
+ * - Optional label truncation with a tooltip, and CSS-only mobile collapse
+ * - Loading skeleton state for async breadcrumb sources
+ * - 3 sizes: sm · md · lg
+ * - Full dark-mode support
+ * - Accessible: `<nav aria-label>`, `<ol>`, `aria-current="page"`, `aria-disabled`,
+ *   full keyboard support (Tab, Enter, Escape, ↑ ↓ Home End inside the sibling menu)
+ */
+declare class SvBreadcrumbComponent implements OnInit, OnDestroy {
+    private readonly host;
+    private readonly appRef;
+    private readonly uid;
+    /** Ordered list of crumbs. The last item is treated as the current page. */
+    items: _angular_core.InputSignal<BreadcrumbItem[]>;
+    /** Separator style between crumbs. Use `custom` with `customSeparatorPath`. @default 'chevron' */
+    separator: _angular_core.InputSignal<BreadcrumbSeparator>;
+    /** SVG `<path d="...">` used when `separator="custom"`. */
+    customSeparatorPath: _angular_core.InputSignal<string>;
+    /** Visual style of the crumb trail. @default 'plain' */
+    variant: _angular_core.InputSignal<BreadcrumbVariant>;
+    /** Size of the breadcrumb text and icons. @default 'md' */
+    size: _angular_core.InputSignal<BreadcrumbSize>;
+    /**
+     * Maximum number of crumbs to show before collapsing the middle ones.
+     * Set to `0` to always show all. @default 0
+     */
+    maxVisible: _angular_core.InputSignal<number>;
+    /**
+     * Allow the collapsed ellipsis to be clicked to reveal the hidden middle
+     * crumbs. When `false` the ellipsis is purely decorative. @default true
+     */
+    expandable: _angular_core.InputSignal<boolean>;
+    /** Prepends a home icon to the first crumb when it has no explicit `iconPath`. @default false */
+    showHomeIcon: _angular_core.InputSignal<boolean>;
+    /** Clips long labels to a fixed width with an ellipsis and a title tooltip. @default false */
+    truncateLabels: _angular_core.InputSignal<boolean>;
+    /** Hides middle crumbs below the `sm` breakpoint (pure CSS) to keep long trails compact on phones. @default false */
+    collapseOnMobile: _angular_core.InputSignal<boolean>;
+    /** Shows an animated skeleton in place of the crumb trail while data is loading. @default false */
+    loading: _angular_core.InputSignal<boolean>;
+    /** Number of skeleton segments rendered when `loading` is `true`. @default 3 */
+    skeletonCount: _angular_core.InputSignal<number>;
+    /** Accessible label for the breadcrumb navigation landmark. @default 'Breadcrumb' */
+    ariaLabel: _angular_core.InputSignal<string>;
+    /** Additional CSS classes on the root `<nav>` element. */
+    customClass: _angular_core.InputSignal<string>;
+    /** Emitted when a crumb with a `routerLink` is clicked. */
+    crumbClick: _angular_core.OutputEmitterRef<BreadcrumbItem>;
+    /** Emitted when the collapsed ellipsis is expanded to reveal hidden crumbs. */
+    expand: _angular_core.OutputEmitterRef<void>;
+    /** Emitted when an expanded trail is collapsed back via the toggle. */
+    collapse: _angular_core.OutputEmitterRef<void>;
+    /** Emitted when a sibling page is chosen from a crumb's dropdown switcher. */
+    menuItemSelect: _angular_core.OutputEmitterRef<BreadcrumbMenuItem>;
+    /** Whether the user has expanded the collapsed middle crumbs. */
+    readonly isExpanded: _angular_core.WritableSignal<boolean>;
+    /** Index (within `visibleItems`) of the crumb whose sibling menu is open, or `null`. */
+    readonly openMenuIndex: _angular_core.WritableSignal<number | null>;
+    /** Roving-tabindex focus position inside the currently open sibling menu. */
+    private readonly activeMenuItemIndex;
+    /** Anchor to restore focus to when the sibling menu closes. */
+    private triggerEl;
+    private readonly menuItemRefs;
+    /** Whether the open sibling menu should render above (vs. below) its trigger. */
+    readonly menuAbove: _angular_core.WritableSignal<boolean>;
+    /**
+     * Inline style object applied to the portaled menu panel. Uses
+     * `position: fixed` with exact viewport coordinates so the panel escapes
+     * all parent `overflow`/transform containment (dropdown-instruction.md §1–2).
+     */
+    readonly menuPanelStyle: _angular_core.WritableSignal<Record<string, string>>;
+    private portalEl;
+    private portalView;
+    /** The ng-template holding the sibling-menu panel markup. */
+    private readonly menuPanelTpl;
+    /**
+     * Capture-phase scroll listener — fires for ANY scrollable ancestor, not
+     * just the window, so the panel tracks its trigger through nested
+     * scroll containers (dropdown-instruction.md §6).
+     */
+    private _rafId;
+    private readonly _scrollHandler;
+    /** Whether `maxVisible` would collapse this trail at all, regardless of expanded state. */
+    isCollapsible: _angular_core.Signal<boolean>;
+    /** Number of crumbs currently hidden behind the ellipsis (0 when expanded or not collapsible). */
+    hiddenCount: _angular_core.Signal<number>;
+    /** How many crumbs the toggle would hide/reveal, regardless of its current state. */
+    toggleCount: _angular_core.Signal<number>;
+    /**
+     * Crumbs actually rendered. When collapsible, a `'__ellipsis__'` toggle
+     * token always sits right after the first crumb — collapsed it hides the
+     * middle crumbs, expanded it re-collapses them, so the trail can be
+     * toggled open and closed rather than only ever revealed once.
+     */
+    visibleItems: _angular_core.Signal<(BreadcrumbItem | "__ellipsis__")[]>;
+    /** Whether there are collapsed crumbs. */
+    hasEllipsis: _angular_core.Signal<boolean>;
+    /** SVG path for the current separator (null means text character). */
+    separatorPath: _angular_core.Signal<string | null>;
+    /** Text character used as separator (only for slash / dot). */
+    separatorChar: _angular_core.Signal<string>;
+    /** Whether the separator is rendered as SVG (true) or a text character (false). */
+    isSvgSeparator: _angular_core.Signal<boolean>;
+    /** Numbered array driving the loading skeleton's segment count. */
+    skeletonItems: _angular_core.Signal<number[]>;
+    /** The crumb whose sibling menu is currently open, or `null`. Drives the portaled panel. */
+    openMenuItem: _angular_core.Signal<BreadcrumbItem | null>;
+    textClass: _angular_core.Signal<string>;
+    iconClass: _angular_core.Signal<string>;
+    separatorClass: _angular_core.Signal<string>;
+    /** Extra classes applied to the root `<nav>` for container-style variants. */
+    navWrapperClass: _angular_core.Signal<string>;
+    /** Classes for a clickable (routerLink) crumb. */
+    linkClasses: _angular_core.Signal<string>;
+    /** Classes for the current-page (last) crumb. */
+    currentClasses: _angular_core.Signal<string>;
+    /** Classes for a non-linked middle crumb (no routerLink, not disabled). */
+    middleClasses: _angular_core.Signal<string>;
+    /** Classes for a disabled crumb. */
+    disabledClasses: _angular_core.Signal<string>;
+    isLastItem(item: BreadcrumbItem | '__ellipsis__'): boolean;
+    isFirstItem(item: BreadcrumbItem | '__ellipsis__'): boolean;
+    isBreadcrumbItem(item: BreadcrumbItem | '__ellipsis__'): item is BreadcrumbItem;
+    /** True for crumbs strictly between the first and last — used to CSS-hide on mobile. */
+    isMiddleItem(item: BreadcrumbItem | '__ellipsis__'): boolean;
+    /** Resolves the icon shown before a crumb's label, falling back to the home icon. */
+    iconPathFor(item: BreadcrumbItem): string | undefined;
+    onCrumbClick(item: BreadcrumbItem): void;
+    /**
+     * Toggle the collapsed middle crumbs open or closed. Unlike a one-way
+     * "reveal", calling this again while expanded collapses the trail back —
+     * the ellipsis token stays clickable in both states (see `visibleItems`).
+     */
+    toggleCollapse(): void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /** Stable DOM id for the (single, reused) sibling-menu panel. */
+    readonly menuPanelId: string;
+    toggleMenu(index: number, event: MouseEvent): void;
+    closeMenu(): void;
+    selectMenuItem(item: BreadcrumbMenuItem): void;
+    onMenuKeydown(event: KeyboardEvent): void;
+    /** Position the portaled panel against `triggerEl`, flipping to fit the viewport. */
+    private _calcMenuPos;
+    private _destroyMenuPortal;
+    /**
+     * Click-outside close. The panel lives in `document.body`, not inside this
+     * component's DOM subtree, so both the host AND the portal element must be
+     * checked (dropdown-instruction.md §7).
+     */
+    onDocumentMousedown(event: MouseEvent): void;
+    /** Viewport resize invalidates the computed coordinates — close rather than reposition
+     *  with stale numbers (dropdown-instruction.md §8). */
+    onWindowResize(): void;
+    /** Scoped to the host so it only fires while focus/interaction is on the trigger;
+     *  focus inside the portaled panel is handled by `onMenuKeydown` (dropdown-instruction.md §9). */
+    onHostEscape(): void;
+    readonly menuCaretPath = "M6 9l6 6 6-6";
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SvBreadcrumbComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SvBreadcrumbComponent, "sv-breadcrumb", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "customSeparatorPath": { "alias": "customSeparatorPath"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "maxVisible": { "alias": "maxVisible"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "showHomeIcon": { "alias": "showHomeIcon"; "required": false; "isSignal": true; }; "truncateLabels": { "alias": "truncateLabels"; "required": false; "isSignal": true; }; "collapseOnMobile": { "alias": "collapseOnMobile"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "skeletonCount": { "alias": "skeletonCount"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "customClass": { "alias": "customClass"; "required": false; "isSignal": true; }; }, { "crumbClick": "crumbClick"; "expand": "expand"; "collapse": "collapse"; "menuItemSelect": "menuItemSelect"; }, never, never, true, never>;
+}
+
+export { SvBreadcrumbComponent };
+export type { BreadcrumbItem, BreadcrumbMenuItem, BreadcrumbSeparator, BreadcrumbSize, BreadcrumbVariant };