@danjelp/ngx-app-shell 1.0.0

package/fesm2022/danjelp-ngx-app-shell.mjs

@@ -0,0 +1,1944 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, PLATFORM_ID, signal, computed, linkedSignal, Injectable, NgZone, effect, input, ElementRef, Directive, numberAttribute, TemplateRef, DestroyRef, isDevMode, untracked, ChangeDetectionStrategy, Component, isSignal, viewChild, booleanAttribute, provideEnvironmentInitializer } from '@angular/core';
+import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT } from '@angular/common';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { Router, NavigationEnd, ActivatedRoute, RouterLink, RouterLinkActive } from '@angular/router';
+import { filter, map } from 'rxjs';
+
+/** Ordered size buckets. Order matters: `sizeRank()` relies on the index. */
+const SHELL_SIZES = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+/**
+ * Container-first breakpoints. Deliberately *not* device widths: they describe
+ * the space a region has, which is what layout decisions should react to.
+ */
+const DEFAULT_BREAKPOINTS = {
+    xs: 0,
+    sm: 520,
+    md: 768,
+    lg: 1080,
+    xl: 1440,
+};
+function sizeRank(size) {
+    return SHELL_SIZES.indexOf(size);
+}
+/** Largest bucket whose minimum width is still <= `width`. */
+function resolveSize(width, breakpoints) {
+    let match = SHELL_SIZES[0];
+    for (const size of SHELL_SIZES) {
+        if (width >= breakpoints[size]) {
+            match = size;
+        }
+    }
+    return match;
+}
+/** `atLeast('md', 'sm')` → true */
+function atLeast(size, min) {
+    return sizeRank(size) >= sizeRank(min);
+}
+/** `atMost('md', 'lg')` → true */
+function atMost(size, max) {
+    return sizeRank(size) <= sizeRank(max);
+}
+/** Strictly narrower than `bound` — used for "collapse below md" style rules. */
+function isBelow(size, bound) {
+    return sizeRank(size) < sizeRank(bound);
+}
+
+/**
+ * Building blocks for `SidebarBehavior.resolve`. Each returns a complete,
+ * internally consistent state, so a custom behaviour only decides *which* mode
+ * applies — never how wide the track is or whether a scrim is needed.
+ */
+/** Off-canvas modal drawer. Reserves no grid track. */
+function drawerState(open, sidebar) {
+    return {
+        mode: 'overlay',
+        open,
+        modal: open,
+        labels: true,
+        peeked: false,
+        trackWidth: '0px',
+        panelWidth: sidebar.overlayWidth,
+    };
+}
+/** Icon rail. While peeking the panel floats wider but the track stays put. */
+function railState(peeking, sidebar) {
+    const peeked = peeking && sidebar.peek;
+    return {
+        mode: 'collapsed',
+        open: true,
+        modal: false,
+        labels: peeked,
+        peeked,
+        trackWidth: sidebar.collapsedWidth,
+        panelWidth: peeked ? sidebar.width : sidebar.collapsedWidth,
+    };
+}
+/** Full in-flow panel with labels. */
+function panelState(sidebar) {
+    return {
+        mode: 'expanded',
+        open: true,
+        modal: false,
+        labels: true,
+        peeked: false,
+        trackWidth: sidebar.width,
+        panelWidth: sidebar.width,
+    };
+}
+const HIDDEN_STATE = {
+    mode: 'hidden',
+    open: false,
+    modal: false,
+    labels: false,
+    peeked: false,
+    trackWidth: '0px',
+    panelWidth: '0px',
+};
+/** Not rendered, zero-width track. */
+function hiddenState() {
+    return HIDDEN_STATE;
+}
+
+/**
+ * Default policy.
+ *
+ *   size < overlayBelow   → modal drawer, closed until opened
+ *   size < collapseBelow  → icon rail, widened while peeking
+ *   otherwise             → full panel
+ *
+ * An explicit intent (`expanded`, `collapsed`, `hidden`) wins over the
+ * automatic choice, except in drawer territory where there is no room for a
+ * persistent panel. Set the intent back to `auto` to follow breakpoints again.
+ */
+const responsiveSidebarBehavior = {
+    resolve({ size, intent, drawerOpen, peeking, config }) {
+        const sidebar = config.sidebar;
+        if (isBelow(size, sidebar.overlayBelow)) {
+            return drawerState(drawerOpen, sidebar);
+        }
+        if (intent === 'hidden') {
+            return hiddenState();
+        }
+        const automatic = isBelow(size, sidebar.collapseBelow) ? 'collapsed' : 'expanded';
+        const resolved = intent === 'auto' ? automatic : intent;
+        return resolved === 'collapsed' ? railState(peeking, sidebar) : panelState(sidebar);
+    },
+};
+
+const SIDEBAR_BEHAVIOR = new InjectionToken('SIDEBAR_BEHAVIOR', {
+    providedIn: 'root',
+    factory: () => responsiveSidebarBehavior,
+});
+
+const DEFAULT_SHELL_CONFIG = {
+    layout: 'topbar-full',
+    scroll: 'main',
+    scrollTopOnNavigate: true,
+    initialSize: 'lg',
+    breakpoints: DEFAULT_BREAKPOINTS,
+    sidebar: {
+        width: 'var(--shell-sidebar-width, 264px)',
+        collapsedWidth: 'var(--shell-sidebar-collapsed-width, 68px)',
+        overlayWidth: 'var(--shell-sidebar-overlay-width, min(88vw, 320px))',
+        intent: 'auto',
+        collapseBelow: 'lg',
+        overlayBelow: 'md',
+        peek: true,
+        peekDelay: 180,
+        closeOnNavigate: true,
+        resizable: false,
+        minWidth: 200,
+        maxWidth: 420,
+        toggleShortcut: null,
+        persist: true,
+        storageKey: 'app-shell.sidebar',
+    },
+    topbar: { enabled: true, sidebarToggle: 'always' },
+    footer: { enabled: false },
+    appearance: {
+        topbar: 'solid',
+        sidebar: 'solid',
+        footer: 'solid',
+        navIndicator: 'pill',
+        subheader: 'solid',
+    },
+    motion: {
+        enabled: true,
+        speed: 1,
+        drawer: 'slide',
+        overflowMenu: 'fade',
+        scrim: 'fade',
+        collapse: true,
+        navExpand: true,
+    },
+    subheader: {
+        enabled: 'auto',
+        sticky: true,
+        overflowSlots: ['subheader-end'],
+    },
+    breadcrumbs: {
+        includeHome: false,
+        homeLabel: 'Home',
+        homeUrl: '/',
+        includeCurrent: true,
+        maxItems: 4,
+        useRouteTitle: true,
+        compactBelow: 480,
+        backBelow: 280,
+        skeletonDelay: 400,
+        separator: 'chevron',
+    },
+    overflowSlots: ['primary-nav', 'search', 'actions'],
+    labels: {
+        skipToContent: 'Skip to main content',
+        openNavigation: 'Open navigation',
+        closeNavigation: 'Close navigation',
+        expandSidebar: 'Expand sidebar',
+        collapseSidebar: 'Collapse sidebar',
+        resizeSidebar: 'Resize sidebar',
+        moreActions: 'More',
+        primaryNavigation: 'Primary',
+        breadcrumb: 'Breadcrumb',
+        showPath: 'Show full path',
+        back: 'Back to',
+        loading: 'Loading',
+    },
+};
+/** Configuration as provided by the app (`provideAppShell`). */
+const SHELL_CONFIG = new InjectionToken('SHELL_CONFIG', {
+    providedIn: 'root',
+    factory: () => DEFAULT_SHELL_CONFIG,
+});
+/** Merge `input` over `base` (the defaults unless given). Never mutates. */
+function mergeShellConfig(input = {}, base = DEFAULT_SHELL_CONFIG) {
+    return {
+        ...base,
+        ...input,
+        breakpoints: { ...base.breakpoints, ...input.breakpoints },
+        sidebar: { ...base.sidebar, ...input.sidebar },
+        topbar: { ...base.topbar, ...input.topbar },
+        footer: { ...base.footer, ...input.footer },
+        appearance: { ...base.appearance, ...input.appearance },
+        motion: { ...base.motion, ...input.motion },
+        subheader: { ...base.subheader, ...input.subheader },
+        breadcrumbs: { ...base.breadcrumbs, ...input.breadcrumbs },
+        labels: { ...base.labels, ...input.labels },
+    };
+}
+/**
+ * Register the shell once, in `app.config.ts`:
+ *
+ * ```ts
+ * provideAppShell({ layout: 'sidebar-full', sidebar: { collapseBelow: 'xl' } })
+ * ```
+ *
+ * Pass `behavior` to replace the collapse policy wholesale. Both can also be
+ * changed at runtime through `ShellStore.configure()` / `setBehavior()`.
+ */
+function provideAppShell(config = {}, options = {}) {
+    const providers = [
+        { provide: SHELL_CONFIG, useValue: mergeShellConfig(config) },
+    ];
+    if (options.behavior) {
+        providers.push({ provide: SIDEBAR_BEHAVIOR, useValue: options.behavior });
+    }
+    return makeEnvironmentProviders(providers);
+}
+
+const NOOP_STORAGE = {
+    read: () => null,
+    write: () => undefined,
+};
+function localShellStateStorage() {
+    if (!isPlatformBrowser(inject(PLATFORM_ID))) {
+        return NOOP_STORAGE;
+    }
+    return {
+        read(key) {
+            try {
+                return localStorage.getItem(key);
+            }
+            catch {
+                // Private mode / disabled storage: degrade to "no preference".
+                return null;
+            }
+        },
+        write(key, value) {
+            try {
+                localStorage.setItem(key, value);
+            }
+            catch {
+                /* ignore */
+            }
+        },
+    };
+}
+const SHELL_STATE_STORAGE = new InjectionToken('SHELL_STATE_STORAGE', {
+    providedIn: 'root',
+    factory: localShellStateStorage,
+});
+
+/**
+ * Stable element ids. The shell assumes one instance per application, which
+ * lets `aria-controls` work from a toggle rendered anywhere in the tree.
+ */
+const SHELL_SIDEBAR_ID = 'shell-sidebar';
+const SHELL_MAIN_ID = 'shell-main';
+
+const INTENTS = ['auto', 'expanded', 'collapsed', 'hidden'];
+/**
+ * Single source of truth for the shell.
+ *
+ * Root-provided on purpose: any component in the app — including lazily loaded
+ * pages and content projected into `<app-shell>` — can inject it and drive the
+ * sidebar without input/output plumbing. One shell per application.
+ *
+ * Everything is derived from four inputs: the measured shell width, the user's
+ * intent, the transient drawer/peek flags, and the (runtime-changeable)
+ * config + behaviour.
+ */
+class ShellStore {
+    storage = inject(SHELL_STATE_STORAGE);
+    baseConfig = signal(inject(SHELL_CONFIG), ...(ngDevMode ? [{ debugName: "baseConfig" }] : /* istanbul ignore next */ []));
+    behaviorState = signal(inject(SIDEBAR_BEHAVIOR), ...(ngDevMode ? [{ debugName: "behaviorState" }] : /* istanbul ignore next */ []));
+    /** Measured shell width; `null` until the first ResizeObserver callback. */
+    width = signal(null, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    intent = signal(this.restoreIntent(), ...(ngDevMode ? [{ debugName: "intent" }] : /* istanbul ignore next */ []));
+    /** User-dragged panel width in px; `null` = use the configured width. */
+    customWidth = signal(this.restoreWidth(), ...(ngDevMode ? [{ debugName: "customWidth" }] : /* istanbul ignore next */ []));
+    peekRequested = signal(false, ...(ngDevMode ? [{ debugName: "peekRequested" }] : /* istanbul ignore next */ []));
+    resizingState = signal(false, ...(ngDevMode ? [{ debugName: "resizingState" }] : /* istanbul ignore next */ []));
+    peekTimer;
+    /** Size bucket of the shell container — not of the viewport. */
+    size = computed(() => {
+        const width = this.width();
+        const config = this.baseConfig();
+        return width === null ? config.initialSize : resolveSize(width, config.breakpoints);
+    }, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Drawer open state. Transient by design: it is never persisted, and any
+     * change of size bucket closes it, so rotating a phone or resizing a window
+     * never leaves a modal drawer stranded open.
+     */
+    drawerOpen = linkedSignal({ ...(ngDevMode ? { debugName: "drawerOpen" } : /* istanbul ignore next */ {}), source: this.size,
+        computation: () => false });
+    /** Effective configuration: app config, runtime patches and the user's width. */
+    config = computed(() => {
+        const config = this.baseConfig();
+        const width = this.customWidth();
+        if (width === null || !config.sidebar.resizable) {
+            return config;
+        }
+        return { ...config, sidebar: { ...config.sidebar, width: `${width}px` } };
+    }, ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    behavior = this.behaviorState.asReadonly();
+    shellWidth = this.width.asReadonly();
+    sidebarIntent = this.intent.asReadonly();
+    sidebarWidth = this.customWidth.asReadonly();
+    resizing = this.resizingState.asReadonly();
+    sidebar = computed(() => this.behaviorState().resolve(this.context()), ...(ngDevMode ? [{ debugName: "sidebar" }] : /* istanbul ignore next */ []));
+    // ── Configuration ─────────────────────────────────────────────────────────
+    /** Patch the configuration at runtime, e.g. from a settings screen. */
+    configure(patch) {
+        this.baseConfig.update((current) => mergeShellConfig(patch, current));
+    }
+    /** Swap the collapse policy at runtime. */
+    setBehavior(behavior) {
+        this.behaviorState.set(behavior);
+    }
+    /** Called by `<app-shell>` with its measured width. */
+    setWidth(width) {
+        this.width.set(width);
+    }
+    // ── Sidebar commands ──────────────────────────────────────────────────────
+    setSidebarIntent(intent) {
+        this.intent.set(intent);
+        this.persistIntent(intent);
+    }
+    /**
+     * Overlay drawers toggle open/closed; persistent panels ask the behaviour
+     * for the next intent (by default: expanded ⇄ collapsed).
+     */
+    toggleSidebar() {
+        const state = this.sidebar();
+        if (state.mode === 'overlay') {
+            this.drawerOpen.set(!state.open);
+            return;
+        }
+        const context = this.context();
+        const next = this.behaviorState().nextIntent?.(context) ??
+            (state.mode === 'expanded' ? 'collapsed' : 'expanded');
+        this.setSidebarIntent(next);
+    }
+    openSidebar() {
+        if (this.sidebar().mode === 'overlay') {
+            this.drawerOpen.set(true);
+        }
+        else {
+            this.setSidebarIntent('expanded');
+        }
+    }
+    closeSidebar() {
+        if (this.sidebar().mode === 'overlay') {
+            this.drawerOpen.set(false);
+        }
+        else {
+            this.setSidebarIntent('collapsed');
+        }
+    }
+    /**
+     * Set the expanded panel width in px (clamped to `minWidth`/`maxWidth`), or
+     * `null` to return to the configured width. Pass `{ persist: false }` for
+     * intermediate values, e.g. while a drag is still in progress.
+     */
+    setSidebarWidth(width, options = {}) {
+        const { minWidth, maxWidth } = this.baseConfig().sidebar;
+        const next = width === null ? null : Math.round(Math.min(maxWidth, Math.max(minWidth, width)));
+        this.customWidth.set(next);
+        if (options.persist ?? true) {
+            this.write('width', next === null ? '' : String(next));
+        }
+    }
+    /** Suspends layout transitions while a resize drag is in progress. */
+    setResizing(resizing) {
+        this.resizingState.set(resizing);
+    }
+    /** Hover/focus peek on the collapsed rail, debounced by `sidebar.peekDelay`. */
+    requestPeek(peeking) {
+        clearTimeout(this.peekTimer);
+        if (!peeking) {
+            this.peekRequested.set(false);
+            return;
+        }
+        const sidebar = this.baseConfig().sidebar;
+        if (!sidebar.peek) {
+            return;
+        }
+        this.peekTimer = setTimeout(() => this.peekRequested.set(true), sidebar.peekDelay);
+    }
+    // ── Internals ─────────────────────────────────────────────────────────────
+    context() {
+        return {
+            width: this.width(),
+            size: this.size(),
+            intent: this.intent(),
+            drawerOpen: this.drawerOpen(),
+            peeking: this.peekRequested(),
+            config: this.config(),
+        };
+    }
+    persistIntent(intent) {
+        const allowed = this.behaviorState().persistIntent?.(intent, this.context()) ?? true;
+        if (allowed) {
+            this.write('intent', intent);
+        }
+    }
+    write(key, value) {
+        const sidebar = this.baseConfig().sidebar;
+        if (sidebar.persist) {
+            this.storage.write(`${sidebar.storageKey}.${key}`, value);
+        }
+    }
+    read(key) {
+        const sidebar = this.baseConfig().sidebar;
+        return sidebar.persist ? this.storage.read(`${sidebar.storageKey}.${key}`) : null;
+    }
+    restoreIntent() {
+        const stored = this.read('intent');
+        return INTENTS.includes(stored)
+            ? stored
+            : this.baseConfig().sidebar.intent;
+    }
+    restoreWidth() {
+        const stored = Number.parseInt(this.read('width') ?? '', 10);
+        return Number.isFinite(stored) ? stored : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellStore, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellStore, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * The sidebar never collapses on its own. Whatever the user last chose is what
+ * they get at every desktop size (`auto` means expanded); only drawer
+ * territory overrides it.
+ *
+ * ```ts
+ * provideAppShell({}, { behavior: manualSidebarBehavior });
+ * ```
+ */
+const manualSidebarBehavior = {
+    resolve({ size, intent, drawerOpen, peeking, config }) {
+        const sidebar = config.sidebar;
+        if (isBelow(size, sidebar.overlayBelow)) {
+            return drawerState(drawerOpen, sidebar);
+        }
+        switch (intent) {
+            case 'hidden':
+                return hiddenState();
+            case 'collapsed':
+                return railState(peeking, sidebar);
+            default:
+                return panelState(sidebar);
+        }
+    },
+};
+
+/**
+ * Content-first policy: the sidebar is always an off-canvas drawer, at every
+ * size. Suits editors, media players and dashboards that want the full width.
+ */
+const drawerSidebarBehavior = {
+    resolve({ drawerOpen, config }) {
+        return drawerState(drawerOpen, config.sidebar);
+    },
+};
+
+/**
+ * Tracks the inline size of an element as a signal.
+ *
+ * Accepts a plain `ElementRef` (host element) or a `viewChild` signal, in which
+ * case the observer follows the element as it appears, changes or is removed.
+ *
+ * Must be called from an injection context. SSR safe: with no `ResizeObserver`
+ * the signal simply stays `null`, which callers read as "not measured yet" and
+ * fall back to `config.initialSize` — so the server renders the desktop layout
+ * instead of flashing the mobile one.
+ */
+function observeWidth(target) {
+    const width = signal(null, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    const zone = inject(NgZone);
+    const read = typeof target === 'function' ? target : () => target;
+    effect((onCleanup) => {
+        const element = read()?.nativeElement;
+        if (!element || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver((entries) => {
+            const entry = entries[entries.length - 1];
+            const box = entry.borderBoxSize?.[0];
+            const next = Math.round(box ? box.inlineSize : entry.contentRect.width);
+            // Signal equality dedupes; NgZone.run keeps zone-based apps ticking.
+            zone.run(() => width.set(next));
+        });
+        observer.observe(element);
+        onCleanup(() => observer.disconnect());
+    });
+    return width.asReadonly();
+}
+
+/**
+ * Measure an element and bucket its width with the shell's breakpoints.
+ * Before the first measurement (and on the server) the bucket is
+ * `config.initialSize`. Call from an injection context.
+ */
+function measureRegion(target) {
+    const store = inject(ShellStore);
+    const width = observeWidth(target);
+    const size = computed(() => {
+        const measured = width();
+        const config = store.config();
+        return measured === null ? config.initialSize : resolveSize(measured, config.breakpoints);
+    }, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    return { width, size };
+}
+
+const SHELL_REGION = new InjectionToken('SHELL_REGION');
+
+/**
+ * Turns any element into a measured container.
+ *
+ * ```html
+ * <div shellContainerSize #box="shellContainerSize">
+ *   @if (box.atLeast('md')) { <app-filters /> }
+ *   <span>{{ box.size() }}</span>
+ * </div>
+ * ```
+ *
+ * Also mirrors the bucket onto the host as `data-shell-size` and the raw width
+ * as `--shell-container-width`, and makes the host a CSS query container, so
+ * plain CSS can react without a media query:
+ *
+ * ```scss
+ * [data-shell-size='xs'] .toolbar__label { display: none; }
+ * ```
+ *
+ * Provides itself as the enclosing `SHELL_REGION`, so nested slot outlets pick
+ * the nearest measured ancestor.
+ */
+class ContainerSizeDirective {
+    /** Optional name, purely for debugging: `shellContainerSize="toolbar"`. */
+    label = input('', { ...(ngDevMode ? { debugName: "label" } : /* istanbul ignore next */ {}), alias: 'shellContainerSize' });
+    region = measureRegion(inject(ElementRef));
+    regionWidth = this.region.width;
+    size = this.region.size;
+    regionSize = this.size;
+    cssWidth = computed(() => {
+        const width = this.regionWidth();
+        return width === null ? null : `${width}px`;
+    }, ...(ngDevMode ? [{ debugName: "cssWidth" }] : /* istanbul ignore next */ []));
+    get regionName() {
+        return this.label() || 'container';
+    }
+    atLeast(min) {
+        return atLeast(this.size(), min);
+    }
+    atMost(max) {
+        return atMost(this.size(), max);
+    }
+    below(bound) {
+        return isBelow(this.size(), bound);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ContainerSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.23", type: ContainerSizeDirective, isStandalone: true, selector: "[shellContainerSize]", inputs: { label: { classPropertyName: "label", publicName: "shellContainerSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-shell-size": "size()", "style.container-type": "\"inline-size\"", "style.--shell-container-width": "cssWidth()" } }, providers: [{ provide: SHELL_REGION, useExisting: ContainerSizeDirective }], exportAs: ["shellContainerSize"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ContainerSizeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[shellContainerSize]',
+                    exportAs: 'shellContainerSize',
+                    host: {
+                        '[attr.data-shell-size]': 'size()',
+                        '[style.container-type]': '"inline-size"',
+                        '[style.--shell-container-width]': 'cssWidth()',
+                    },
+                    providers: [{ provide: SHELL_REGION, useExisting: ContainerSizeDirective }],
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "shellContainerSize", required: false }] }] } });
+
+/** Reactive index of every registered slot template, keyed by name. */
+class ShellSlotRegistry {
+    slots = signal([], ...(ngDevMode ? [{ debugName: "slots" }] : /* istanbul ignore next */ []));
+    byName = new Map();
+    register(slot) {
+        this.slots.update((current) => [...current, slot]);
+    }
+    unregister(slot) {
+        this.slots.update((current) => current.filter((candidate) => candidate !== slot));
+    }
+    /** All templates for a slot, ordered. Memoised per name. */
+    all(name) {
+        let entry = this.byName.get(name);
+        if (!entry) {
+            entry = computed(() => this.slots()
+                .filter((slot) => slot.name() === name)
+                .sort((a, b) => a.order() - b.order()));
+            this.byName.set(name, entry);
+        }
+        return entry;
+    }
+    /** Templates that fit the given region size. */
+    visible(name, size) {
+        return this.all(name)().filter((slot) => fits(slot, size));
+    }
+    /** Templates that do not fit but asked to be kept via the overflow menu. */
+    overflowing(name, size) {
+        return this.all(name)().filter((slot) => !fits(slot, size) && slot.overflow());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellSlotRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellSlotRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellSlotRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+function fits(slot, size) {
+    return atLeast(size, slot.minSize()) && atMost(size, slot.maxSize());
+}
+
+/**
+ * Declares a piece of shell chrome.
+ *
+ * ```html
+ * <ng-template shellSlot="search" slotMinSize="md" slotOverflow>
+ *   <app-global-search />
+ * </ng-template>
+ * ```
+ *
+ * Templates register themselves with a root registry, so a slot can be
+ * contributed from anywhere — the app root, a routed page, a feature
+ * component — and it does not need to be a DOM child of `<app-shell>`.
+ * That is also what allows the same template to be rendered in the topbar on a
+ * wide screen and inside the overflow menu on a narrow one.
+ */
+class ShellSlotDirective {
+    /** Target slot. Unknown names are fine; render them with `<shell-slot-outlet>`. */
+    name = input.required({ ...(ngDevMode ? { debugName: "name" } : /* istanbul ignore next */ {}), alias: 'shellSlot' });
+    /** Ascending render order within the slot. Contribute several templates freely. */
+    order = input(0, { ...(ngDevMode ? { debugName: "order" } : /* istanbul ignore next */ {}), alias: 'slotOrder', transform: numberAttribute });
+    /** Render only when the *region* has at least this much room. */
+    minSize = input('xs', { ...(ngDevMode ? { debugName: "minSize" } : /* istanbul ignore next */ {}), alias: 'slotMinSize' });
+    /** Render only up to this region size — for narrow-only affordances. */
+    maxSize = input('xl', { ...(ngDevMode ? { debugName: "maxSize" } : /* istanbul ignore next */ {}), alias: 'slotMaxSize' });
+    /**
+     * When the region is too narrow, move the content into the overflow menu
+     * instead of dropping it. Off by default: dropping is the right answer for
+     * decorative chrome, moving is the right answer for actions. Only slots in
+     * `config.overflowSlots` have an overflow menu.
+     */
+    overflow = input(false, { ...(ngDevMode ? { debugName: "overflow" } : /* istanbul ignore next */ {}), alias: 'slotOverflow',
+        transform: (value) => value !== false });
+    template = inject(TemplateRef);
+    registry = inject(ShellSlotRegistry);
+    constructor() {
+        this.registry.register(this);
+        inject(DestroyRef).onDestroy(() => this.registry.unregister(this));
+        if (isDevMode()) {
+            this.warnOnUnsupportedOverflow();
+        }
+    }
+    /** Type guard for `let-` context inference in the template. */
+    static ngTemplateContextGuard(_directive, _context) {
+        return true;
+    }
+    /**
+     * `slotOverflow` on a slot the topbar never scans is silently ignored at
+     * runtime; say so during development. Inputs are only readable once bound,
+     * hence the effect. Config is read untracked so runtime `configure()` calls
+     * do not repeat the warning.
+     */
+    warnOnUnsupportedOverflow() {
+        const store = inject(ShellStore);
+        effect(() => {
+            const name = this.name();
+            if (!this.overflow()) {
+                return;
+            }
+            const overflowSlots = untracked(() => {
+                const config = store.config();
+                return [...config.overflowSlots, ...config.subheader.overflowSlots];
+            });
+            if (!overflowSlots.includes(name)) {
+                console.warn(`[app-shell] slotOverflow on "${name}" has no effect: only slots listed in ` +
+                    `config.overflowSlots or config.subheader.overflowSlots (${overflowSlots.join(', ')}) ` +
+                    `have an overflow menu. Add "${name}" to one of them, or render it with your own ` +
+                    `<shell-slot-outlet select="overflow">.`);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellSlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.23", type: ShellSlotDirective, isStandalone: true, selector: "ng-template[shellSlot]", inputs: { name: { classPropertyName: "name", publicName: "shellSlot", isSignal: true, isRequired: true, transformFunction: null }, order: { classPropertyName: "order", publicName: "slotOrder", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "slotMinSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "slotMaxSize", isSignal: true, isRequired: false, transformFunction: null }, overflow: { classPropertyName: "overflow", publicName: "slotOverflow", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellSlotDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[shellSlot]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "shellSlot", required: true }] }], order: [{ type: i0.Input, args: [{ isSignal: true, alias: "slotOrder", required: false }] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "slotMinSize", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "slotMaxSize", required: false }] }], overflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "slotOverflow", required: false }] }] } });
+
+/**
+ * Renders the templates registered for a slot.
+ *
+ * Size filtering uses the nearest measured region, falling back to the shell
+ * itself — which is why a topbar squeezed by a wide sidebar collapses its
+ * contents even though the window never changed.
+ */
+class ShellSlotOutletComponent {
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** `visible` renders what fits; `overflow` renders what did not fit. */
+    select = input('visible', ...(ngDevMode ? [{ debugName: "select" }] : /* istanbul ignore next */ []));
+    /** Overrides the measured region size. Mostly for tests. */
+    size = input(null, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    registry = inject(ShellSlotRegistry);
+    store = inject(ShellStore);
+    region = inject(SHELL_REGION, { optional: true });
+    effectiveSize = computed(() => this.size() ?? this.region?.regionSize() ?? this.store.size(), ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
+    slots = computed(() => this.select() === 'overflow'
+        ? this.registry.overflowing(this.name(), this.effectiveSize())
+        : this.registry.visible(this.name(), this.effectiveSize()), ...(ngDevMode ? [{ debugName: "slots" }] : /* istanbul ignore next */ []));
+    context = computed(() => {
+        const sidebar = this.store.sidebar();
+        return {
+            $implicit: sidebar,
+            sidebar,
+            size: this.store.size(),
+            region: this.effectiveSize(),
+            overflow: this.select() === 'overflow',
+            shell: this.store,
+        };
+    }, ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellSlotOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: ShellSlotOutletComponent, isStandalone: true, selector: "shell-slot-outlet", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, select: { classPropertyName: "select", publicName: "select", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-slot": "name()", "hidden": "!slots().length" } }, ngImport: i0, template: `
+    @for (slot of slots(); track slot) {
+      <ng-container *ngTemplateOutlet="slot.template; context: context()" />
+    }
+  `, isInline: true, styles: [":host{display:flex;align-items:center;min-inline-size:0}:host([hidden]){display:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellSlotOutletComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shell-slot-outlet', imports: [NgTemplateOutlet], template: `
+    @for (slot of slots(); track slot) {
+      <ng-container *ngTemplateOutlet="slot.template; context: context()" />
+    }
+  `, host: {
+                        '[attr.data-slot]': 'name()',
+                        // Collapse to nothing when unfilled, so a region's gaps never show as
+                        // phantom spacing for a slot the app never provided.
+                        '[hidden]': '!slots().length',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;align-items:center;min-inline-size:0}:host([hidden]){display:none}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], select: [{ type: i0.Input, args: [{ isSignal: true, alias: "select", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * `true` when at least one template is registered for a slot — lets a region
+ * skip its wrapper markup (and its padding) instead of rendering an empty box.
+ * Call from an injection context.
+ */
+function hasSlot(...names) {
+    const registry = inject(ShellSlotRegistry);
+    return computed(() => names.some((name) => registry.all(name)().length > 0));
+}
+
+/**
+ * Route `data` key for a level's label: a string (static, or produced by a
+ * resolver under `resolve: { breadcrumb: … }`), or `false` to skip the level.
+ */
+const BREADCRUMB_DATA_KEY = 'breadcrumb';
+/** Route `data` key that forces the breadcrumb row on (`true`) or off (`false`) for a page. */
+const SUBHEADER_DATA_KEY = 'subheader';
+
+const NO_OVERRIDE = Symbol('no-override');
+function urlOf(snapshot) {
+    const segments = snapshot.pathFromRoot.flatMap((route) => route.url.map((part) => part.path));
+    return `/${segments.join('/')}`;
+}
+function readLabel(label) {
+    return isSignal(label) ? label() : label;
+}
+/**
+ * The breadcrumb trail, derived from the router.
+ *
+ * On every `NavigationEnd` it walks the active (primary) route tree. Each
+ * route that consumes URL segments is one level, labelled by — in order — a
+ * page override, the route's own `data.breadcrumb` (static or resolved), or
+ * its own `title`. Only what a route declares *itself* counts: Angular copies
+ * `data` from componentless and empty-path parents into children, and a child
+ * must not borrow its parent's label.
+ */
+class ShellBreadcrumbStore {
+    router = inject(Router, { optional: true });
+    shell = inject(ShellStore);
+    levels = signal([], ...(ngDevMode ? [{ debugName: "levels" }] : /* istanbul ignore next */ []));
+    routeSubheader = signal(undefined, ...(ngDevMode ? [{ debugName: "routeSubheader" }] : /* istanbul ignore next */ []));
+    overrides = signal([], ...(ngDevMode ? [{ debugName: "overrides" }] : /* istanbul ignore next */ []));
+    /** Labelled levels of the current route, before the home/current options. */
+    trail = computed(() => {
+        const levels = this.levels();
+        const overrides = this.overrides();
+        const useTitle = this.shell.config().breadcrumbs.useRouteTitle;
+        const crumbs = [];
+        levels.forEach((level, index) => {
+            const override = this.overrideFor(level.url, index === levels.length - 1, overrides);
+            const label = override === NO_OVERRIDE
+                ? (level.label ?? (useTitle ? level.title : undefined))
+                : (override ?? null);
+            if (label !== undefined) {
+                crumbs.push({ label, url: level.url, current: false });
+            }
+        });
+        const last = crumbs.length - 1;
+        if (last >= 0) {
+            crumbs[last] = { ...crumbs[last], current: true };
+        }
+        return crumbs;
+    }, ...(ngDevMode ? [{ debugName: "trail" }] : /* istanbul ignore next */ []));
+    /** The trail to render, with `breadcrumbs.includeHome` / `includeCurrent` applied. */
+    crumbs = computed(() => {
+        const options = this.shell.config().breadcrumbs;
+        let crumbs = [...this.trail()];
+        if (options.includeHome && crumbs[0]?.url !== options.homeUrl) {
+            crumbs.unshift({ label: options.homeLabel, url: options.homeUrl, current: crumbs.length === 0 });
+        }
+        if (!options.includeCurrent) {
+            crumbs = crumbs.filter((crumb) => !crumb.current);
+        }
+        return crumbs;
+    }, ...(ngDevMode ? [{ debugName: "crumbs" }] : /* istanbul ignore next */ []));
+    /** Labelled levels in the current route; the home crumb is not counted. */
+    depth = computed(() => this.trail().length, ...(ngDevMode ? [{ debugName: "depth" }] : /* istanbul ignore next */ []));
+    /** `data.subheader` of the deepest route that declares it, if any. */
+    subheaderOverride = this.routeSubheader.asReadonly();
+    constructor() {
+        this.router?.events
+            .pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed())
+            .subscribe(() => this.refresh());
+        this.refresh();
+    }
+    /**
+     * Label one level from code — for names only the page knows, e.g. a record
+     * loaded without a resolver. `route` picks the level ending at that route's
+     * URL; `null` labels the current level. While a signal label is `undefined`
+     * the crumb renders as a placeholder. Returns a function that removes the
+     * label again; prefer `contributeBreadcrumbLabel()`, which does so for you.
+     */
+    setLabel(label, route = null) {
+        const entry = { route, label };
+        this.overrides.update((current) => [...current, entry]);
+        return () => this.overrides.update((current) => current.filter((candidate) => candidate !== entry));
+    }
+    /** The latest override for a level, `undefined` while pending, or `NO_OVERRIDE`. */
+    overrideFor(url, isCurrent, overrides) {
+        for (let index = overrides.length - 1; index >= 0; index--) {
+            const { route, label } = overrides[index];
+            const matches = route ? urlOf(route.snapshot) === url : isCurrent;
+            if (matches) {
+                return readLabel(label);
+            }
+        }
+        return NO_OVERRIDE;
+    }
+    refresh() {
+        const router = this.router;
+        if (!router) {
+            return;
+        }
+        const levels = [];
+        const segments = [];
+        let subheader;
+        for (let route = router.routerState.snapshot.root; route; route = route.firstChild) {
+            const config = route.routeConfig;
+            const declaresLabel = config?.data?.[BREADCRUMB_DATA_KEY] !== undefined ||
+                config?.resolve?.[BREADCRUMB_DATA_KEY] !== undefined;
+            const label = declaresLabel ? route.data[BREADCRUMB_DATA_KEY] : undefined;
+            const flag = config?.data?.[SUBHEADER_DATA_KEY];
+            if (typeof flag === 'boolean') {
+                subheader = flag;
+            }
+            segments.push(...route.url.map((part) => part.path));
+            // Empty-path routes add no level; `breadcrumb: false` removes one.
+            if (route.url.length > 0 && label !== false) {
+                levels.push({
+                    url: `/${segments.join('/')}`,
+                    label: typeof label === 'string' ? label : undefined,
+                    title: config?.title !== undefined ? route.title : undefined,
+                });
+            }
+        }
+        this.levels.set(levels);
+        this.routeSubheader.set(subheader);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellBreadcrumbStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellBreadcrumbStore, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellBreadcrumbStore, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+/**
+ * Label the calling page's own level of the trail, for as long as the page
+ * lives. Call from a routed component's injection context:
+ *
+ * ```ts
+ * export class ProjectPage {
+ *   readonly name = signal<string | undefined>(undefined); // set when loaded
+ *   constructor() { contributeBreadcrumbLabel(this.name); }
+ * }
+ * ```
+ *
+ * While the signal is `undefined` the crumb is a placeholder; the breadcrumb
+ * row has reserved its height, so nothing shifts when the name arrives.
+ */
+function contributeBreadcrumbLabel(label) {
+    const route = inject(ActivatedRoute, { optional: true });
+    const remove = inject(ShellBreadcrumbStore).setLabel(label, route);
+    inject(DestroyRef).onDestroy(remove);
+}
+
+/**
+ * Footer strip. Three slots so the common "legal start, meta end" pattern
+ * needs no markup of its own, and so a status bar can occupy the middle.
+ * Measures itself, because its width depends on the layout and the sidebar.
+ */
+class ShellFooterComponent {
+    region = measureRegion(inject(ElementRef));
+    store = inject(ShellStore);
+    regionName = 'footer';
+    regionWidth = this.region.width;
+    regionSize = this.region.size;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: ShellFooterComponent, isStandalone: true, selector: "shell-footer", host: { attributes: { "role": "contentinfo" }, properties: { "attr.data-shell-size": "regionSize()", "attr.data-variant": "store.config().appearance.footer" } }, providers: [{ provide: SHELL_REGION, useExisting: ShellFooterComponent }], ngImport: i0, template: "<shell-slot-outlet name=\"footer-start\" class=\"footer__slot\" />\n<shell-slot-outlet name=\"footer\" class=\"footer__slot footer__slot--main\" />\n<shell-slot-outlet name=\"footer-end\" class=\"footer__slot\" />\n", styles: ["@charset \"UTF-8\";:host{container:shell-footer/inline-size;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;min-block-size:var(--shell-footer-min-height, 48px);padding:8px var(--shell-topbar-padding-inline, 12px);box-sizing:border-box;border-block-start:1px solid var(--shell-footer-border-color, var(--shell-border, #e6e6e9));background:var(--shell-footer-bg, var(--shell-surface-raised, #f7f7f8));color:var(--shell-footer-fg, var(--shell-fg-muted, #6b6f76));box-shadow:var(--shell-footer-shadow, none);font-size:var(--shell-footer-font-size, var(--shell-font-size-sm, 12.5px));transition-property:background-color,border-color,box-shadow;transition-duration:calc(var(--shell-footer-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-footer-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){:host{transition-duration:1ms}}:host([data-variant=minimal]){border-block-start-color:var(--shell-footer-border-color, transparent);background:var(--shell-footer-bg, transparent)}.footer__slot{gap:8px 16px;flex-wrap:wrap}.footer__slot--main{flex:1 1 auto;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: ShellSlotOutletComponent, selector: "shell-slot-outlet", inputs: ["name", "select", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shell-footer', imports: [ShellSlotOutletComponent], host: {
+                        role: 'contentinfo',
+                        '[attr.data-shell-size]': 'regionSize()',
+                        '[attr.data-variant]': 'store.config().appearance.footer',
+                    }, providers: [{ provide: SHELL_REGION, useExisting: ShellFooterComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<shell-slot-outlet name=\"footer-start\" class=\"footer__slot\" />\n<shell-slot-outlet name=\"footer\" class=\"footer__slot footer__slot--main\" />\n<shell-slot-outlet name=\"footer-end\" class=\"footer__slot\" />\n", styles: ["@charset \"UTF-8\";:host{container:shell-footer/inline-size;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;min-block-size:var(--shell-footer-min-height, 48px);padding:8px var(--shell-topbar-padding-inline, 12px);box-sizing:border-box;border-block-start:1px solid var(--shell-footer-border-color, var(--shell-border, #e6e6e9));background:var(--shell-footer-bg, var(--shell-surface-raised, #f7f7f8));color:var(--shell-footer-fg, var(--shell-fg-muted, #6b6f76));box-shadow:var(--shell-footer-shadow, none);font-size:var(--shell-footer-font-size, var(--shell-font-size-sm, 12.5px));transition-property:background-color,border-color,box-shadow;transition-duration:calc(var(--shell-footer-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-footer-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){:host{transition-duration:1ms}}:host([data-variant=minimal]){border-block-start-color:var(--shell-footer-border-color, transparent);background:var(--shell-footer-bg, transparent)}.footer__slot{gap:8px 16px;flex-wrap:wrap}.footer__slot--main{flex:1 1 auto;min-inline-size:0}\n"] }]
+        }] });
+
+const FOCUSABLE = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled]):not([type="hidden"])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+    '[contenteditable="true"]',
+].join(',');
+function focusable(root) {
+    return Array.from(root.querySelectorAll(FOCUSABLE)).filter((element) => !element.hasAttribute('inert') &&
+        element.offsetWidth + element.offsetHeight > 0 &&
+        getComputedStyle(element).visibility !== 'hidden');
+}
+/**
+ * Keeps Tab inside `root` while a modal drawer is open and restores focus to
+ * whatever was focused before. Small on purpose: no dependency on the CDK, and
+ * the only behaviours a navigation drawer needs.
+ */
+function trapFocus(root, options = {}) {
+    const previous = options.restoreTo ?? document.activeElement;
+    const onKeydown = (event) => {
+        if (event.key !== 'Tab') {
+            return;
+        }
+        const items = focusable(root);
+        if (!items.length) {
+            event.preventDefault();
+            root.focus();
+            return;
+        }
+        const first = items[0];
+        const last = items[items.length - 1];
+        const active = document.activeElement;
+        if (event.shiftKey && (active === first || !root.contains(active))) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    };
+    root.addEventListener('keydown', onKeydown);
+    // Focus the first control, or the panel itself when it has none yet.
+    (focusable(root)[0] ?? root).focus({ preventScroll: true });
+    return {
+        release() {
+            root.removeEventListener('keydown', onKeydown);
+            previous?.focus?.({ preventScroll: true });
+        },
+    };
+}
+
+/**
+ * Drop-in toggle. Works anywhere in the app — header, page, command palette —
+ * because it talks to the root store rather than to a parent component.
+ *
+ * ```html
+ * <button shellSidebarToggle class="icon-button">☰</button>
+ * ```
+ *
+ * Sets `aria-expanded`, `aria-controls` and an accessible label that tracks the
+ * current mode, so the same button reads correctly as a hamburger on mobile and
+ * as a collapse control on desktop.
+ */
+class SidebarToggleDirective {
+    store = inject(ShellStore);
+    sidebarId = SHELL_SIDEBAR_ID;
+    /** True when the sidebar is showing its full, labelled panel. */
+    expanded = computed(() => {
+        const state = this.store.sidebar();
+        return state.mode === 'expanded' || (state.mode === 'overlay' && state.open);
+    }, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    label = computed(() => {
+        const labels = this.store.config().labels;
+        const state = this.store.sidebar();
+        if (state.mode === 'overlay') {
+            return state.open ? labels.closeNavigation : labels.openNavigation;
+        }
+        return this.expanded() ? labels.collapseSidebar : labels.expandSidebar;
+    }, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SidebarToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: SidebarToggleDirective, isStandalone: true, selector: "button[shellSidebarToggle]", host: { attributes: { "type": "button" }, listeners: { "click": "store.toggleSidebar()" }, properties: { "attr.aria-controls": "sidebarId", "attr.aria-expanded": "expanded()", "attr.aria-label": "label()", "attr.title": "label()", "attr.data-sidebar-mode": "store.sidebar().mode" } }, exportAs: ["shellSidebarToggle"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SidebarToggleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[shellSidebarToggle]',
+                    exportAs: 'shellSidebarToggle',
+                    host: {
+                        type: 'button',
+                        '[attr.aria-controls]': 'sidebarId',
+                        '[attr.aria-expanded]': 'expanded()',
+                        '[attr.aria-label]': 'label()',
+                        '[attr.title]': 'label()',
+                        '[attr.data-sidebar-mode]': 'store.sidebar().mode',
+                        '(click)': 'store.toggleSidebar()',
+                    },
+                }]
+        }] });
+
+const RESIZE_STEP = 16;
+const RESIZE_STEP_LARGE = 48;
+/**
+ * Sidebar with four modes — `expanded`, `collapsed` (icon rail), `overlay`
+ * (modal drawer) and `hidden` — chosen by the injected `SidebarBehavior`
+ * rather than by this component. All this class does is render the resolved
+ * state and handle the mechanics each mode needs: peek timing, focus trapping,
+ * Escape, and drag-to-resize.
+ *
+ * Slot order, top to bottom:
+ *
+ *   sidebar-header      brand, workspace or account switcher
+ *   sidebar-action      one primary action ("New", "Compose")
+ *   sidebar-search      quick find / command palette launcher
+ *   sidebar-nav         the scrolling navigation (grows)
+ *   sidebar-secondary   settings, help, upgrade prompts
+ *   sidebar-footer      user card, storage meter — shares a row with the collapse control
+ */
+class ShellSidebarComponent {
+    host = inject(ElementRef);
+    panel = viewChild('panel', ...(ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []));
+    store = inject(ShellStore);
+    config = this.store.config;
+    /** Render the built-in expand/collapse control in the footer row. */
+    collapseControl = input(true, { ...(ngDevMode ? { debugName: "collapseControl" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    regionName = 'sidebar';
+    /**
+     * Measured on the *panel*, not the host: during a peek the panel is wider
+     * than the grid track it lives in. Exposed as `--shell-container-width`.
+     */
+    regionWidth = observeWidth(this.panel);
+    /**
+     * The sidebar reports a *semantic* bucket rather than a measured one. Its
+     * panel is a few hundred pixels wide in every mode, so raw widths would put
+     * it permanently in `xs` and make `slotMinSize` useless. The contract is:
+     *
+     *   rail (icons only)          → `xs`
+     *   panel / drawer (labels on) → `md`
+     *
+     * so `slotMinSize="sm"` on a sidebar slot reads as "only when labels show".
+     */
+    regionSize = computed(() => (this.state().labels ? 'md' : 'xs'), ...(ngDevMode ? [{ debugName: "regionSize" }] : /* istanbul ignore next */ []));
+    state = this.store.sidebar;
+    hasHeader = hasSlot('sidebar-header');
+    hasSecondary = hasSlot('sidebar-secondary');
+    hasFooterSlot = hasSlot('sidebar-footer');
+    /** The collapse control only makes sense for persistent panels. */
+    showCollapse = computed(() => {
+        const mode = this.state().mode;
+        return this.collapseControl() && (mode === 'expanded' || mode === 'collapsed');
+    }, ...(ngDevMode ? [{ debugName: "showCollapse" }] : /* istanbul ignore next */ []));
+    showFooter = computed(() => this.hasFooterSlot() || this.showCollapse(), ...(ngDevMode ? [{ debugName: "showFooter" }] : /* istanbul ignore next */ []));
+    containerWidth = computed(() => {
+        const width = this.regionWidth();
+        return width === null ? null : `${width}px`;
+    }, ...(ngDevMode ? [{ debugName: "containerWidth" }] : /* istanbul ignore next */ []));
+    /** Peek only makes sense on a rail, and only when configured. */
+    peekable = computed(() => this.config().sidebar.peek && this.state().mode === 'collapsed', ...(ngDevMode ? [{ debugName: "peekable" }] : /* istanbul ignore next */ []));
+    resizable = computed(() => this.config().sidebar.resizable && this.state().mode === 'expanded', ...(ngDevMode ? [{ debugName: "resizable" }] : /* istanbul ignore next */ []));
+    /** Current panel width in px for `aria-valuenow` and keyboard steps. */
+    resizeValue = computed(() => this.store.sidebarWidth() ?? this.regionWidth() ?? this.config().sidebar.minWidth, ...(ngDevMode ? [{ debugName: "resizeValue" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Trap focus for as long as the drawer is modal, and hand focus back on close.
+        effect((onCleanup) => {
+            const element = this.panel()?.nativeElement;
+            if (!this.state().modal || !element) {
+                return;
+            }
+            let handle;
+            const frame = requestAnimationFrame(() => (handle = trapFocus(element)));
+            onCleanup(() => {
+                cancelAnimationFrame(frame);
+                handle?.release();
+            });
+        });
+    }
+    // ── Peek ──────────────────────────────────────────────────────────────────
+    onPointerEnter() {
+        if (this.peekable()) {
+            this.store.requestPeek(true);
+        }
+    }
+    onPointerLeave() {
+        if (!this.store.resizing()) {
+            this.store.requestPeek(false);
+        }
+    }
+    /** Keyboard users get the same peek: focus entering the rail widens it. */
+    onFocusIn() {
+        if (this.peekable()) {
+            this.store.requestPeek(true);
+        }
+    }
+    onFocusOut(event) {
+        const next = event.relatedTarget;
+        if (!next || !this.panel()?.nativeElement.contains(next)) {
+            this.store.requestPeek(false);
+        }
+    }
+    onEscape() {
+        if (this.state().modal) {
+            this.store.closeSidebar();
+        }
+    }
+    // ── Resize ────────────────────────────────────────────────────────────────
+    onResizeStart(event) {
+        if (event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        this.store.setResizing(true);
+    }
+    onResizeMove(event) {
+        const panel = this.panel()?.nativeElement;
+        if (!this.store.resizing() || !panel) {
+            return;
+        }
+        // Measured from the grid track (the host), not the panel: a floating panel
+        // is inset from its track, and the handle must stay under the pointer.
+        const track = this.host.nativeElement.getBoundingClientRect();
+        const inset = Number.parseFloat(getComputedStyle(panel).marginInlineEnd) || 0;
+        const offset = this.isRtl(panel) ? track.right - event.clientX : event.clientX - track.left;
+        this.store.setSidebarWidth(offset + inset, { persist: false });
+    }
+    onResizeEnd(event) {
+        const handle = event.currentTarget;
+        if (handle.hasPointerCapture(event.pointerId)) {
+            handle.releasePointerCapture(event.pointerId);
+        }
+        if (this.store.resizing()) {
+            this.store.setResizing(false);
+            this.store.setSidebarWidth(this.store.sidebarWidth());
+        }
+    }
+    onResizeKey(event) {
+        const panel = this.panel()?.nativeElement;
+        if (!panel) {
+            return;
+        }
+        const { minWidth, maxWidth } = this.config().sidebar;
+        const step = event.shiftKey ? RESIZE_STEP_LARGE : RESIZE_STEP;
+        // "Right" grows the panel in LTR and shrinks it in RTL.
+        const grow = this.isRtl(panel) ? -step : step;
+        const current = this.resizeValue();
+        let next;
+        switch (event.key) {
+            case 'ArrowRight':
+                next = current + grow;
+                break;
+            case 'ArrowLeft':
+                next = current - grow;
+                break;
+            case 'Home':
+                next = minWidth;
+                break;
+            case 'End':
+                next = maxWidth;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        this.store.setSidebarWidth(next);
+    }
+    /** Double-click the handle to return to the configured width. */
+    onResizeReset() {
+        this.store.setSidebarWidth(null);
+    }
+    isRtl(element) {
+        return getComputedStyle(element).direction === 'rtl';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: ShellSidebarComponent, isStandalone: true, selector: "shell-sidebar", inputs: { collapseControl: { classPropertyName: "collapseControl", publicName: "collapseControl", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-mode": "state().mode", "attr.data-open": "state().open", "attr.data-labels": "state().labels", "attr.data-peeked": "state().peeked", "attr.data-shell-size": "regionSize()", "attr.data-resizing": "store.resizing() || null", "attr.data-variant": "config().appearance.sidebar", "attr.data-drawer-motion": "config().motion.drawer", "attr.inert": "state().open ? null : \"\"" } }, providers: [{ provide: SHELL_REGION, useExisting: ShellSidebarComponent }], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  `aside` wraps the panel so the drawer can slide and the rail can peek without\n  moving the grid track. Everything below reads from one resolved state object.\n-->\n<aside\n  #panel\n  class=\"sidebar__panel\"\n  [style.--shell-sidebar-panel-width]=\"state().panelWidth\"\n  [style.--shell-container-width]=\"containerWidth()\"\n  [attr.role]=\"state().modal ? 'dialog' : null\"\n  [attr.aria-modal]=\"state().modal ? 'true' : null\"\n  [attr.aria-label]=\"state().modal ? config().labels.primaryNavigation : null\"\n  [attr.tabindex]=\"state().modal ? -1 : null\"\n  (keydown.escape)=\"onEscape()\"\n  (pointerenter)=\"onPointerEnter()\"\n  (pointerleave)=\"onPointerLeave()\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut($event)\"\n>\n  @if (hasHeader()) {\n    <div class=\"sidebar__header\">\n      <shell-slot-outlet name=\"sidebar-header\" class=\"sidebar__header-slot\" />\n    </div>\n  }\n\n  <shell-slot-outlet name=\"sidebar-action\" class=\"sidebar__block\" />\n  <shell-slot-outlet name=\"sidebar-search\" class=\"sidebar__block\" />\n\n  <nav class=\"sidebar__nav\" [attr.aria-label]=\"config().labels.primaryNavigation\">\n    <shell-slot-outlet name=\"sidebar-nav\" class=\"sidebar__block\" />\n  </nav>\n\n  @if (hasSecondary()) {\n    <shell-slot-outlet name=\"sidebar-secondary\" class=\"sidebar__block sidebar__secondary\" />\n  }\n\n  @if (showFooter()) {\n    <div class=\"sidebar__footer\">\n      <shell-slot-outlet name=\"sidebar-footer\" class=\"sidebar__footer-slot\" />\n\n      @if (showCollapse()) {\n        <button shellSidebarToggle class=\"sidebar__collapse\">\n          <span class=\"sidebar__collapse-glyph\" aria-hidden=\"true\"></span>\n        </button>\n      }\n    </div>\n  }\n\n  @if (resizable()) {\n    <div\n      class=\"sidebar__resizer\"\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"config().labels.resizeSidebar\"\n      [attr.aria-valuemin]=\"config().sidebar.minWidth\"\n      [attr.aria-valuemax]=\"config().sidebar.maxWidth\"\n      [attr.aria-valuenow]=\"resizeValue()\"\n      (pointerdown)=\"onResizeStart($event)\"\n      (pointermove)=\"onResizeMove($event)\"\n      (pointerup)=\"onResizeEnd($event)\"\n      (pointercancel)=\"onResizeEnd($event)\"\n      (keydown)=\"onResizeKey($event)\"\n      (dblclick)=\"onResizeReset()\"\n    ></div>\n  }\n</aside>\n", styles: ["@charset \"UTF-8\";:host{--shell-drawer-offset: -100%;--shell-drawer-origin: left;display:block;position:relative;min-inline-size:0}:host-context([dir=rtl]){--shell-drawer-offset: 100%;--shell-drawer-origin: right}.sidebar__panel{position:sticky;inset-block-start:var(--shell-sidebar-top-offset, 0px);display:flex;flex-direction:column;gap:var(--shell-sidebar-gap, 2px);box-sizing:border-box;inline-size:var(--shell-sidebar-panel-width, var(--shell-sidebar-width, 264px));max-inline-size:100vw;block-size:var(--shell-sidebar-block-size, 100%);padding:var(--shell-sidebar-padding, 12px);border-inline-end:1px solid var(--shell-sidebar-border-color, var(--shell-border, #e6e6e9));border-radius:var(--shell-sidebar-radius, 0px);background:var(--shell-sidebar-bg, var(--shell-sidebar-surface, #fafafb));color:var(--shell-sidebar-fg, var(--shell-fg, #1b1c1f));box-shadow:var(--shell-sidebar-shadow, none);overflow:clip;transition:inline-size calc(var(--shell-collapse-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1)) var(--shell-collapse-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1))),box-shadow calc(var(--shell-sidebar-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1)) var(--shell-sidebar-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1))),background-color calc(var(--shell-sidebar-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1)) var(--shell-sidebar-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1))),transform calc(var(--shell-drawer-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1)) var(--shell-drawer-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1))),opacity calc(var(--shell-drawer-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1)) var(--shell-drawer-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1))),visibility calc(var(--shell-drawer-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1)) var(--shell-drawer-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.sidebar__panel{transition-duration:1ms}}:host([data-resizing]) .sidebar__panel{transition-duration:0s}:host([data-variant=borderless]) .sidebar__panel{border-inline-end-color:var(--shell-sidebar-border-color, transparent)}:host([data-variant=floating]:not([data-mode=overlay])) .sidebar__panel{--_inset: var(--shell-sidebar-inset, 8px);margin:var(--_inset);inline-size:calc(var(--shell-sidebar-panel-width, var(--shell-sidebar-width, 264px)) - 2 * var(--_inset));block-size:calc(var(--shell-sidebar-block-size, 100%) - 2 * var(--_inset));border:1px solid var(--shell-sidebar-border-color, var(--shell-border, #e6e6e9));border-radius:var(--shell-sidebar-radius, var(--shell-radius, 10px));box-shadow:var(--shell-sidebar-shadow, var(--shell-shadow-panel, 0 12px 32px -12px rgba(15, 17, 21, .28)))}:host([data-peeked=true]) .sidebar__panel{box-shadow:var(--shell-sidebar-peek-shadow, var(--shell-shadow-panel, 0 12px 32px -12px rgba(15, 17, 21, .28)))}:host([data-layout=inset]:not([data-mode=overlay]):not([data-variant=floating])) .sidebar__panel{border-inline-end-color:var(--shell-sidebar-border-color, transparent);background:var(--shell-sidebar-bg, transparent);box-shadow:var(--shell-sidebar-shadow, none)}:host([data-layout=inset][data-peeked=true]:not([data-variant=floating])) .sidebar__panel{background:var(--shell-sidebar-bg, var(--shell-sidebar-surface, #fafafb));box-shadow:var(--shell-sidebar-peek-shadow, var(--shell-shadow-panel, 0 12px 32px -12px rgba(15, 17, 21, .28)))}:host([data-mode=overlay]) .sidebar__panel{position:fixed;inset-block:0;inset-inline-start:0;block-size:100dvh;border-radius:0;border-start-end-radius:var(--shell-drawer-radius, 0px);border-end-end-radius:var(--shell-drawer-radius, 0px);background:var(--shell-drawer-bg, var(--shell-sidebar-bg, var(--shell-sidebar-surface, #fafafb)));transform-origin:var(--shell-drawer-origin) center;visibility:hidden}:host([data-mode=overlay][data-drawer-motion=slide]) .sidebar__panel{transform:translate(var(--shell-drawer-offset))}:host([data-mode=overlay][data-drawer-motion=fade]) .sidebar__panel{opacity:0}:host([data-mode=overlay][data-drawer-motion=scale]) .sidebar__panel{opacity:0;transform:scale(.94)}:host([data-mode=overlay][data-drawer-motion=none]) .sidebar__panel{transition-duration:0s}:host([data-mode=overlay][data-open=true]) .sidebar__panel{visibility:visible;opacity:1;transform:none;box-shadow:var(--shell-drawer-shadow, var(--shell-shadow-panel, 0 12px 32px -12px rgba(15, 17, 21, .28)))}:host([data-mode=hidden]){display:none}.sidebar__header{display:flex;align-items:center;flex:0 0 auto;min-block-size:calc(var(--shell-nav-item-height, 36px) + 6px)}.sidebar__header-slot{flex:1 1 auto}.sidebar__block{flex:0 0 auto;flex-direction:column;align-items:stretch;gap:var(--shell-sidebar-gap, 2px)}.sidebar__nav{display:flex;flex-direction:column;flex:1 1 auto;min-block-size:0;margin-inline:calc(-1 * var(--shell-sidebar-padding, 12px));padding-inline:var(--shell-sidebar-padding, 12px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.sidebar__secondary{padding-block-start:var(--shell-sidebar-gap, 2px)}.sidebar__footer{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding-block-start:8px;border-block-start:1px solid var(--shell-sidebar-border-color, var(--shell-border, #e6e6e9))}.sidebar__footer-slot{flex:1 1 auto;min-inline-size:0}.sidebar__collapse{display:grid;place-items:center;flex:0 0 auto;inline-size:32px;block-size:32px;margin-inline-start:auto;padding:0;border:0;border-radius:var(--shell-radius-sm, 6px);background:transparent;color:var(--shell-fg-muted, #6b6f76);cursor:pointer;transition-property:background-color,color;transition-duration:calc(var(--shell-sidebar-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-sidebar-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.sidebar__collapse{transition-duration:1ms}}.sidebar__collapse:focus-visible{outline:2px solid var(--shell-focus-ring, #4f46e5);outline-offset:2px}.sidebar__collapse:hover{background:var(--shell-hover-surface, #f0f0f3);color:var(--shell-sidebar-fg, var(--shell-fg, #1b1c1f))}.sidebar__collapse-glyph{inline-size:7px;block-size:7px;border-inline-start:2px solid currentcolor;border-block-end:2px solid currentcolor;transform:translate(1px) rotate(45deg);transition-property:transform;transition-duration:calc(var(--shell-collapse-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-collapse-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.sidebar__collapse-glyph{transition-duration:1ms}}:host([data-mode=collapsed]) .sidebar__collapse-glyph{transform:translate(-1px) rotate(-135deg)}:host-context([dir=rtl]) .sidebar__collapse-glyph{scale:-1 1}:host([data-labels=false]) .sidebar__panel{padding-inline:8px}:host([data-labels=false]) .sidebar__nav{margin-inline:-8px;padding-inline:8px}:host([data-labels=false]) .sidebar__footer{flex-direction:column}:host([data-labels=false]) .sidebar__collapse{margin-inline-start:0}.sidebar__resizer{position:absolute;inset-block:0;inset-inline-end:0;z-index:1;inline-size:6px;cursor:col-resize;touch-action:none}.sidebar__resizer:after{content:\"\";position:absolute;inset-block:0;inset-inline-end:0;inline-size:2px;background:transparent;transition-property:background-color;transition-duration:calc(var(--shell-sidebar-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-sidebar-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.sidebar__resizer:after{transition-duration:1ms}}.sidebar__resizer:hover:after,.sidebar__resizer:focus-visible:after{background:var(--shell-accent, #4f46e5)}.sidebar__resizer:focus-visible{outline:none}:host([data-resizing]) .sidebar__resizer:after{background:var(--shell-accent, #4f46e5)}\n"], dependencies: [{ kind: "component", type: ShellSlotOutletComponent, selector: "shell-slot-outlet", inputs: ["name", "select", "size"] }, { kind: "directive", type: SidebarToggleDirective, selector: "button[shellSidebarToggle]", exportAs: ["shellSidebarToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellSidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shell-sidebar', imports: [ShellSlotOutletComponent, SidebarToggleDirective], host: {
+                        '[attr.data-mode]': 'state().mode',
+                        '[attr.data-open]': 'state().open',
+                        '[attr.data-labels]': 'state().labels',
+                        '[attr.data-peeked]': 'state().peeked',
+                        '[attr.data-shell-size]': 'regionSize()',
+                        '[attr.data-resizing]': 'store.resizing() || null',
+                        '[attr.data-variant]': 'config().appearance.sidebar',
+                        '[attr.data-drawer-motion]': 'config().motion.drawer',
+                        '[attr.inert]': 'state().open ? null : ""',
+                    }, providers: [{ provide: SHELL_REGION, useExisting: ShellSidebarComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  `aside` wraps the panel so the drawer can slide and the rail can peek without\n  moving the grid track. Everything below reads from one resolved state object.\n-->\n<aside\n  #panel\n  class=\"sidebar__panel\"\n  [style.--shell-sidebar-panel-width]=\"state().panelWidth\"\n  [style.--shell-container-width]=\"containerWidth()\"\n  [attr.role]=\"state().modal ? 'dialog' : null\"\n  [attr.aria-modal]=\"state().modal ? 'true' : null\"\n  [attr.aria-label]=\"state().modal ? config().labels.primaryNavigation : null\"\n  [attr.tabindex]=\"state().modal ? -1 : null\"\n  (keydown.escape)=\"onEscape()\"\n  (pointerenter)=\"onPointerEnter()\"\n  (pointerleave)=\"onPointerLeave()\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut($event)\"\n>\n  @if (hasHeader()) {\n    <div class=\"sidebar__header\">\n      <shell-slot-outlet name=\"sidebar-header\" class=\"sidebar__header-slot\" />\n    </div>\n  }\n\n  <shell-slot-outlet name=\"sidebar-action\" class=\"sidebar__block\" />\n  <shell-slot-outlet name=\"sidebar-search\" class=\"sidebar__block\" />\n\n  <nav class=\"sidebar__nav\" [attr.aria-label]=\"config().labels.primaryNavigation\">\n    <shell-slot-outlet name=\"sidebar-nav\" class=\"sidebar__block\" />\n  </nav>\n\n  @if (hasSecondary()) {\n    <shell-slot-outlet name=\"sidebar-secondary\" class=\"sidebar__block sidebar__secondary\" />\n  }\n\n  @if (showFooter()) {\n    <div class=\"sidebar__footer\">\n      <shell-slot-outlet name=\"sidebar-footer\" class=\"sidebar__footer-slot\" />\n\n      @if (showCollapse()) {\n        <button shellSidebarToggle class=\"sidebar__collapse\">\n          <span class=\"sidebar__collapse-glyph\" aria-hidden=\"true\"></span>\n        </button>\n      }\n    </div>\n  }\n\n  @if (resizable()) {\n    <div\n      class=\"sidebar__resizer\"\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"config().labels.resizeSidebar\"\n      [attr.aria-valuemin]=\"config().sidebar.minWidth\"\n      [attr.aria-valuemax]=\"config().sidebar.maxWidth\"\n      [attr.aria-valuenow]=\"resizeValue()\"\n      (pointerdown)=\"onResizeStart($event)\"\n      (pointermove)=\"onResizeMove($event)\"\n      (pointerup)=\"onResizeEnd($event)\"\n      (pointercancel)=\"onResizeEnd($event)\"\n      (keydown)=\"onResizeKey($event)\"\n      (dblclick)=\"onResizeReset()\"\n    ></div>\n  }\n</aside>\n", styles: ["@charset \"UTF-8\";:host{--shell-drawer-offset: -100%;--shell-drawer-origin: left;display:block;position:relative;min-inline-size:0}:host-context([dir=rtl]){--shell-drawer-offset: 100%;--shell-drawer-origin: right}.sidebar__panel{position:sticky;inset-block-start:var(--shell-sidebar-top-offset, 0px);display:flex;flex-direction:column;gap:var(--shell-sidebar-gap, 2px);box-sizing:border-box;inline-size:var(--shell-sidebar-panel-width, var(--shell-sidebar-width, 264px));max-inline-size:100vw;block-size:var(--shell-sidebar-block-size, 100%);padding:var(--shell-sidebar-padding, 12px);border-inline-end:1px solid var(--shell-sidebar-border-color, var(--shell-border, #e6e6e9));border-radius:var(--shell-sidebar-radius, 0px);background:var(--shell-sidebar-bg, var(--shell-sidebar-surface, #fafafb));color:var(--shell-sidebar-fg, var(--shell-fg, #1b1c1f));box-shadow:var(--shell-sidebar-shadow, none);overflow:clip;transition:inline-size calc(var(--shell-collapse-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1)) var(--shell-collapse-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1))),box-shadow calc(var(--shell-sidebar-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1)) var(--shell-sidebar-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1))),background-color calc(var(--shell-sidebar-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1)) var(--shell-sidebar-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1))),transform calc(var(--shell-drawer-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1)) var(--shell-drawer-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1))),opacity calc(var(--shell-drawer-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1)) var(--shell-drawer-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1))),visibility calc(var(--shell-drawer-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1)) var(--shell-drawer-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.sidebar__panel{transition-duration:1ms}}:host([data-resizing]) .sidebar__panel{transition-duration:0s}:host([data-variant=borderless]) .sidebar__panel{border-inline-end-color:var(--shell-sidebar-border-color, transparent)}:host([data-variant=floating]:not([data-mode=overlay])) .sidebar__panel{--_inset: var(--shell-sidebar-inset, 8px);margin:var(--_inset);inline-size:calc(var(--shell-sidebar-panel-width, var(--shell-sidebar-width, 264px)) - 2 * var(--_inset));block-size:calc(var(--shell-sidebar-block-size, 100%) - 2 * var(--_inset));border:1px solid var(--shell-sidebar-border-color, var(--shell-border, #e6e6e9));border-radius:var(--shell-sidebar-radius, var(--shell-radius, 10px));box-shadow:var(--shell-sidebar-shadow, var(--shell-shadow-panel, 0 12px 32px -12px rgba(15, 17, 21, .28)))}:host([data-peeked=true]) .sidebar__panel{box-shadow:var(--shell-sidebar-peek-shadow, var(--shell-shadow-panel, 0 12px 32px -12px rgba(15, 17, 21, .28)))}:host([data-layout=inset]:not([data-mode=overlay]):not([data-variant=floating])) .sidebar__panel{border-inline-end-color:var(--shell-sidebar-border-color, transparent);background:var(--shell-sidebar-bg, transparent);box-shadow:var(--shell-sidebar-shadow, none)}:host([data-layout=inset][data-peeked=true]:not([data-variant=floating])) .sidebar__panel{background:var(--shell-sidebar-bg, var(--shell-sidebar-surface, #fafafb));box-shadow:var(--shell-sidebar-peek-shadow, var(--shell-shadow-panel, 0 12px 32px -12px rgba(15, 17, 21, .28)))}:host([data-mode=overlay]) .sidebar__panel{position:fixed;inset-block:0;inset-inline-start:0;block-size:100dvh;border-radius:0;border-start-end-radius:var(--shell-drawer-radius, 0px);border-end-end-radius:var(--shell-drawer-radius, 0px);background:var(--shell-drawer-bg, var(--shell-sidebar-bg, var(--shell-sidebar-surface, #fafafb)));transform-origin:var(--shell-drawer-origin) center;visibility:hidden}:host([data-mode=overlay][data-drawer-motion=slide]) .sidebar__panel{transform:translate(var(--shell-drawer-offset))}:host([data-mode=overlay][data-drawer-motion=fade]) .sidebar__panel{opacity:0}:host([data-mode=overlay][data-drawer-motion=scale]) .sidebar__panel{opacity:0;transform:scale(.94)}:host([data-mode=overlay][data-drawer-motion=none]) .sidebar__panel{transition-duration:0s}:host([data-mode=overlay][data-open=true]) .sidebar__panel{visibility:visible;opacity:1;transform:none;box-shadow:var(--shell-drawer-shadow, var(--shell-shadow-panel, 0 12px 32px -12px rgba(15, 17, 21, .28)))}:host([data-mode=hidden]){display:none}.sidebar__header{display:flex;align-items:center;flex:0 0 auto;min-block-size:calc(var(--shell-nav-item-height, 36px) + 6px)}.sidebar__header-slot{flex:1 1 auto}.sidebar__block{flex:0 0 auto;flex-direction:column;align-items:stretch;gap:var(--shell-sidebar-gap, 2px)}.sidebar__nav{display:flex;flex-direction:column;flex:1 1 auto;min-block-size:0;margin-inline:calc(-1 * var(--shell-sidebar-padding, 12px));padding-inline:var(--shell-sidebar-padding, 12px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.sidebar__secondary{padding-block-start:var(--shell-sidebar-gap, 2px)}.sidebar__footer{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding-block-start:8px;border-block-start:1px solid var(--shell-sidebar-border-color, var(--shell-border, #e6e6e9))}.sidebar__footer-slot{flex:1 1 auto;min-inline-size:0}.sidebar__collapse{display:grid;place-items:center;flex:0 0 auto;inline-size:32px;block-size:32px;margin-inline-start:auto;padding:0;border:0;border-radius:var(--shell-radius-sm, 6px);background:transparent;color:var(--shell-fg-muted, #6b6f76);cursor:pointer;transition-property:background-color,color;transition-duration:calc(var(--shell-sidebar-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-sidebar-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.sidebar__collapse{transition-duration:1ms}}.sidebar__collapse:focus-visible{outline:2px solid var(--shell-focus-ring, #4f46e5);outline-offset:2px}.sidebar__collapse:hover{background:var(--shell-hover-surface, #f0f0f3);color:var(--shell-sidebar-fg, var(--shell-fg, #1b1c1f))}.sidebar__collapse-glyph{inline-size:7px;block-size:7px;border-inline-start:2px solid currentcolor;border-block-end:2px solid currentcolor;transform:translate(1px) rotate(45deg);transition-property:transform;transition-duration:calc(var(--shell-collapse-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-collapse-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.sidebar__collapse-glyph{transition-duration:1ms}}:host([data-mode=collapsed]) .sidebar__collapse-glyph{transform:translate(-1px) rotate(-135deg)}:host-context([dir=rtl]) .sidebar__collapse-glyph{scale:-1 1}:host([data-labels=false]) .sidebar__panel{padding-inline:8px}:host([data-labels=false]) .sidebar__nav{margin-inline:-8px;padding-inline:8px}:host([data-labels=false]) .sidebar__footer{flex-direction:column}:host([data-labels=false]) .sidebar__collapse{margin-inline-start:0}.sidebar__resizer{position:absolute;inset-block:0;inset-inline-end:0;z-index:1;inline-size:6px;cursor:col-resize;touch-action:none}.sidebar__resizer:after{content:\"\";position:absolute;inset-block:0;inset-inline-end:0;inline-size:2px;background:transparent;transition-property:background-color;transition-duration:calc(var(--shell-sidebar-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-sidebar-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.sidebar__resizer:after{transition-duration:1ms}}.sidebar__resizer:hover:after,.sidebar__resizer:focus-visible:after{background:var(--shell-accent, #4f46e5)}.sidebar__resizer:focus-visible{outline:none}:host([data-resizing]) .sidebar__resizer:after{background:var(--shell-accent, #4f46e5)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], collapseControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseControl", required: false }] }] } });
+
+let nextId = 0;
+/**
+ * The shell's ⋯ menu: a disclosure button plus a panel for projected content.
+ * Shared by the topbar, the breadcrumb row and the breadcrumb's folded levels,
+ * so behaviour, motion and accessibility live in one place.
+ *
+ * The panel stays mounted so it can animate out as well as in; while closed it
+ * is invisible and `inert`. It closes on Escape (returning focus to the
+ * trigger), on a press outside, and after a link or button inside is used.
+ */
+class ShellOverflowMenuComponent {
+    /** Accessible name and tooltip of the trigger. */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Which edge of the trigger the panel lines up with. */
+    align = input('end', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    trigger = viewChild.required('trigger');
+    store = inject(ShellStore);
+    motion = computed(() => this.store.config().motion.overflowMenu, ...(ngDevMode ? [{ debugName: "motion" }] : /* istanbul ignore next */ []));
+    panelId = `shell-overflow-menu-${nextId++}`;
+    openState = signal(false, ...(ngDevMode ? [{ debugName: "openState" }] : /* istanbul ignore next */ []));
+    open = this.openState.asReadonly();
+    toggle() {
+        this.openState.update((open) => !open);
+    }
+    close(restoreFocus = false) {
+        if (!this.openState()) {
+            return;
+        }
+        this.openState.set(false);
+        if (restoreFocus) {
+            this.trigger().nativeElement.focus();
+        }
+    }
+    onDocumentPointerDown(event) {
+        if (!this.host.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    /** Activating anything inside the menu is a choice; close behind it. */
+    onPanelClick(event) {
+        if (event.target.closest('a[href], button:not([aria-haspopup])')) {
+            this.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellOverflowMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.23", type: ShellOverflowMenuComponent, isStandalone: true, selector: "shell-overflow-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "close(true)", "document:pointerdown": "onDocumentPointerDown($event)" }, properties: { "attr.data-align": "align()", "attr.data-menu-motion": "motion()" } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  #trigger\n  type=\"button\"\n  class=\"shell-menu__trigger\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"panelId\"\n  [attr.aria-label]=\"label()\"\n  [attr.title]=\"label()\"\n  (click)=\"toggle()\"\n>\n  <span class=\"shell-menu__glyph\" aria-hidden=\"true\"></span>\n</button>\n\n<div\n  class=\"shell-menu__panel\"\n  [id]=\"panelId\"\n  [attr.data-open]=\"open()\"\n  [attr.inert]=\"open() ? null : ''\"\n  (click)=\"onPanelClick($event)\"\n>\n  <ng-content />\n</div>\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-flex;flex:0 0 auto}.shell-menu__trigger{display:grid;place-items:center;inline-size:var(--shell-overflow-trigger-size, 38px);block-size:var(--shell-overflow-trigger-size, 38px);padding:0;border:0;border-radius:var(--shell-radius-sm, 6px);background:transparent;color:inherit;cursor:pointer;transition-property:background-color;transition-duration:calc(var(--shell-menu-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-menu-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.shell-menu__trigger{transition-duration:1ms}}.shell-menu__trigger:focus-visible{outline:2px solid var(--shell-focus-ring, #4f46e5);outline-offset:2px}.shell-menu__trigger:hover{background:var(--shell-hover-surface, #f0f0f3)}.shell-menu__trigger[aria-expanded=true]{background:var(--shell-active-surface, #e9e9ee)}.shell-menu__glyph{inline-size:4px;block-size:4px;border-radius:50%;background:currentcolor;box-shadow:-7px 0 0 currentcolor,7px 0 0 currentcolor}.shell-menu__panel{position:absolute;inset-inline-end:0;inset-block-start:calc(100% + 6px);z-index:var(--shell-z-flyout, 50);display:flex;flex-direction:column;gap:4px;min-inline-size:220px;max-inline-size:min(90vw,320px);padding:8px;border:1px solid var(--shell-menu-border-color, var(--shell-border, #e6e6e9));border-radius:var(--shell-menu-radius, var(--shell-radius, 10px));background:var(--shell-menu-bg, var(--shell-surface, #ffffff));color:var(--shell-fg, #1b1c1f);box-shadow:var(--shell-menu-shadow, var(--shell-shadow-panel, 0 12px 32px -12px rgba(15, 17, 21, .28)));transform-origin:top right;transition-property:opacity,transform,visibility;transition-duration:calc(var(--shell-menu-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-menu-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.shell-menu__panel{transition-duration:1ms}}.shell-menu__panel[data-open=false]{opacity:0;visibility:hidden;pointer-events:none}:host([data-align=start]) .shell-menu__panel{inset-inline-start:0;inset-inline-end:auto;transform-origin:top left}:host-context([dir=rtl]) .shell-menu__panel{transform-origin:top left}:host([data-menu-motion=scale]) .shell-menu__panel[data-open=false]{transform:scale(.95)}:host([data-menu-motion=slide]) .shell-menu__panel[data-open=false]{transform:translateY(-8px)}:host([data-menu-motion=none]) .shell-menu__panel{transition-duration:0s}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellOverflowMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shell-overflow-menu', host: {
+                        '[attr.data-align]': 'align()',
+                        '[attr.data-menu-motion]': 'motion()',
+                        '(keydown.escape)': 'close(true)',
+                        '(document:pointerdown)': 'onDocumentPointerDown($event)',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  #trigger\n  type=\"button\"\n  class=\"shell-menu__trigger\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"panelId\"\n  [attr.aria-label]=\"label()\"\n  [attr.title]=\"label()\"\n  (click)=\"toggle()\"\n>\n  <span class=\"shell-menu__glyph\" aria-hidden=\"true\"></span>\n</button>\n\n<div\n  class=\"shell-menu__panel\"\n  [id]=\"panelId\"\n  [attr.data-open]=\"open()\"\n  [attr.inert]=\"open() ? null : ''\"\n  (click)=\"onPanelClick($event)\"\n>\n  <ng-content />\n</div>\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-flex;flex:0 0 auto}.shell-menu__trigger{display:grid;place-items:center;inline-size:var(--shell-overflow-trigger-size, 38px);block-size:var(--shell-overflow-trigger-size, 38px);padding:0;border:0;border-radius:var(--shell-radius-sm, 6px);background:transparent;color:inherit;cursor:pointer;transition-property:background-color;transition-duration:calc(var(--shell-menu-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-menu-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.shell-menu__trigger{transition-duration:1ms}}.shell-menu__trigger:focus-visible{outline:2px solid var(--shell-focus-ring, #4f46e5);outline-offset:2px}.shell-menu__trigger:hover{background:var(--shell-hover-surface, #f0f0f3)}.shell-menu__trigger[aria-expanded=true]{background:var(--shell-active-surface, #e9e9ee)}.shell-menu__glyph{inline-size:4px;block-size:4px;border-radius:50%;background:currentcolor;box-shadow:-7px 0 0 currentcolor,7px 0 0 currentcolor}.shell-menu__panel{position:absolute;inset-inline-end:0;inset-block-start:calc(100% + 6px);z-index:var(--shell-z-flyout, 50);display:flex;flex-direction:column;gap:4px;min-inline-size:220px;max-inline-size:min(90vw,320px);padding:8px;border:1px solid var(--shell-menu-border-color, var(--shell-border, #e6e6e9));border-radius:var(--shell-menu-radius, var(--shell-radius, 10px));background:var(--shell-menu-bg, var(--shell-surface, #ffffff));color:var(--shell-fg, #1b1c1f);box-shadow:var(--shell-menu-shadow, var(--shell-shadow-panel, 0 12px 32px -12px rgba(15, 17, 21, .28)));transform-origin:top right;transition-property:opacity,transform,visibility;transition-duration:calc(var(--shell-menu-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-menu-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.shell-menu__panel{transition-duration:1ms}}.shell-menu__panel[data-open=false]{opacity:0;visibility:hidden;pointer-events:none}:host([data-align=start]) .shell-menu__panel{inset-inline-start:0;inset-inline-end:auto;transform-origin:top left}:host-context([dir=rtl]) .shell-menu__panel{transform-origin:top left}:host([data-menu-motion=scale]) .shell-menu__panel[data-open=false]{transform:scale(.95)}:host([data-menu-motion=slide]) .shell-menu__panel[data-open=false]{transform:translateY(-8px)}:host([data-menu-motion=none]) .shell-menu__panel{transition-duration:0s}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
+
+/**
+ * Breadcrumb trail, following the WAI-ARIA breadcrumb pattern:
+ * `<nav aria-label>` › `<ol>` › links, the current page as text with
+ * `aria-current="page"`, and CSS separators that screen readers skip.
+ *
+ * Renders the router-derived trail from `ShellBreadcrumbStore`, or `[items]`.
+ * It measures its own width and shortens itself instead of wrapping:
+ * full → middle levels folded into "…" → first › … › parent › current →
+ * a single "‹ Parent" back link.
+ */
+class ShellBreadcrumbComponent {
+    /** A manual trail. Leave unset to follow the router. */
+    items = input(null, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Overrides `breadcrumbs.maxItems` for this instance. */
+    maxItems = input(null, ...(ngDevMode ? [{ debugName: "maxItems" }] : /* istanbul ignore next */ []));
+    /** Force a layout instead of choosing one from the available width. */
+    display = input('auto', ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
+    /** Custom crumb content; the link and `aria-current` stay the library's. */
+    itemTemplate = input(null, ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+    store = inject(ShellBreadcrumbStore);
+    shell = inject(ShellStore);
+    width = observeWidth(inject(ElementRef));
+    options = computed(() => this.shell.config().breadcrumbs, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    separator = computed(() => this.options().separator, ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    labels = computed(() => this.shell.config().labels, ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    crumbs = computed(() => this.items() ?? this.store.crumbs(), ...(ngDevMode ? [{ debugName: "crumbs" }] : /* istanbul ignore next */ []));
+    mode = computed(() => {
+        const forced = this.display();
+        if (forced !== 'auto') {
+            return forced;
+        }
+        const width = this.width();
+        if (width === null) {
+            return 'full';
+        }
+        const { backBelow, compactBelow } = this.options();
+        return width < backBelow ? 'back' : width < compactBelow ? 'compact' : 'full';
+    }, ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    view = computed(() => {
+        const crumbs = this.crumbs();
+        // compact = first › … › parent › current
+        const limit = this.mode() === 'compact' ? 3 : Math.max(2, this.maxItems() ?? this.options().maxItems);
+        if (crumbs.length <= limit) {
+            return { head: crumbs, hidden: [], tail: [] };
+        }
+        const tailCount = limit - 1;
+        return {
+            head: crumbs.slice(0, 1),
+            hidden: crumbs.slice(1, crumbs.length - tailCount),
+            tail: crumbs.slice(crumbs.length - tailCount),
+        };
+    }, ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+    /** Target of the "‹ Parent" link: the level just above the current page. */
+    parent = computed(() => {
+        const crumbs = this.crumbs();
+        const current = crumbs.findIndex((crumb) => crumb.current);
+        if (current === -1) {
+            return crumbs.at(-1) ?? null;
+        }
+        return current > 0 ? crumbs[current - 1] : null;
+    }, ...(ngDevMode ? [{ debugName: "parent" }] : /* istanbul ignore next */ []));
+    pending = computed(() => this.crumbs().some((crumb) => crumb.label === null), ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
+    /** Fast labels never flash a skeleton: it only shows after `skeletonDelay`. */
+    delayElapsed = signal(false, ...(ngDevMode ? [{ debugName: "delayElapsed" }] : /* istanbul ignore next */ []));
+    skeletonShown = computed(() => this.pending() && (this.options().skeletonDelay <= 0 || this.delayElapsed()), ...(ngDevMode ? [{ debugName: "skeletonShown" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect((onCleanup) => {
+            if (!this.pending()) {
+                this.delayElapsed.set(false);
+                return;
+            }
+            const timer = setTimeout(() => this.delayElapsed.set(true), this.options().skeletonDelay);
+            onCleanup(() => clearTimeout(timer));
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: ShellBreadcrumbComponent, isStandalone: true, selector: "shell-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-display": "mode()", "attr.data-separator": "separator()" } }, ngImport: i0, template: "<nav class=\"crumbs\" [attr.aria-label]=\"labels().breadcrumb\">\n  @if (mode() === 'back') {\n    @if (parent(); as target) {\n      <a\n        class=\"crumbs__back\"\n        [routerLink]=\"target.url\"\n        [attr.aria-label]=\"labels().back + ' ' + (target.label ?? '')\"\n      >\n        <span class=\"crumbs__back-glyph\" aria-hidden=\"true\"></span>\n        <ng-container *ngTemplateOutlet=\"labelTemplate; context: { $implicit: target }\" />\n      </a>\n    } @else if (crumbs()[0]; as only) {\n      <span class=\"crumbs__current\" aria-current=\"page\">\n        <ng-container *ngTemplateOutlet=\"labelTemplate; context: { $implicit: only }\" />\n      </span>\n    }\n  } @else {\n    @let trail = view();\n    <ol class=\"crumbs__list\" [attr.aria-busy]=\"pending() ? 'true' : null\">\n      @for (crumb of trail.head; track crumb.url) {\n        <li class=\"crumbs__item\">\n          <ng-container *ngTemplateOutlet=\"crumbTemplate; context: { $implicit: crumb }\" />\n        </li>\n      }\n\n      @if (trail.hidden.length) {\n        <li class=\"crumbs__item crumbs__item--more\">\n          <shell-overflow-menu class=\"crumbs__more\" align=\"start\" [label]=\"labels().showPath\">\n            @for (crumb of trail.hidden; track crumb.url) {\n              <a class=\"crumbs__menu-link\" [routerLink]=\"crumb.url\">{{ crumb.label }}</a>\n            }\n          </shell-overflow-menu>\n        </li>\n      }\n\n      @for (crumb of trail.tail; track crumb.url) {\n        <li class=\"crumbs__item\">\n          <ng-container *ngTemplateOutlet=\"crumbTemplate; context: { $implicit: crumb }\" />\n        </li>\n      }\n    </ol>\n  }\n\n  @if (pending()) {\n    <span class=\"crumbs__sr\">{{ labels().loading }}</span>\n  }\n</nav>\n\n<ng-template #crumbTemplate let-crumb>\n  @if (crumb.current) {\n    <span class=\"crumbs__current\" aria-current=\"page\">\n      <ng-container *ngTemplateOutlet=\"labelTemplate; context: { $implicit: crumb }\" />\n    </span>\n  } @else {\n    <a class=\"crumbs__link\" [routerLink]=\"crumb.url\">\n      <ng-container *ngTemplateOutlet=\"labelTemplate; context: { $implicit: crumb }\" />\n    </a>\n  }\n</ng-template>\n\n<!--\n  A pending label is a placeholder: it reserves its width from the start, and\n  only becomes a visible skeleton once `skeletonDelay` has passed.\n-->\n<ng-template #labelTemplate let-crumb>\n  @if (crumb.label === null) {\n    <span class=\"crumbs__skeleton\" [class.crumbs__skeleton--shown]=\"skeletonShown()\" aria-hidden=\"true\"></span>\n  } @else if (itemTemplate(); as custom) {\n    <ng-container *ngTemplateOutlet=\"custom; context: { $implicit: crumb, crumb: crumb }\" />\n  } @else {\n    <span class=\"crumbs__label\">{{ crumb.label }}</span>\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;min-inline-size:0;font-size:var(--shell-breadcrumb-font-size, 1em)}.crumbs{display:flex;align-items:center;min-inline-size:0}.crumbs__list{display:flex;align-items:center;gap:var(--shell-breadcrumb-gap, 4px);min-inline-size:0;margin:0;padding:0;list-style:none;white-space:nowrap}.crumbs__item{display:flex;align-items:center;gap:var(--shell-breadcrumb-gap, 4px);flex:0 3 auto;min-inline-size:0}.crumbs__item:last-child{flex-shrink:1}.crumbs__item+.crumbs__item:before{content:\"\";flex:0 0 auto;inline-size:5px;block-size:5px;margin-inline:2px 3px;border-block-start:1.5px solid var(--shell-breadcrumb-separator-color, var(--shell-fg-muted, #6b6f76));border-right:1.5px solid var(--shell-breadcrumb-separator-color, var(--shell-fg-muted, #6b6f76));transform:rotate(45deg)}:host-context([dir=rtl]) .crumbs__item+.crumbs__item:before{transform:rotate(-135deg)}:host([data-separator=slash]) .crumbs__item+.crumbs__item:before,:host([data-separator=dot]) .crumbs__item+.crumbs__item:before{inline-size:auto;block-size:auto;margin-inline:1px 2px;border:0;color:var(--shell-breadcrumb-separator-color, var(--shell-fg-muted, #6b6f76));line-height:1;transform:none}:host([data-separator=slash]) .crumbs__item+.crumbs__item:before{content:\"/\" / \"\"}:host([data-separator=dot]) .crumbs__item+.crumbs__item:before{content:\"\\b7\" / \"\";font-weight:700}.crumbs__link,.crumbs__current,.crumbs__back{display:inline-flex;align-items:center;gap:6px;min-inline-size:0;max-inline-size:var(--shell-breadcrumb-label-max, 28ch);padding:2px 4px;border-radius:var(--shell-radius-sm, 6px)}.crumbs__link,.crumbs__back{color:var(--shell-breadcrumb-fg, var(--shell-fg-muted, #6b6f76));text-decoration:none;transition-property:color,background-color;transition-duration:calc(var(--shell-subheader-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-subheader-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.crumbs__link,.crumbs__back{transition-duration:1ms}}.crumbs__link:focus-visible,.crumbs__back:focus-visible{outline:2px solid var(--shell-focus-ring, #4f46e5);outline-offset:0}.crumbs__link:hover,.crumbs__back:hover{color:var(--shell-breadcrumb-hover-fg, var(--shell-fg, #1b1c1f));background:var(--shell-breadcrumb-hover-bg, var(--shell-hover-surface, #f0f0f3))}.crumbs__current{color:var(--shell-breadcrumb-current-fg, var(--shell-fg, #1b1c1f));font-weight:var(--shell-breadcrumb-current-weight, 600)}.crumbs__label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.crumbs__back-glyph{flex:0 0 auto;inline-size:6px;block-size:6px;border-block-end:1.5px solid currentcolor;border-left:1.5px solid currentcolor;transform:rotate(45deg)}:host-context([dir=rtl]) .crumbs__back-glyph{transform:rotate(-135deg)}.crumbs__more{--shell-overflow-trigger-size: 26px}.crumbs__menu-link{display:block;padding:7px 10px;border-radius:var(--shell-radius-sm, 6px);color:var(--shell-fg, #1b1c1f);text-decoration:none;white-space:nowrap}.crumbs__menu-link:focus-visible{outline:2px solid var(--shell-focus-ring, #4f46e5);outline-offset:-2px}.crumbs__menu-link:hover{background:var(--shell-hover-surface, #f0f0f3)}.crumbs__skeleton{display:inline-block;inline-size:9ch;block-size:.85em;border-radius:999px;background:var(--shell-breadcrumb-skeleton-bg, var(--shell-active-surface, #e9e9ee));visibility:hidden}.crumbs__skeleton--shown{visibility:visible;animation:crumbs-pulse calc(1.6s * var(--shell-motion-scale, 1)) ease-in-out infinite}@media(prefers-reduced-motion:reduce){.crumbs__skeleton--shown{animation:none}}@keyframes crumbs-pulse{50%{opacity:.45}}.crumbs__sr{position:absolute;inline-size:1px;block-size:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ShellOverflowMenuComponent, selector: "shell-overflow-menu", inputs: ["label", "align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shell-breadcrumb', imports: [NgTemplateOutlet, RouterLink, ShellOverflowMenuComponent], host: {
+                        '[attr.data-display]': 'mode()',
+                        '[attr.data-separator]': 'separator()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"crumbs\" [attr.aria-label]=\"labels().breadcrumb\">\n  @if (mode() === 'back') {\n    @if (parent(); as target) {\n      <a\n        class=\"crumbs__back\"\n        [routerLink]=\"target.url\"\n        [attr.aria-label]=\"labels().back + ' ' + (target.label ?? '')\"\n      >\n        <span class=\"crumbs__back-glyph\" aria-hidden=\"true\"></span>\n        <ng-container *ngTemplateOutlet=\"labelTemplate; context: { $implicit: target }\" />\n      </a>\n    } @else if (crumbs()[0]; as only) {\n      <span class=\"crumbs__current\" aria-current=\"page\">\n        <ng-container *ngTemplateOutlet=\"labelTemplate; context: { $implicit: only }\" />\n      </span>\n    }\n  } @else {\n    @let trail = view();\n    <ol class=\"crumbs__list\" [attr.aria-busy]=\"pending() ? 'true' : null\">\n      @for (crumb of trail.head; track crumb.url) {\n        <li class=\"crumbs__item\">\n          <ng-container *ngTemplateOutlet=\"crumbTemplate; context: { $implicit: crumb }\" />\n        </li>\n      }\n\n      @if (trail.hidden.length) {\n        <li class=\"crumbs__item crumbs__item--more\">\n          <shell-overflow-menu class=\"crumbs__more\" align=\"start\" [label]=\"labels().showPath\">\n            @for (crumb of trail.hidden; track crumb.url) {\n              <a class=\"crumbs__menu-link\" [routerLink]=\"crumb.url\">{{ crumb.label }}</a>\n            }\n          </shell-overflow-menu>\n        </li>\n      }\n\n      @for (crumb of trail.tail; track crumb.url) {\n        <li class=\"crumbs__item\">\n          <ng-container *ngTemplateOutlet=\"crumbTemplate; context: { $implicit: crumb }\" />\n        </li>\n      }\n    </ol>\n  }\n\n  @if (pending()) {\n    <span class=\"crumbs__sr\">{{ labels().loading }}</span>\n  }\n</nav>\n\n<ng-template #crumbTemplate let-crumb>\n  @if (crumb.current) {\n    <span class=\"crumbs__current\" aria-current=\"page\">\n      <ng-container *ngTemplateOutlet=\"labelTemplate; context: { $implicit: crumb }\" />\n    </span>\n  } @else {\n    <a class=\"crumbs__link\" [routerLink]=\"crumb.url\">\n      <ng-container *ngTemplateOutlet=\"labelTemplate; context: { $implicit: crumb }\" />\n    </a>\n  }\n</ng-template>\n\n<!--\n  A pending label is a placeholder: it reserves its width from the start, and\n  only becomes a visible skeleton once `skeletonDelay` has passed.\n-->\n<ng-template #labelTemplate let-crumb>\n  @if (crumb.label === null) {\n    <span class=\"crumbs__skeleton\" [class.crumbs__skeleton--shown]=\"skeletonShown()\" aria-hidden=\"true\"></span>\n  } @else if (itemTemplate(); as custom) {\n    <ng-container *ngTemplateOutlet=\"custom; context: { $implicit: crumb, crumb: crumb }\" />\n  } @else {\n    <span class=\"crumbs__label\">{{ crumb.label }}</span>\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;min-inline-size:0;font-size:var(--shell-breadcrumb-font-size, 1em)}.crumbs{display:flex;align-items:center;min-inline-size:0}.crumbs__list{display:flex;align-items:center;gap:var(--shell-breadcrumb-gap, 4px);min-inline-size:0;margin:0;padding:0;list-style:none;white-space:nowrap}.crumbs__item{display:flex;align-items:center;gap:var(--shell-breadcrumb-gap, 4px);flex:0 3 auto;min-inline-size:0}.crumbs__item:last-child{flex-shrink:1}.crumbs__item+.crumbs__item:before{content:\"\";flex:0 0 auto;inline-size:5px;block-size:5px;margin-inline:2px 3px;border-block-start:1.5px solid var(--shell-breadcrumb-separator-color, var(--shell-fg-muted, #6b6f76));border-right:1.5px solid var(--shell-breadcrumb-separator-color, var(--shell-fg-muted, #6b6f76));transform:rotate(45deg)}:host-context([dir=rtl]) .crumbs__item+.crumbs__item:before{transform:rotate(-135deg)}:host([data-separator=slash]) .crumbs__item+.crumbs__item:before,:host([data-separator=dot]) .crumbs__item+.crumbs__item:before{inline-size:auto;block-size:auto;margin-inline:1px 2px;border:0;color:var(--shell-breadcrumb-separator-color, var(--shell-fg-muted, #6b6f76));line-height:1;transform:none}:host([data-separator=slash]) .crumbs__item+.crumbs__item:before{content:\"/\" / \"\"}:host([data-separator=dot]) .crumbs__item+.crumbs__item:before{content:\"\\b7\" / \"\";font-weight:700}.crumbs__link,.crumbs__current,.crumbs__back{display:inline-flex;align-items:center;gap:6px;min-inline-size:0;max-inline-size:var(--shell-breadcrumb-label-max, 28ch);padding:2px 4px;border-radius:var(--shell-radius-sm, 6px)}.crumbs__link,.crumbs__back{color:var(--shell-breadcrumb-fg, var(--shell-fg-muted, #6b6f76));text-decoration:none;transition-property:color,background-color;transition-duration:calc(var(--shell-subheader-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-subheader-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.crumbs__link,.crumbs__back{transition-duration:1ms}}.crumbs__link:focus-visible,.crumbs__back:focus-visible{outline:2px solid var(--shell-focus-ring, #4f46e5);outline-offset:0}.crumbs__link:hover,.crumbs__back:hover{color:var(--shell-breadcrumb-hover-fg, var(--shell-fg, #1b1c1f));background:var(--shell-breadcrumb-hover-bg, var(--shell-hover-surface, #f0f0f3))}.crumbs__current{color:var(--shell-breadcrumb-current-fg, var(--shell-fg, #1b1c1f));font-weight:var(--shell-breadcrumb-current-weight, 600)}.crumbs__label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.crumbs__back-glyph{flex:0 0 auto;inline-size:6px;block-size:6px;border-block-end:1.5px solid currentcolor;border-left:1.5px solid currentcolor;transform:rotate(45deg)}:host-context([dir=rtl]) .crumbs__back-glyph{transform:rotate(-135deg)}.crumbs__more{--shell-overflow-trigger-size: 26px}.crumbs__menu-link{display:block;padding:7px 10px;border-radius:var(--shell-radius-sm, 6px);color:var(--shell-fg, #1b1c1f);text-decoration:none;white-space:nowrap}.crumbs__menu-link:focus-visible{outline:2px solid var(--shell-focus-ring, #4f46e5);outline-offset:-2px}.crumbs__menu-link:hover{background:var(--shell-hover-surface, #f0f0f3)}.crumbs__skeleton{display:inline-block;inline-size:9ch;block-size:.85em;border-radius:999px;background:var(--shell-breadcrumb-skeleton-bg, var(--shell-active-surface, #e9e9ee));visibility:hidden}.crumbs__skeleton--shown{visibility:visible;animation:crumbs-pulse calc(1.6s * var(--shell-motion-scale, 1)) ease-in-out infinite}@media(prefers-reduced-motion:reduce){.crumbs__skeleton--shown{animation:none}}@keyframes crumbs-pulse{50%{opacity:.45}}.crumbs__sr{position:absolute;inline-size:1px;block-size:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], maxItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItems", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }] } });
+
+/**
+ * The breadcrumb row, between the topbar and `main`.
+ *
+ *   [breadcrumb | built-in trail] [subheader-start] ········ [subheader-end] [⋯]
+ *
+ * A measured region like the topbar: `subheader-end` templates use
+ * `slotMinSize` / `slotOverflow` against the row's own width and move into
+ * the row's ⋯ menu when they don't fit. Its minimum height is reserved, so
+ * labels and actions that arrive late never shift the page.
+ */
+class ShellSubheaderComponent {
+    region = measureRegion(inject(ElementRef));
+    registry = inject(ShellSlotRegistry);
+    config = inject(ShellStore).config;
+    regionName = 'subheader';
+    regionWidth = this.region.width;
+    regionSize = this.region.size;
+    /** An app-provided trail replaces the built-in one. */
+    customTrail = hasSlot('breadcrumb');
+    overflowSlots = computed(() => this.config().subheader.overflowSlots, ...(ngDevMode ? [{ debugName: "overflowSlots" }] : /* istanbul ignore next */ []));
+    hasOverflow = computed(() => this.overflowSlots().some((name) => this.registry.overflowing(name, this.regionSize()).length > 0), ...(ngDevMode ? [{ debugName: "hasOverflow" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellSubheaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: ShellSubheaderComponent, isStandalone: true, selector: "shell-subheader", host: { properties: { "attr.data-shell-size": "regionSize()", "attr.data-variant": "config().appearance.subheader" } }, providers: [{ provide: SHELL_REGION, useExisting: ShellSubheaderComponent }], ngImport: i0, template: "<div class=\"subheader__start\">\n  @if (customTrail()) {\n    <shell-slot-outlet name=\"breadcrumb\" class=\"subheader__slot subheader__trail\" />\n  } @else {\n    <shell-breadcrumb class=\"subheader__trail\" />\n  }\n  <shell-slot-outlet name=\"subheader-start\" class=\"subheader__slot\" />\n</div>\n\n<div class=\"subheader__end\">\n  <shell-slot-outlet name=\"subheader-end\" class=\"subheader__slot\" />\n\n  @if (hasOverflow()) {\n    <shell-overflow-menu [label]=\"config().labels.moreActions\">\n      @for (name of overflowSlots(); track name) {\n        <shell-slot-outlet [name]=\"name\" select=\"overflow\" class=\"subheader__overflow-item\" />\n      }\n    </shell-overflow-menu>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{container:shell-subheader/inline-size;display:flex;align-items:center;gap:8px 16px;box-sizing:border-box;min-block-size:var(--shell-subheader-height, 44px);margin:var(--shell-subheader-margin, 0);padding-inline:var(--shell-subheader-padding-inline, 24px);border-width:var(--shell-subheader-border-width, 0 0 1px);border-style:var(--shell-subheader-border-style, solid);border-color:var(--shell-subheader-border-color, var(--shell-border, #e6e6e9));border-radius:var(--shell-subheader-radius, 0px);background:var(--shell-subheader-bg, var(--shell-surface, #ffffff));color:var(--shell-subheader-fg, var(--shell-fg, #1b1c1f));box-shadow:var(--shell-subheader-shadow, none);font-size:var(--shell-subheader-font-size, var(--shell-font-size, 14px));transition-property:background-color,border-color,box-shadow;transition-duration:calc(var(--shell-subheader-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-subheader-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){:host{transition-duration:1ms}}:host([data-variant=transparent]){border-color:var(--shell-subheader-border-color, transparent);background:var(--shell-subheader-bg, transparent)}:host([data-variant=elevated]){border-color:var(--shell-subheader-border-color, transparent);box-shadow:var(--shell-subheader-shadow, 0 1px 2px rgba(0, 0, 0, .04), 0 6px 14px -8px rgba(0, 0, 0, .14))}.subheader__start{display:flex;align-items:center;gap:12px;flex:1 1 auto;min-inline-size:0}.subheader__trail{flex:1 1 auto;min-inline-size:0}.subheader__slot{gap:8px}.subheader__end{display:flex;align-items:center;gap:8px;flex:0 0 auto}.subheader__overflow-item{flex-direction:column;align-items:stretch;gap:4px}\n"], dependencies: [{ kind: "component", type: ShellSlotOutletComponent, selector: "shell-slot-outlet", inputs: ["name", "select", "size"] }, { kind: "component", type: ShellBreadcrumbComponent, selector: "shell-breadcrumb", inputs: ["items", "maxItems", "display", "itemTemplate"] }, { kind: "component", type: ShellOverflowMenuComponent, selector: "shell-overflow-menu", inputs: ["label", "align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellSubheaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shell-subheader', imports: [ShellSlotOutletComponent, ShellBreadcrumbComponent, ShellOverflowMenuComponent], host: {
+                        '[attr.data-shell-size]': 'regionSize()',
+                        '[attr.data-variant]': 'config().appearance.subheader',
+                    }, providers: [{ provide: SHELL_REGION, useExisting: ShellSubheaderComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"subheader__start\">\n  @if (customTrail()) {\n    <shell-slot-outlet name=\"breadcrumb\" class=\"subheader__slot subheader__trail\" />\n  } @else {\n    <shell-breadcrumb class=\"subheader__trail\" />\n  }\n  <shell-slot-outlet name=\"subheader-start\" class=\"subheader__slot\" />\n</div>\n\n<div class=\"subheader__end\">\n  <shell-slot-outlet name=\"subheader-end\" class=\"subheader__slot\" />\n\n  @if (hasOverflow()) {\n    <shell-overflow-menu [label]=\"config().labels.moreActions\">\n      @for (name of overflowSlots(); track name) {\n        <shell-slot-outlet [name]=\"name\" select=\"overflow\" class=\"subheader__overflow-item\" />\n      }\n    </shell-overflow-menu>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{container:shell-subheader/inline-size;display:flex;align-items:center;gap:8px 16px;box-sizing:border-box;min-block-size:var(--shell-subheader-height, 44px);margin:var(--shell-subheader-margin, 0);padding-inline:var(--shell-subheader-padding-inline, 24px);border-width:var(--shell-subheader-border-width, 0 0 1px);border-style:var(--shell-subheader-border-style, solid);border-color:var(--shell-subheader-border-color, var(--shell-border, #e6e6e9));border-radius:var(--shell-subheader-radius, 0px);background:var(--shell-subheader-bg, var(--shell-surface, #ffffff));color:var(--shell-subheader-fg, var(--shell-fg, #1b1c1f));box-shadow:var(--shell-subheader-shadow, none);font-size:var(--shell-subheader-font-size, var(--shell-font-size, 14px));transition-property:background-color,border-color,box-shadow;transition-duration:calc(var(--shell-subheader-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-subheader-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){:host{transition-duration:1ms}}:host([data-variant=transparent]){border-color:var(--shell-subheader-border-color, transparent);background:var(--shell-subheader-bg, transparent)}:host([data-variant=elevated]){border-color:var(--shell-subheader-border-color, transparent);box-shadow:var(--shell-subheader-shadow, 0 1px 2px rgba(0, 0, 0, .04), 0 6px 14px -8px rgba(0, 0, 0, .14))}.subheader__start{display:flex;align-items:center;gap:12px;flex:1 1 auto;min-inline-size:0}.subheader__trail{flex:1 1 auto;min-inline-size:0}.subheader__slot{gap:8px}.subheader__end{display:flex;align-items:center;gap:8px;flex:0 0 auto}.subheader__overflow-item{flex-direction:column;align-items:stretch;gap:4px}\n"] }]
+        }] });
+
+/**
+ * Topbar with priority-based slot collapsing.
+ *
+ * The bar measures **itself**, not the window. That matters: expanding the
+ * sidebar from a rail to a full panel takes ~200px away from the topbar without
+ * the window ever resizing, and the bar has to respond to that the same way it
+ * responds to a phone.
+ *
+ * Slot order, start to end:
+ *
+ *   [toggle] [topbar-start] [brand] [primary-nav] [title] ····· [search] [actions] [⋯] [account] [topbar-end]
+ *
+ * Each slot template declares the room it needs (`slotMinSize` / `slotMaxSize`)
+ * and what happens when it does not get it (`slotOverflow` → move into the ⋯
+ * menu, otherwise drop).
+ */
+class ShellTopbarComponent {
+    registry = inject(ShellSlotRegistry);
+    region = measureRegion(inject(ElementRef));
+    store = inject(ShellStore);
+    config = this.store.config;
+    regionName = 'topbar';
+    regionWidth = this.region.width;
+    regionSize = this.region.size;
+    showToggle = computed(() => {
+        switch (this.config().topbar.sidebarToggle) {
+            case 'never':
+                return false;
+            case 'auto': {
+                const mode = this.store.sidebar().mode;
+                return mode === 'overlay' || mode === 'hidden';
+            }
+            default:
+                return true;
+        }
+    }, ...(ngDevMode ? [{ debugName: "showToggle" }] : /* istanbul ignore next */ []));
+    overflowSlots = computed(() => this.config().overflowSlots, ...(ngDevMode ? [{ debugName: "overflowSlots" }] : /* istanbul ignore next */ []));
+    /** The ⋯ menu exists only while something is in it. */
+    hasOverflow = computed(() => this.overflowSlots().some((name) => this.registry.overflowing(name, this.regionSize()).length > 0), ...(ngDevMode ? [{ debugName: "hasOverflow" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellTopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: ShellTopbarComponent, isStandalone: true, selector: "shell-topbar", host: { attributes: { "role": "banner" }, properties: { "attr.data-shell-size": "regionSize()", "attr.data-overflow": "hasOverflow()", "attr.data-variant": "config().appearance.topbar", "attr.data-menu-motion": "config().motion.overflowMenu" } }, providers: [{ provide: SHELL_REGION, useExisting: ShellTopbarComponent }], ngImport: i0, template: "<div class=\"topbar__group topbar__group--start\">\n  @if (showToggle()) {\n    <button shellSidebarToggle class=\"topbar__icon-button topbar__toggle\">\n      <span class=\"topbar__toggle-glyph\" aria-hidden=\"true\"></span>\n    </button>\n  }\n\n  <shell-slot-outlet name=\"topbar-start\" class=\"topbar__slot\" />\n  <shell-slot-outlet name=\"brand\" class=\"topbar__slot topbar__slot--brand\" />\n  <shell-slot-outlet name=\"primary-nav\" class=\"topbar__slot topbar__slot--nav\" />\n  <shell-slot-outlet name=\"title\" class=\"topbar__slot topbar__slot--title\" />\n</div>\n\n<div class=\"topbar__group topbar__group--end\">\n  <shell-slot-outlet name=\"search\" class=\"topbar__slot topbar__slot--search\" />\n  <shell-slot-outlet name=\"actions\" class=\"topbar__slot\" />\n\n  @if (hasOverflow()) {\n    <shell-overflow-menu class=\"topbar__overflow\" [label]=\"config().labels.moreActions\">\n      @for (name of overflowSlots(); track name) {\n        <shell-slot-outlet [name]=\"name\" select=\"overflow\" class=\"topbar__overflow-item\" />\n      }\n    </shell-overflow-menu>\n  }\n\n  <shell-slot-outlet name=\"account\" class=\"topbar__slot\" />\n  <shell-slot-outlet name=\"topbar-end\" class=\"topbar__slot\" />\n</div>\n", styles: ["@charset \"UTF-8\";:host{container:shell-topbar/inline-size;display:flex;align-items:center;gap:var(--shell-topbar-gap, 8px);block-size:var(--shell-topbar-height, 64px);padding-inline:var(--shell-topbar-padding-inline, 12px);border-width:var(--shell-topbar-border-width, 0 0 1px);border-style:var(--shell-topbar-border-style, solid);border-color:var(--shell-topbar-border-color, var(--shell-border, #e6e6e9));border-radius:var(--shell-topbar-radius, 0px);background:var(--shell-topbar-bg, var(--shell-topbar-surface, #ffffff));color:var(--shell-topbar-fg, var(--shell-fg, #1b1c1f));box-shadow:var(--shell-topbar-shadow, none);transition-property:background-color,border-color,box-shadow;transition-duration:calc(var(--shell-topbar-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-topbar-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){:host{transition-duration:1ms}}:host([data-variant=elevated]){border-color:var(--shell-topbar-border-color, transparent);box-shadow:var(--shell-topbar-shadow, 0 1px 2px rgba(0, 0, 0, .05), 0 6px 16px -8px rgba(0, 0, 0, .18))}:host([data-variant=blur]){border-color:var(--shell-topbar-border-color, color-mix(in srgb, var(--shell-border, #e6e6e9) 60%, transparent));background:var(--shell-topbar-bg, color-mix(in srgb, var(--shell-topbar-surface, #ffffff) 72%, transparent));-webkit-backdrop-filter:blur(var(--shell-topbar-blur, 12px)) saturate(1.5);backdrop-filter:blur(var(--shell-topbar-blur, 12px)) saturate(1.5)}:host([data-variant=transparent]){border-color:var(--shell-topbar-border-color, transparent);background:var(--shell-topbar-bg, transparent)}.topbar__group{display:flex;align-items:center;gap:var(--shell-topbar-gap, 8px);min-inline-size:0}.topbar__group--start{flex:1 1 auto}.topbar__group--end{flex:0 1 auto;margin-inline-start:auto}.topbar__slot{flex:0 0 auto;gap:var(--shell-topbar-gap, 8px)}.topbar__slot--nav,.topbar__slot--title{flex:0 1 auto;min-inline-size:0;overflow:hidden}.topbar__slot--title{font-weight:600;white-space:nowrap}.topbar__slot--search{flex:0 1 clamp(40px,34cqi,420px);min-inline-size:0}.topbar__icon-button{display:grid;place-items:center;flex:0 0 auto;inline-size:38px;block-size:38px;padding:0;border:0;border-radius:var(--shell-radius-sm, 6px);background:transparent;color:inherit;cursor:pointer;transition-property:background-color;transition-duration:calc(var(--shell-topbar-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-topbar-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.topbar__icon-button{transition-duration:1ms}}.topbar__icon-button:focus-visible{outline:2px solid var(--shell-focus-ring, #4f46e5);outline-offset:2px}.topbar__icon-button:hover{background:var(--shell-hover-surface, #f0f0f3)}.topbar__toggle-glyph{position:relative;inline-size:16px;block-size:2px;border-radius:2px;background:currentcolor}.topbar__toggle-glyph:before,.topbar__toggle-glyph:after{content:\"\";position:absolute;inset-inline-start:0;inline-size:16px;block-size:2px;border-radius:2px;background:currentcolor;transition-property:inline-size;transition-duration:calc(var(--shell-collapse-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-collapse-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.topbar__toggle-glyph:before,.topbar__toggle-glyph:after{transition-duration:1ms}}.topbar__toggle-glyph:before{inset-block-start:-5px}.topbar__toggle-glyph:after{inset-block-start:5px}:host-context(app-shell[data-sidebar-mode=expanded]) .topbar__toggle-glyph:before,:host-context(app-shell[data-sidebar-mode=expanded]) .topbar__toggle-glyph:after{inline-size:10px}.topbar__overflow-item{flex-direction:column;align-items:stretch;gap:4px}\n"], dependencies: [{ kind: "component", type: ShellSlotOutletComponent, selector: "shell-slot-outlet", inputs: ["name", "select", "size"] }, { kind: "directive", type: SidebarToggleDirective, selector: "button[shellSidebarToggle]", exportAs: ["shellSidebarToggle"] }, { kind: "component", type: ShellOverflowMenuComponent, selector: "shell-overflow-menu", inputs: ["label", "align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellTopbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shell-topbar', imports: [ShellSlotOutletComponent, SidebarToggleDirective, ShellOverflowMenuComponent], host: {
+                        role: 'banner',
+                        '[attr.data-shell-size]': 'regionSize()',
+                        '[attr.data-overflow]': 'hasOverflow()',
+                        '[attr.data-variant]': 'config().appearance.topbar',
+                        '[attr.data-menu-motion]': 'config().motion.overflowMenu',
+                    }, providers: [{ provide: SHELL_REGION, useExisting: ShellTopbarComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"topbar__group topbar__group--start\">\n  @if (showToggle()) {\n    <button shellSidebarToggle class=\"topbar__icon-button topbar__toggle\">\n      <span class=\"topbar__toggle-glyph\" aria-hidden=\"true\"></span>\n    </button>\n  }\n\n  <shell-slot-outlet name=\"topbar-start\" class=\"topbar__slot\" />\n  <shell-slot-outlet name=\"brand\" class=\"topbar__slot topbar__slot--brand\" />\n  <shell-slot-outlet name=\"primary-nav\" class=\"topbar__slot topbar__slot--nav\" />\n  <shell-slot-outlet name=\"title\" class=\"topbar__slot topbar__slot--title\" />\n</div>\n\n<div class=\"topbar__group topbar__group--end\">\n  <shell-slot-outlet name=\"search\" class=\"topbar__slot topbar__slot--search\" />\n  <shell-slot-outlet name=\"actions\" class=\"topbar__slot\" />\n\n  @if (hasOverflow()) {\n    <shell-overflow-menu class=\"topbar__overflow\" [label]=\"config().labels.moreActions\">\n      @for (name of overflowSlots(); track name) {\n        <shell-slot-outlet [name]=\"name\" select=\"overflow\" class=\"topbar__overflow-item\" />\n      }\n    </shell-overflow-menu>\n  }\n\n  <shell-slot-outlet name=\"account\" class=\"topbar__slot\" />\n  <shell-slot-outlet name=\"topbar-end\" class=\"topbar__slot\" />\n</div>\n", styles: ["@charset \"UTF-8\";:host{container:shell-topbar/inline-size;display:flex;align-items:center;gap:var(--shell-topbar-gap, 8px);block-size:var(--shell-topbar-height, 64px);padding-inline:var(--shell-topbar-padding-inline, 12px);border-width:var(--shell-topbar-border-width, 0 0 1px);border-style:var(--shell-topbar-border-style, solid);border-color:var(--shell-topbar-border-color, var(--shell-border, #e6e6e9));border-radius:var(--shell-topbar-radius, 0px);background:var(--shell-topbar-bg, var(--shell-topbar-surface, #ffffff));color:var(--shell-topbar-fg, var(--shell-fg, #1b1c1f));box-shadow:var(--shell-topbar-shadow, none);transition-property:background-color,border-color,box-shadow;transition-duration:calc(var(--shell-topbar-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-topbar-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){:host{transition-duration:1ms}}:host([data-variant=elevated]){border-color:var(--shell-topbar-border-color, transparent);box-shadow:var(--shell-topbar-shadow, 0 1px 2px rgba(0, 0, 0, .05), 0 6px 16px -8px rgba(0, 0, 0, .18))}:host([data-variant=blur]){border-color:var(--shell-topbar-border-color, color-mix(in srgb, var(--shell-border, #e6e6e9) 60%, transparent));background:var(--shell-topbar-bg, color-mix(in srgb, var(--shell-topbar-surface, #ffffff) 72%, transparent));-webkit-backdrop-filter:blur(var(--shell-topbar-blur, 12px)) saturate(1.5);backdrop-filter:blur(var(--shell-topbar-blur, 12px)) saturate(1.5)}:host([data-variant=transparent]){border-color:var(--shell-topbar-border-color, transparent);background:var(--shell-topbar-bg, transparent)}.topbar__group{display:flex;align-items:center;gap:var(--shell-topbar-gap, 8px);min-inline-size:0}.topbar__group--start{flex:1 1 auto}.topbar__group--end{flex:0 1 auto;margin-inline-start:auto}.topbar__slot{flex:0 0 auto;gap:var(--shell-topbar-gap, 8px)}.topbar__slot--nav,.topbar__slot--title{flex:0 1 auto;min-inline-size:0;overflow:hidden}.topbar__slot--title{font-weight:600;white-space:nowrap}.topbar__slot--search{flex:0 1 clamp(40px,34cqi,420px);min-inline-size:0}.topbar__icon-button{display:grid;place-items:center;flex:0 0 auto;inline-size:38px;block-size:38px;padding:0;border:0;border-radius:var(--shell-radius-sm, 6px);background:transparent;color:inherit;cursor:pointer;transition-property:background-color;transition-duration:calc(var(--shell-topbar-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-topbar-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.topbar__icon-button{transition-duration:1ms}}.topbar__icon-button:focus-visible{outline:2px solid var(--shell-focus-ring, #4f46e5);outline-offset:2px}.topbar__icon-button:hover{background:var(--shell-hover-surface, #f0f0f3)}.topbar__toggle-glyph{position:relative;inline-size:16px;block-size:2px;border-radius:2px;background:currentcolor}.topbar__toggle-glyph:before,.topbar__toggle-glyph:after{content:\"\";position:absolute;inset-inline-start:0;inline-size:16px;block-size:2px;border-radius:2px;background:currentcolor;transition-property:inline-size;transition-duration:calc(var(--shell-collapse-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-collapse-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.topbar__toggle-glyph:before,.topbar__toggle-glyph:after{transition-duration:1ms}}.topbar__toggle-glyph:before{inset-block-start:-5px}.topbar__toggle-glyph:after{inset-block-start:5px}:host-context(app-shell[data-sidebar-mode=expanded]) .topbar__toggle-glyph:before,:host-context(app-shell[data-sidebar-mode=expanded]) .topbar__toggle-glyph:after{inline-size:10px}.topbar__overflow-item{flex-direction:column;align-items:stretch;gap:4px}\n"] }]
+        }] });
+
+/** `undefined` (attribute absent) means "use the config"; otherwise a boolean attribute. */
+function optionalBoolean(value) {
+    return value === undefined || value === null ? undefined : booleanAttribute(value);
+}
+function isEditable(target) {
+    if (!(target instanceof HTMLElement)) {
+        return false;
+    }
+    return target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName);
+}
+/**
+ * The navigational shell: sidebar + topbar + breadcrumb row + main + footer.
+ *
+ * Layout is a CSS grid whose tracks come from custom properties, so a host app
+ * restyles it entirely from CSS. The only value TypeScript writes is the
+ * current sidebar track width, which is derived state, not layout maths.
+ */
+class AppShellComponent {
+    host = inject(ElementRef);
+    document = inject(DOCUMENT);
+    router = inject(Router, { optional: true });
+    breadcrumbs = inject(ShellBreadcrumbStore);
+    main = viewChild.required('main');
+    frame = viewChild.required('frame');
+    store = inject(ShellStore);
+    config = this.store.config;
+    mainId = SHELL_MAIN_ID;
+    sidebarId = SHELL_SIDEBAR_ID;
+    /** Per-instance overrides. Leave unset to follow the (runtime) config. */
+    layout = input(undefined, ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    scroll = input(undefined, ...(ngDevMode ? [{ debugName: "scroll" }] : /* istanbul ignore next */ []));
+    topbar = input(undefined, { ...(ngDevMode ? { debugName: "topbar" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    subheader = input(undefined, { ...(ngDevMode ? { debugName: "subheader" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    footer = input(undefined, { ...(ngDevMode ? { debugName: "footer" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    regionName = 'shell';
+    regionWidth = observeWidth(this.host);
+    regionSize = this.store.size;
+    size = this.store.size;
+    sidebar = this.store.sidebar;
+    hasSubheaderSlots = hasSlot('breadcrumb', 'subheader-start', 'subheader-end');
+    hasFooterSlots = hasSlot('footer', 'footer-start', 'footer-end');
+    resolvedLayout = computed(() => this.layout() ?? this.config().layout, ...(ngDevMode ? [{ debugName: "resolvedLayout" }] : /* istanbul ignore next */ []));
+    resolvedScroll = computed(() => this.scroll() ?? this.config().scroll, ...(ngDevMode ? [{ debugName: "resolvedScroll" }] : /* istanbul ignore next */ []));
+    /** Topbar, main and footer share one rounded card; the sidebar sits on the shell. */
+    inset = computed(() => this.resolvedLayout() === 'inset', ...(ngDevMode ? [{ debugName: "inset" }] : /* istanbul ignore next */ []));
+    showTopbar = computed(() => this.topbar() ?? this.config().topbar.enabled, ...(ngDevMode ? [{ debugName: "showTopbar" }] : /* istanbul ignore next */ []));
+    showFooter = computed(() => this.footer() ?? (this.config().footer.enabled || this.hasFooterSlots()), ...(ngDevMode ? [{ debugName: "showFooter" }] : /* istanbul ignore next */ []));
+    /**
+     * The breadcrumb row. In `'auto'` it follows the page: a route's
+     * `data.subheader` wins; otherwise it shows when the trail is at least two
+     * levels deep (a flat trail is noise) or when a page fills a subheader slot.
+     * Decided per navigation, so it never appears or vanishes within a page.
+     */
+    showSubheader = computed(() => {
+        const explicit = this.subheader();
+        if (explicit !== undefined) {
+            return explicit;
+        }
+        const mode = this.config().subheader.enabled;
+        if (mode !== 'auto') {
+            return mode;
+        }
+        return (this.breadcrumbs.subheaderOverride() ??
+            (this.breadcrumbs.depth() >= 2 || this.hasSubheaderSlots()));
+    }, ...(ngDevMode ? [{ debugName: "showSubheader" }] : /* istanbul ignore next */ []));
+    /**
+     * Factor every shell duration is multiplied by (see `duration()` in the
+     * token file): 0 turns motion off, 1 / speed scales it.
+     */
+    motionScale = computed(() => {
+        const { enabled, speed } = this.config().motion;
+        return String(enabled && speed > 0 ? 1 / speed : 0);
+    }, ...(ngDevMode ? [{ debugName: "motionScale" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Feed the measured width back into the store: everything downstream —
+        // buckets, sidebar mode, slot visibility — is derived from this one value.
+        effect(() => this.store.setWidth(this.regionWidth()));
+        // A modal drawer must not leave the page scrolling underneath it. Done in
+        // TS rather than a global class so the library needs no global stylesheet.
+        effect((onCleanup) => {
+            if (!this.sidebar().modal) {
+                return;
+            }
+            const root = this.document.documentElement;
+            const previous = root.style.overflow;
+            root.style.overflow = 'hidden';
+            onCleanup(() => {
+                root.style.overflow = previous;
+            });
+        });
+        this.router?.events
+            .pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed())
+            .subscribe(() => {
+            const config = this.config();
+            const state = this.store.sidebar();
+            if (config.sidebar.closeOnNavigate && state.mode === 'overlay' && state.open) {
+                this.store.closeSidebar();
+            }
+            if (config.scrollTopOnNavigate) {
+                this.resetScroll();
+            }
+        });
+    }
+    /**
+     * The window does not scroll in these modes, so the router cannot restore
+     * scroll: `main` scrolls in `scroll: 'main'`, the card in `inset` + `page`.
+     */
+    resetScroll() {
+        if (this.resolvedScroll() === 'main') {
+            this.main().nativeElement.scrollTo({ top: 0 });
+        }
+        else if (this.inset()) {
+            this.frame().nativeElement.scrollTo({ top: 0 });
+        }
+    }
+    /**
+     * A plain `href="#id"` would resolve against `<base href>` and trigger a
+     * router navigation, so the jump is done by moving focus instead.
+     */
+    skipToMain(event) {
+        event.preventDefault();
+        this.document.getElementById(this.mainId)?.focus();
+    }
+    /** Optional Ctrl/⌘ + key toggle, ignored while typing. */
+    onDocumentKeydown(event) {
+        const key = this.config().sidebar.toggleShortcut;
+        if (!key ||
+            event.defaultPrevented ||
+            event.altKey ||
+            event.shiftKey ||
+            !(event.ctrlKey || event.metaKey) ||
+            event.key.toLowerCase() !== key.toLowerCase() ||
+            isEditable(event.target)) {
+            return;
+        }
+        event.preventDefault();
+        this.store.toggleSidebar();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AppShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: AppShellComponent, isStandalone: true, selector: "app-shell", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, topbar: { classPropertyName: "topbar", publicName: "topbar", isSignal: true, isRequired: false, transformFunction: null }, subheader: { classPropertyName: "subheader", publicName: "subheader", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown": "onDocumentKeydown($event)" }, properties: { "attr.data-layout": "resolvedLayout()", "attr.data-scroll": "resolvedScroll()", "attr.data-topbar": "showTopbar()", "attr.data-subheader": "showSubheader()", "attr.data-shell-size": "size()", "attr.data-sidebar-mode": "sidebar().mode", "attr.data-sidebar-open": "sidebar().open", "attr.data-sidebar-modal": "sidebar().modal", "attr.data-sidebar-peeked": "sidebar().peeked", "attr.data-resizing": "store.resizing() || null", "attr.data-motion-collapse": "config().motion.collapse ? null : \"off\"", "style.--shell-sidebar-track": "sidebar().trackWidth", "style.--shell-motion-scale": "motionScale()" } }, providers: [{ provide: SHELL_REGION, useExisting: AppShellComponent }], viewQueries: [{ propertyName: "main", first: true, predicate: ["main"], descendants: true, isSignal: true }, { propertyName: "frame", first: true, predicate: ["frame"], descendants: true, isSignal: true }], exportAs: ["appShell"], ngImport: i0, template: "<a class=\"shell__skip-link\" [href]=\"'#' + mainId\" (click)=\"skipToMain($event)\">\n  {{ config().labels.skipToContent }}\n</a>\n\n<!--\n  Outside `inset` the topbar comes first in the DOM, so keyboard order follows\n  the visual order (topbar \u2192 sidebar \u2192 breadcrumbs \u2192 main). In `inset` it moves\n  into the card. Only one of the two ever renders.\n-->\n@if (showTopbar() && !inset()) {\n  <shell-topbar class=\"shell__topbar\" />\n}\n\n<shell-sidebar class=\"shell__sidebar\" [id]=\"sidebarId\" [attr.data-layout]=\"resolvedLayout()\" />\n\n<!--\n  The frame wraps topbar, breadcrumb row, main and footer. In `inset` it is the\n  rounded card (and, with `scroll: 'page'`, the scroll container); in every\n  other layout it is `display: contents`, so its children stay shell grid items.\n-->\n<div #frame class=\"shell__frame\">\n  @if (showTopbar() && inset()) {\n    <shell-topbar class=\"shell__topbar\" />\n  }\n\n  <!-- Before <main>, so the skip link jumps past the breadcrumbs too. -->\n  @if (showSubheader()) {\n    <shell-subheader class=\"shell__subheader\" [attr.data-sticky]=\"config().subheader.sticky || null\" />\n  }\n\n  <main #main class=\"shell__main\" [id]=\"mainId\" tabindex=\"-1\">\n    <div class=\"shell__content\">\n      <ng-content />\n    </div>\n  </main>\n\n  @if (showFooter()) {\n    <shell-footer class=\"shell__footer\" />\n  }\n</div>\n\n<!--\n  Scrim for the modal drawer. Always rendered so it can fade out as well as\n  in; while closed it is invisible and ignores the pointer. It stacks above\n  main content but below the sidebar, which is raised by --shell-z-sidebar.\n-->\n<div\n  class=\"shell__scrim\"\n  aria-hidden=\"true\"\n  [attr.data-open]=\"sidebar().modal\"\n  [attr.data-motion]=\"config().motion.scrim\"\n  (click)=\"store.closeSidebar()\"\n></div>\n", styles: ["@charset \"UTF-8\";:host{--shell-sidebar-track: var(--shell-sidebar-width, 264px);--shell-sidebar-top-offset: var(--shell-topbar-height, 64px);--shell-subheader-top-offset: var(--shell-topbar-height, 64px);display:grid;grid-template-columns:var(--shell-sidebar-track) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:\"topbar topbar\" \"sidebar subheader\" \"sidebar main\" \"sidebar footer\";isolation:isolate;color-scheme:var(--shell-color-scheme, light);color:var(--shell-fg, #1b1c1f);background:var(--shell-bg, var(--shell-surface, #ffffff));font-family:var(--shell-font-family, inherit);font-size:var(--shell-font-size, 14px);transition-property:grid-template-columns;transition-duration:calc(var(--shell-collapse-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-collapse-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){:host{transition-duration:1ms}}:host([data-motion-collapse=off]){--shell-collapse-duration: 0s}:host([data-layout=sidebar-full]){grid-template-areas:\"sidebar topbar\" \"sidebar subheader\" \"sidebar main\" \"sidebar footer\"}:host([data-layout=stacked]){grid-template-areas:\"topbar topbar\" \"sidebar subheader\" \"sidebar main\" \"footer footer\"}:host([data-layout=sidebar-full]),:host([data-topbar=false]){--shell-sidebar-top-offset: 0px}:host([data-topbar=false]){--shell-subheader-top-offset: 0px}:host([data-scroll=main]){--shell-sidebar-block-size: 100%;block-size:100dvh;overflow:clip}:host([data-scroll=page]){--shell-sidebar-block-size: calc(100dvh - var(--shell-sidebar-top-offset));min-block-size:100dvh}.shell__frame{display:contents}:host([data-layout=inset]){--shell-sidebar-top-offset: 0px;--shell-sidebar-block-size: 100%;grid-template-rows:minmax(0,1fr);grid-template-areas:\"sidebar frame\";block-size:100dvh;overflow:clip;background:var(--shell-bg, var(--shell-surface-raised, #f7f7f8))}:host([data-layout=inset]) .shell__frame{grid-area:frame;z-index:var(--shell-z-main, 0);display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:\"topbar\" \"subheader\" \"main\" \"footer\";min-inline-size:0;margin:var(--shell-frame-inset, 8px);border-width:var(--shell-frame-border-width, 0);border-style:var(--shell-frame-border-style, solid);border-color:var(--shell-frame-border-color, var(--shell-border, #e6e6e9));border-radius:var(--shell-frame-radius, 14px);background:var(--shell-frame-bg, var(--shell-surface, #ffffff));box-shadow:var(--shell-frame-shadow, 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -8px rgba(0, 0, 0, .14));overflow:clip}:host([data-layout=inset][data-scroll=page]) .shell__frame{grid-template-rows:auto auto 1fr auto;overflow:auto;overscroll-behavior:contain}:host([data-resizing]){cursor:col-resize;-webkit-user-select:none;user-select:none;transition-duration:0s}.shell__topbar{grid-area:topbar;z-index:var(--shell-z-topbar, 20)}:host([data-scroll=page]) .shell__topbar{position:sticky;inset-block-start:0}.shell__subheader{grid-area:subheader;z-index:calc(var(--shell-z-topbar, 20) - 1)}:host([data-scroll=page]) .shell__subheader[data-sticky]{position:sticky;inset-block-start:var(--shell-subheader-top-offset)}.shell__sidebar{grid-area:sidebar;z-index:var(--shell-z-sidebar, 40)}.shell__main{position:relative;grid-area:main;min-inline-size:0;z-index:var(--shell-z-main, 0);margin:var(--shell-main-margin, 0);padding:var(--shell-main-padding, 24px);border-width:var(--shell-main-border-width, 0);border-style:var(--shell-main-border-style, solid);border-color:var(--shell-main-border-color, var(--shell-border, #e6e6e9));border-radius:var(--shell-main-radius, 0px);background:var(--shell-main-bg, var(--shell-surface, #ffffff));color:var(--shell-main-fg, var(--shell-fg, #1b1c1f));box-shadow:var(--shell-main-shadow, none);container:shell-main/inline-size}.shell__main:focus{outline:none}:host([data-scroll=main]) .shell__main{overflow:auto;overscroll-behavior:contain}.shell__content{max-inline-size:var(--shell-main-max-width, none);margin-inline:auto}.shell__footer{grid-area:footer;z-index:var(--shell-z-topbar, 20)}.shell__scrim{position:fixed;inset:0;z-index:var(--shell-z-scrim, 30);background:var(--shell-drawer-scrim, var(--shell-scrim, rgba(15, 17, 21, .45)));-webkit-backdrop-filter:blur(var(--shell-drawer-scrim-blur, 0px));backdrop-filter:blur(var(--shell-drawer-scrim-blur, 0px));opacity:0;visibility:hidden;pointer-events:none;transition-property:opacity,visibility;transition-duration:calc(var(--shell-drawer-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-drawer-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.shell__scrim{transition-duration:1ms}}.shell__scrim[data-open=true]{opacity:1;visibility:visible;pointer-events:auto}.shell__scrim[data-motion=none]{transition-duration:0s}.shell__skip-link{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:var(--shell-z-skip-link, 60);padding:8px 14px;border-radius:var(--shell-radius-sm, 6px);background:var(--shell-surface, #ffffff);color:var(--shell-fg, #1b1c1f);box-shadow:var(--shell-shadow-panel, 0 12px 32px -12px rgba(15, 17, 21, .28));text-decoration:none;transform:translateY(calc(-100% - 16px));transition-property:transform;transition-duration:calc(var(--shell-transition-duration, .18s) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1))}@media(prefers-reduced-motion:reduce){.shell__skip-link{transition-duration:1ms}}.shell__skip-link:focus-visible{transform:none;outline:2px solid var(--shell-focus-ring, #4f46e5);outline-offset:2px}\n"], dependencies: [{ kind: "component", type: ShellTopbarComponent, selector: "shell-topbar" }, { kind: "component", type: ShellSidebarComponent, selector: "shell-sidebar", inputs: ["collapseControl"] }, { kind: "component", type: ShellSubheaderComponent, selector: "shell-subheader" }, { kind: "component", type: ShellFooterComponent, selector: "shell-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AppShellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-shell', imports: [ShellTopbarComponent, ShellSidebarComponent, ShellSubheaderComponent, ShellFooterComponent], host: {
+                        '[attr.data-layout]': 'resolvedLayout()',
+                        '[attr.data-scroll]': 'resolvedScroll()',
+                        '[attr.data-topbar]': 'showTopbar()',
+                        '[attr.data-subheader]': 'showSubheader()',
+                        '[attr.data-shell-size]': 'size()',
+                        '[attr.data-sidebar-mode]': 'sidebar().mode',
+                        '[attr.data-sidebar-open]': 'sidebar().open',
+                        '[attr.data-sidebar-modal]': 'sidebar().modal',
+                        '[attr.data-sidebar-peeked]': 'sidebar().peeked',
+                        '[attr.data-resizing]': 'store.resizing() || null',
+                        '[attr.data-motion-collapse]': 'config().motion.collapse ? null : "off"',
+                        '[style.--shell-sidebar-track]': 'sidebar().trackWidth',
+                        '[style.--shell-motion-scale]': 'motionScale()',
+                        '(document:keydown)': 'onDocumentKeydown($event)',
+                    }, providers: [{ provide: SHELL_REGION, useExisting: AppShellComponent }], exportAs: 'appShell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a class=\"shell__skip-link\" [href]=\"'#' + mainId\" (click)=\"skipToMain($event)\">\n  {{ config().labels.skipToContent }}\n</a>\n\n<!--\n  Outside `inset` the topbar comes first in the DOM, so keyboard order follows\n  the visual order (topbar \u2192 sidebar \u2192 breadcrumbs \u2192 main). In `inset` it moves\n  into the card. Only one of the two ever renders.\n-->\n@if (showTopbar() && !inset()) {\n  <shell-topbar class=\"shell__topbar\" />\n}\n\n<shell-sidebar class=\"shell__sidebar\" [id]=\"sidebarId\" [attr.data-layout]=\"resolvedLayout()\" />\n\n<!--\n  The frame wraps topbar, breadcrumb row, main and footer. In `inset` it is the\n  rounded card (and, with `scroll: 'page'`, the scroll container); in every\n  other layout it is `display: contents`, so its children stay shell grid items.\n-->\n<div #frame class=\"shell__frame\">\n  @if (showTopbar() && inset()) {\n    <shell-topbar class=\"shell__topbar\" />\n  }\n\n  <!-- Before <main>, so the skip link jumps past the breadcrumbs too. -->\n  @if (showSubheader()) {\n    <shell-subheader class=\"shell__subheader\" [attr.data-sticky]=\"config().subheader.sticky || null\" />\n  }\n\n  <main #main class=\"shell__main\" [id]=\"mainId\" tabindex=\"-1\">\n    <div class=\"shell__content\">\n      <ng-content />\n    </div>\n  </main>\n\n  @if (showFooter()) {\n    <shell-footer class=\"shell__footer\" />\n  }\n</div>\n\n<!--\n  Scrim for the modal drawer. Always rendered so it can fade out as well as\n  in; while closed it is invisible and ignores the pointer. It stacks above\n  main content but below the sidebar, which is raised by --shell-z-sidebar.\n-->\n<div\n  class=\"shell__scrim\"\n  aria-hidden=\"true\"\n  [attr.data-open]=\"sidebar().modal\"\n  [attr.data-motion]=\"config().motion.scrim\"\n  (click)=\"store.closeSidebar()\"\n></div>\n", styles: ["@charset \"UTF-8\";:host{--shell-sidebar-track: var(--shell-sidebar-width, 264px);--shell-sidebar-top-offset: var(--shell-topbar-height, 64px);--shell-subheader-top-offset: var(--shell-topbar-height, 64px);display:grid;grid-template-columns:var(--shell-sidebar-track) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:\"topbar topbar\" \"sidebar subheader\" \"sidebar main\" \"sidebar footer\";isolation:isolate;color-scheme:var(--shell-color-scheme, light);color:var(--shell-fg, #1b1c1f);background:var(--shell-bg, var(--shell-surface, #ffffff));font-family:var(--shell-font-family, inherit);font-size:var(--shell-font-size, 14px);transition-property:grid-template-columns;transition-duration:calc(var(--shell-collapse-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-collapse-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){:host{transition-duration:1ms}}:host([data-motion-collapse=off]){--shell-collapse-duration: 0s}:host([data-layout=sidebar-full]){grid-template-areas:\"sidebar topbar\" \"sidebar subheader\" \"sidebar main\" \"sidebar footer\"}:host([data-layout=stacked]){grid-template-areas:\"topbar topbar\" \"sidebar subheader\" \"sidebar main\" \"footer footer\"}:host([data-layout=sidebar-full]),:host([data-topbar=false]){--shell-sidebar-top-offset: 0px}:host([data-topbar=false]){--shell-subheader-top-offset: 0px}:host([data-scroll=main]){--shell-sidebar-block-size: 100%;block-size:100dvh;overflow:clip}:host([data-scroll=page]){--shell-sidebar-block-size: calc(100dvh - var(--shell-sidebar-top-offset));min-block-size:100dvh}.shell__frame{display:contents}:host([data-layout=inset]){--shell-sidebar-top-offset: 0px;--shell-sidebar-block-size: 100%;grid-template-rows:minmax(0,1fr);grid-template-areas:\"sidebar frame\";block-size:100dvh;overflow:clip;background:var(--shell-bg, var(--shell-surface-raised, #f7f7f8))}:host([data-layout=inset]) .shell__frame{grid-area:frame;z-index:var(--shell-z-main, 0);display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:\"topbar\" \"subheader\" \"main\" \"footer\";min-inline-size:0;margin:var(--shell-frame-inset, 8px);border-width:var(--shell-frame-border-width, 0);border-style:var(--shell-frame-border-style, solid);border-color:var(--shell-frame-border-color, var(--shell-border, #e6e6e9));border-radius:var(--shell-frame-radius, 14px);background:var(--shell-frame-bg, var(--shell-surface, #ffffff));box-shadow:var(--shell-frame-shadow, 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -8px rgba(0, 0, 0, .14));overflow:clip}:host([data-layout=inset][data-scroll=page]) .shell__frame{grid-template-rows:auto auto 1fr auto;overflow:auto;overscroll-behavior:contain}:host([data-resizing]){cursor:col-resize;-webkit-user-select:none;user-select:none;transition-duration:0s}.shell__topbar{grid-area:topbar;z-index:var(--shell-z-topbar, 20)}:host([data-scroll=page]) .shell__topbar{position:sticky;inset-block-start:0}.shell__subheader{grid-area:subheader;z-index:calc(var(--shell-z-topbar, 20) - 1)}:host([data-scroll=page]) .shell__subheader[data-sticky]{position:sticky;inset-block-start:var(--shell-subheader-top-offset)}.shell__sidebar{grid-area:sidebar;z-index:var(--shell-z-sidebar, 40)}.shell__main{position:relative;grid-area:main;min-inline-size:0;z-index:var(--shell-z-main, 0);margin:var(--shell-main-margin, 0);padding:var(--shell-main-padding, 24px);border-width:var(--shell-main-border-width, 0);border-style:var(--shell-main-border-style, solid);border-color:var(--shell-main-border-color, var(--shell-border, #e6e6e9));border-radius:var(--shell-main-radius, 0px);background:var(--shell-main-bg, var(--shell-surface, #ffffff));color:var(--shell-main-fg, var(--shell-fg, #1b1c1f));box-shadow:var(--shell-main-shadow, none);container:shell-main/inline-size}.shell__main:focus{outline:none}:host([data-scroll=main]) .shell__main{overflow:auto;overscroll-behavior:contain}.shell__content{max-inline-size:var(--shell-main-max-width, none);margin-inline:auto}.shell__footer{grid-area:footer;z-index:var(--shell-z-topbar, 20)}.shell__scrim{position:fixed;inset:0;z-index:var(--shell-z-scrim, 30);background:var(--shell-drawer-scrim, var(--shell-scrim, rgba(15, 17, 21, .45)));-webkit-backdrop-filter:blur(var(--shell-drawer-scrim-blur, 0px));backdrop-filter:blur(var(--shell-drawer-scrim-blur, 0px));opacity:0;visibility:hidden;pointer-events:none;transition-property:opacity,visibility;transition-duration:calc(var(--shell-drawer-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-drawer-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.shell__scrim{transition-duration:1ms}}.shell__scrim[data-open=true]{opacity:1;visibility:visible;pointer-events:auto}.shell__scrim[data-motion=none]{transition-duration:0s}.shell__skip-link{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:var(--shell-z-skip-link, 60);padding:8px 14px;border-radius:var(--shell-radius-sm, 6px);background:var(--shell-surface, #ffffff);color:var(--shell-fg, #1b1c1f);box-shadow:var(--shell-shadow-panel, 0 12px 32px -12px rgba(15, 17, 21, .28));text-decoration:none;transform:translateY(calc(-100% - 16px));transition-property:transform;transition-duration:calc(var(--shell-transition-duration, .18s) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1))}@media(prefers-reduced-motion:reduce){.shell__skip-link{transition-duration:1ms}}.shell__skip-link:focus-visible{transform:none;outline:2px solid var(--shell-focus-ring, #4f46e5);outline-offset:2px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { main: [{ type: i0.ViewChild, args: ['main', { isSignal: true }] }], frame: [{ type: i0.ViewChild, args: ['frame', { isSignal: true }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }], topbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbar", required: false }] }], subheader: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheader", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }] } });
+
+/**
+ * A single navigation entry: a link, or an expandable section when it has
+ * children.
+ *
+ * Renders `<a>` for anything navigable and `<button>` for a pure section
+ * header. Those are different semantics for assistive tech, and only one of
+ * them belongs in the tab order as a link. A section whose subtree contains the
+ * active route opens itself and is marked, so deep links never land in a
+ * collapsed tree.
+ */
+class ShellNavItemComponent {
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+    depth = input(0, ...(ngDevMode ? [{ debugName: "depth" }] : /* istanbul ignore next */ []));
+    /** False on an icon rail: labels and badges give way to icons and tooltips. */
+    labels = input(true, ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    iconTemplate = input(null, ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    /** Replaces the row content; see `ShellNavComponent.itemTemplate`. */
+    itemTemplate = input(null, ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+    router = inject(Router, { optional: true });
+    /** Current URL, so "contains the active route" re-evaluates on navigation. */
+    url = this.router
+        ? toSignal(this.router.events.pipe(filter((event) => event instanceof NavigationEnd), map((event) => event.urlAfterRedirects)), { initialValue: this.router.url })
+        : signal('');
+    children = computed(() => this.item().children ?? [], ...(ngDevMode ? [{ debugName: "children" }] : /* istanbul ignore next */ []));
+    hasChildren = computed(() => this.children().length > 0, ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
+    isLink = computed(() => {
+        const item = this.item();
+        return !!(item.route || item.href) && !item.disabled;
+    }, ...(ngDevMode ? [{ debugName: "isLink" }] : /* istanbul ignore next */ []));
+    childActive = computed(() => {
+        this.url();
+        return this.hasChildren() && this.containsActive(this.children());
+    }, ...(ngDevMode ? [{ debugName: "childActive" }] : /* istanbul ignore next */ []));
+    /**
+     * User-toggleable, but re-derives when the data or the active route changes —
+     * so a server-driven `expanded` flag or a deep link still wins, without
+     * clobbering a click the moment anything else re-renders.
+     */
+    expandedState = linkedSignal(() => (this.item().expanded ?? false) || this.childActive(), ...(ngDevMode ? [{ debugName: "expandedState" }] : /* istanbul ignore next */ []));
+    expanded = computed(() => this.hasChildren() && this.expandedState(), ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    /** Tooltip only when the label is not rendered — otherwise it is noise. */
+    title = computed(() => (this.labels() ? null : this.item().label), ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Stand-in for a missing icon on a rail, so the row is never blank. */
+    initial = computed(() => this.item().label.trim().charAt(0).toUpperCase(), ...(ngDevMode ? [{ debugName: "initial" }] : /* istanbul ignore next */ []));
+    itemContext = computed(() => {
+        const item = this.item();
+        return {
+            $implicit: item,
+            item,
+            depth: this.depth(),
+            labels: this.labels(),
+            expanded: this.expanded(),
+        };
+    }, ...(ngDevMode ? [{ debugName: "itemContext" }] : /* istanbul ignore next */ []));
+    toggle() {
+        this.expandedState.update((open) => !open);
+    }
+    /** `readonly unknown[]` is friendlier as an API than RouterLink's `any[]`. */
+    routerTarget(item) {
+        const route = item.route;
+        if (route === undefined) {
+            return [];
+        }
+        return typeof route === 'string' ? route : [...route];
+    }
+    containsActive(items) {
+        const router = this.router;
+        if (!router) {
+            return false;
+        }
+        return items.some((item) => {
+            if (item.route !== undefined) {
+                const tree = typeof item.route === 'string'
+                    ? router.parseUrl(item.route)
+                    : router.createUrlTree([...item.route]);
+                const options = {
+                    paths: item.exact ? 'exact' : 'subset',
+                    queryParams: 'ignored',
+                    fragment: 'ignored',
+                    matrixParams: 'ignored',
+                };
+                if (router.isActive(tree, options)) {
+                    return true;
+                }
+            }
+            return this.containsActive(item.children ?? []);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: ShellNavItemComponent, isStandalone: true, selector: "shell-nav-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-depth": "depth()", "attr.data-expanded": "expanded()", "attr.data-labels": "labels()", "attr.data-child-active": "childActive() || null", "attr.data-disabled": "item().disabled || null", "style.--shell-nav-depth": "depth()" } }, ngImport: i0, template: "@let entry = item();\n@let icon = entry.icon;\n@let badge = entry.badge;\n\n@if (isLink()) {\n  @if (entry.route) {\n    <a\n      class=\"nav-item__row\"\n      [routerLink]=\"routerTarget(entry)\"\n      routerLinkActive=\"nav-item__row--active\"\n      [routerLinkActiveOptions]=\"{ exact: !!entry.exact }\"\n      ariaCurrentWhenActive=\"page\"\n      [attr.title]=\"title()\"\n      [attr.target]=\"entry.target\"\n    >\n      <ng-container *ngTemplateOutlet=\"row\" />\n    </a>\n  } @else {\n    <a\n      class=\"nav-item__row\"\n      [href]=\"entry.href\"\n      [attr.title]=\"title()\"\n      [attr.target]=\"entry.target\"\n      [attr.rel]=\"entry.target === '_blank' ? 'noopener' : null\"\n    >\n      <ng-container *ngTemplateOutlet=\"row\" />\n    </a>\n  }\n} @else if (hasChildren()) {\n  <button\n    type=\"button\"\n    class=\"nav-item__row nav-item__row--section\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.title]=\"title()\"\n    [disabled]=\"entry.disabled\"\n    (click)=\"toggle()\"\n  >\n    <ng-container *ngTemplateOutlet=\"row\" />\n    <span class=\"nav-item__chevron\" aria-hidden=\"true\"></span>\n  </button>\n} @else {\n  <span class=\"nav-item__row nav-item__row--static\" [attr.title]=\"title()\">\n    <ng-container *ngTemplateOutlet=\"row\" />\n  </span>\n}\n\n@if (hasChildren()) {\n  <!--\n    Height animation via grid-template-rows 0fr \u2192 1fr: no JS measurement, and\n    it degrades to an instant show/hide under prefers-reduced-motion.\n    `inert` keeps collapsed children out of the tab order and the a11y tree.\n  -->\n  <div class=\"nav-item__children\">\n    <ul class=\"nav-item__child-list\" [attr.inert]=\"expanded() ? null : true\">\n      @for (child of children(); track child.id ?? child.label) {\n        <li>\n          <shell-nav-item\n            [item]=\"child\"\n            [depth]=\"depth() + 1\"\n            [labels]=\"labels()\"\n            [iconTemplate]=\"iconTemplate()\"\n            [itemTemplate]=\"itemTemplate()\"\n          />\n        </li>\n      }\n    </ul>\n  </div>\n}\n\n<ng-template #row>\n  @if (itemTemplate(); as custom) {\n    <!--\n      Custom content inside the library's row element: link semantics, active\n      state and sections still come from here; the template owns the rest.\n    -->\n    <ng-container *ngTemplateOutlet=\"custom; context: itemContext()\" />\n  } @else {\n    @if (icon) {\n      <span class=\"nav-item__icon\" aria-hidden=\"true\">\n        @if (iconTemplate()) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              iconTemplate()!;\n              context: { $implicit: icon, icon: icon, item: entry }\n            \"\n          />\n        } @else {\n          {{ icon }}\n        }\n      </span>\n    } @else if (!labels()) {\n      <!-- Without an icon a rail row would be empty: show the label's initial. -->\n      <span class=\"nav-item__glyph\" aria-hidden=\"true\">{{ initial() }}</span>\n    }\n\n    @if (labels()) {\n      <span class=\"nav-item__label\">{{ entry.label }}</span>\n\n      @if (badge !== undefined && badge !== null) {\n        <span class=\"nav-item__badge\">{{ badge }}</span>\n      }\n    } @else {\n      <!-- The label still has to reach screen readers on an icon rail. -->\n      <span class=\"nav-item__sr-label\">{{ entry.label }}</span>\n\n      @if (badge !== undefined && badge !== null) {\n        <span class=\"nav-item__dot\" aria-hidden=\"true\"></span>\n      }\n    }\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}.nav-item__row{position:relative;display:flex;align-items:center;gap:var(--shell-nav-item-gap, 10px);box-sizing:border-box;inline-size:100%;min-block-size:var(--shell-nav-item-height, 36px);padding-inline:10px;padding-inline-start:calc(10px + var(--shell-nav-depth, 0) * 14px);border:0;border-radius:var(--shell-nav-item-radius, var(--shell-radius-sm, 6px));background:transparent;color:var(--shell-nav-item-fg, var(--shell-fg, #1b1c1f));font:inherit;text-align:start;text-decoration:none;cursor:pointer;transition-property:background-color,color;transition-duration:calc(var(--shell-nav-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-nav-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.nav-item__row{transition-duration:1ms}}.nav-item__row:focus-visible{outline:2px solid var(--shell-focus-ring, #4f46e5);outline-offset:-2px}.nav-item__row:hover{background:var(--shell-nav-item-hover-bg, var(--shell-hover-surface, #f0f0f3))}.nav-item__row--static{cursor:default;color:var(--shell-fg-muted, #6b6f76)}.nav-item__row--static:hover{background:transparent}.nav-item__row--active{background:var(--shell-nav-item-active-bg, var(--shell-accent-surface, #eef0fe));color:var(--shell-nav-item-active-fg, var(--shell-accent, #4f46e5));font-weight:600}.nav-item__row--active:hover{background:var(--shell-nav-item-active-bg, var(--shell-accent-surface, #eef0fe))}:host-context(shell-nav[data-indicator=bar]) .nav-item__row--active,:host-context(shell-nav[data-indicator=none]) .nav-item__row--active{background:var(--shell-nav-item-active-bg, transparent)}:host-context(shell-nav[data-indicator=bar]) .nav-item__row--active:hover,:host-context(shell-nav[data-indicator=none]) .nav-item__row--active:hover{background:var(--shell-nav-item-hover-bg, var(--shell-hover-surface, #f0f0f3))}:host-context(shell-nav[data-indicator=bar]) .nav-item__row--active:before{content:\"\";position:absolute;inset-block:7px;inset-inline-start:0;inline-size:var(--shell-nav-indicator-size, 3px);border-radius:999px;background:var(--shell-nav-indicator-color, var(--shell-accent, #4f46e5))}:host([data-child-active])>.nav-item__row--section{color:var(--shell-nav-item-active-fg, var(--shell-accent, #4f46e5))}:host([data-disabled]) .nav-item__row{opacity:.5;pointer-events:none}.nav-item__icon{display:grid;place-items:center;flex:0 0 auto;inline-size:var(--shell-nav-icon-size, 18px);block-size:var(--shell-nav-icon-size, 18px);font-size:var(--shell-nav-icon-size, 18px);line-height:1}.nav-item__glyph{display:grid;place-items:center;flex:0 0 auto;inline-size:var(--shell-nav-icon-size, 18px);block-size:var(--shell-nav-icon-size, 18px);border-radius:5px;background:var(--shell-active-surface, #e9e9ee);color:var(--shell-fg-muted, #6b6f76);font-size:11px;font-weight:700;line-height:1}.nav-item__row--active .nav-item__glyph{background:var(--shell-accent, #4f46e5);color:var(--shell-accent-fg, #ffffff)}.nav-item__label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1 1 auto}.nav-item__badge{flex:0 0 auto;min-inline-size:20px;padding-inline:6px;border-radius:999px;background:var(--shell-active-surface, #e9e9ee);color:var(--shell-fg-muted, #6b6f76);font-size:var(--shell-font-size-sm, 12.5px);font-weight:600;line-height:20px;text-align:center}.nav-item__dot{position:absolute;inset-block-start:6px;inset-inline-end:8px;inline-size:7px;block-size:7px;border-radius:50%;background:var(--shell-accent, #4f46e5)}.nav-item__sr-label{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.nav-item__chevron{flex:0 0 auto;inline-size:6px;block-size:6px;margin-inline-end:4px;border-inline-end:2px solid currentcolor;border-block-end:2px solid currentcolor;color:var(--shell-fg-muted, #6b6f76);transform:rotate(-45deg);transition-property:transform;transition-duration:calc(var(--shell-nav-expand-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-nav-expand-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.nav-item__chevron{transition-duration:1ms}}:host-context([dir=rtl]) .nav-item__chevron{transform:rotate(135deg)}:host([data-expanded=true])>.nav-item__row>.nav-item__chevron{transform:rotate(45deg)}:host([data-labels=false]) .nav-item__row{justify-content:center;padding-inline:0}:host([data-labels=false]) .nav-item__chevron{display:none}.nav-item__children{display:grid;grid-template-rows:0fr;transition-property:grid-template-rows;transition-duration:calc(var(--shell-nav-expand-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-nav-expand-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.nav-item__children{transition-duration:1ms}}:host([data-expanded=true])>.nav-item__children{grid-template-rows:1fr}.nav-item__child-list{display:flex;flex-direction:column;gap:var(--shell-sidebar-gap, 2px);min-block-size:0;margin:0;padding:0;overflow:hidden;list-style:none}:host([data-expanded=true])>.nav-item__children>.nav-item__child-list{padding-block-start:var(--shell-sidebar-gap, 2px)}\n"], dependencies: [{ kind: "component", type: ShellNavItemComponent, selector: "shell-nav-item", inputs: ["item", "depth", "labels", "iconTemplate", "itemTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellNavItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shell-nav-item', imports: [NgTemplateOutlet, RouterLink, RouterLinkActive, ShellNavItemComponent], host: {
+                        '[attr.data-depth]': 'depth()',
+                        '[attr.data-expanded]': 'expanded()',
+                        '[attr.data-labels]': 'labels()',
+                        '[attr.data-child-active]': 'childActive() || null',
+                        '[attr.data-disabled]': 'item().disabled || null',
+                        '[style.--shell-nav-depth]': 'depth()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let entry = item();\n@let icon = entry.icon;\n@let badge = entry.badge;\n\n@if (isLink()) {\n  @if (entry.route) {\n    <a\n      class=\"nav-item__row\"\n      [routerLink]=\"routerTarget(entry)\"\n      routerLinkActive=\"nav-item__row--active\"\n      [routerLinkActiveOptions]=\"{ exact: !!entry.exact }\"\n      ariaCurrentWhenActive=\"page\"\n      [attr.title]=\"title()\"\n      [attr.target]=\"entry.target\"\n    >\n      <ng-container *ngTemplateOutlet=\"row\" />\n    </a>\n  } @else {\n    <a\n      class=\"nav-item__row\"\n      [href]=\"entry.href\"\n      [attr.title]=\"title()\"\n      [attr.target]=\"entry.target\"\n      [attr.rel]=\"entry.target === '_blank' ? 'noopener' : null\"\n    >\n      <ng-container *ngTemplateOutlet=\"row\" />\n    </a>\n  }\n} @else if (hasChildren()) {\n  <button\n    type=\"button\"\n    class=\"nav-item__row nav-item__row--section\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.title]=\"title()\"\n    [disabled]=\"entry.disabled\"\n    (click)=\"toggle()\"\n  >\n    <ng-container *ngTemplateOutlet=\"row\" />\n    <span class=\"nav-item__chevron\" aria-hidden=\"true\"></span>\n  </button>\n} @else {\n  <span class=\"nav-item__row nav-item__row--static\" [attr.title]=\"title()\">\n    <ng-container *ngTemplateOutlet=\"row\" />\n  </span>\n}\n\n@if (hasChildren()) {\n  <!--\n    Height animation via grid-template-rows 0fr \u2192 1fr: no JS measurement, and\n    it degrades to an instant show/hide under prefers-reduced-motion.\n    `inert` keeps collapsed children out of the tab order and the a11y tree.\n  -->\n  <div class=\"nav-item__children\">\n    <ul class=\"nav-item__child-list\" [attr.inert]=\"expanded() ? null : true\">\n      @for (child of children(); track child.id ?? child.label) {\n        <li>\n          <shell-nav-item\n            [item]=\"child\"\n            [depth]=\"depth() + 1\"\n            [labels]=\"labels()\"\n            [iconTemplate]=\"iconTemplate()\"\n            [itemTemplate]=\"itemTemplate()\"\n          />\n        </li>\n      }\n    </ul>\n  </div>\n}\n\n<ng-template #row>\n  @if (itemTemplate(); as custom) {\n    <!--\n      Custom content inside the library's row element: link semantics, active\n      state and sections still come from here; the template owns the rest.\n    -->\n    <ng-container *ngTemplateOutlet=\"custom; context: itemContext()\" />\n  } @else {\n    @if (icon) {\n      <span class=\"nav-item__icon\" aria-hidden=\"true\">\n        @if (iconTemplate()) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              iconTemplate()!;\n              context: { $implicit: icon, icon: icon, item: entry }\n            \"\n          />\n        } @else {\n          {{ icon }}\n        }\n      </span>\n    } @else if (!labels()) {\n      <!-- Without an icon a rail row would be empty: show the label's initial. -->\n      <span class=\"nav-item__glyph\" aria-hidden=\"true\">{{ initial() }}</span>\n    }\n\n    @if (labels()) {\n      <span class=\"nav-item__label\">{{ entry.label }}</span>\n\n      @if (badge !== undefined && badge !== null) {\n        <span class=\"nav-item__badge\">{{ badge }}</span>\n      }\n    } @else {\n      <!-- The label still has to reach screen readers on an icon rail. -->\n      <span class=\"nav-item__sr-label\">{{ entry.label }}</span>\n\n      @if (badge !== undefined && badge !== null) {\n        <span class=\"nav-item__dot\" aria-hidden=\"true\"></span>\n      }\n    }\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}.nav-item__row{position:relative;display:flex;align-items:center;gap:var(--shell-nav-item-gap, 10px);box-sizing:border-box;inline-size:100%;min-block-size:var(--shell-nav-item-height, 36px);padding-inline:10px;padding-inline-start:calc(10px + var(--shell-nav-depth, 0) * 14px);border:0;border-radius:var(--shell-nav-item-radius, var(--shell-radius-sm, 6px));background:transparent;color:var(--shell-nav-item-fg, var(--shell-fg, #1b1c1f));font:inherit;text-align:start;text-decoration:none;cursor:pointer;transition-property:background-color,color;transition-duration:calc(var(--shell-nav-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-nav-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.nav-item__row{transition-duration:1ms}}.nav-item__row:focus-visible{outline:2px solid var(--shell-focus-ring, #4f46e5);outline-offset:-2px}.nav-item__row:hover{background:var(--shell-nav-item-hover-bg, var(--shell-hover-surface, #f0f0f3))}.nav-item__row--static{cursor:default;color:var(--shell-fg-muted, #6b6f76)}.nav-item__row--static:hover{background:transparent}.nav-item__row--active{background:var(--shell-nav-item-active-bg, var(--shell-accent-surface, #eef0fe));color:var(--shell-nav-item-active-fg, var(--shell-accent, #4f46e5));font-weight:600}.nav-item__row--active:hover{background:var(--shell-nav-item-active-bg, var(--shell-accent-surface, #eef0fe))}:host-context(shell-nav[data-indicator=bar]) .nav-item__row--active,:host-context(shell-nav[data-indicator=none]) .nav-item__row--active{background:var(--shell-nav-item-active-bg, transparent)}:host-context(shell-nav[data-indicator=bar]) .nav-item__row--active:hover,:host-context(shell-nav[data-indicator=none]) .nav-item__row--active:hover{background:var(--shell-nav-item-hover-bg, var(--shell-hover-surface, #f0f0f3))}:host-context(shell-nav[data-indicator=bar]) .nav-item__row--active:before{content:\"\";position:absolute;inset-block:7px;inset-inline-start:0;inline-size:var(--shell-nav-indicator-size, 3px);border-radius:999px;background:var(--shell-nav-indicator-color, var(--shell-accent, #4f46e5))}:host([data-child-active])>.nav-item__row--section{color:var(--shell-nav-item-active-fg, var(--shell-accent, #4f46e5))}:host([data-disabled]) .nav-item__row{opacity:.5;pointer-events:none}.nav-item__icon{display:grid;place-items:center;flex:0 0 auto;inline-size:var(--shell-nav-icon-size, 18px);block-size:var(--shell-nav-icon-size, 18px);font-size:var(--shell-nav-icon-size, 18px);line-height:1}.nav-item__glyph{display:grid;place-items:center;flex:0 0 auto;inline-size:var(--shell-nav-icon-size, 18px);block-size:var(--shell-nav-icon-size, 18px);border-radius:5px;background:var(--shell-active-surface, #e9e9ee);color:var(--shell-fg-muted, #6b6f76);font-size:11px;font-weight:700;line-height:1}.nav-item__row--active .nav-item__glyph{background:var(--shell-accent, #4f46e5);color:var(--shell-accent-fg, #ffffff)}.nav-item__label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1 1 auto}.nav-item__badge{flex:0 0 auto;min-inline-size:20px;padding-inline:6px;border-radius:999px;background:var(--shell-active-surface, #e9e9ee);color:var(--shell-fg-muted, #6b6f76);font-size:var(--shell-font-size-sm, 12.5px);font-weight:600;line-height:20px;text-align:center}.nav-item__dot{position:absolute;inset-block-start:6px;inset-inline-end:8px;inline-size:7px;block-size:7px;border-radius:50%;background:var(--shell-accent, #4f46e5)}.nav-item__sr-label{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.nav-item__chevron{flex:0 0 auto;inline-size:6px;block-size:6px;margin-inline-end:4px;border-inline-end:2px solid currentcolor;border-block-end:2px solid currentcolor;color:var(--shell-fg-muted, #6b6f76);transform:rotate(-45deg);transition-property:transform;transition-duration:calc(var(--shell-nav-expand-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-nav-expand-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.nav-item__chevron{transition-duration:1ms}}:host-context([dir=rtl]) .nav-item__chevron{transform:rotate(135deg)}:host([data-expanded=true])>.nav-item__row>.nav-item__chevron{transform:rotate(45deg)}:host([data-labels=false]) .nav-item__row{justify-content:center;padding-inline:0}:host([data-labels=false]) .nav-item__chevron{display:none}.nav-item__children{display:grid;grid-template-rows:0fr;transition-property:grid-template-rows;transition-duration:calc(var(--shell-nav-expand-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-nav-expand-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.nav-item__children{transition-duration:1ms}}:host([data-expanded=true])>.nav-item__children{grid-template-rows:1fr}.nav-item__child-list{display:flex;flex-direction:column;gap:var(--shell-sidebar-gap, 2px);min-block-size:0;margin:0;padding:0;overflow:hidden;list-style:none}:host([data-expanded=true])>.nav-item__children>.nav-item__child-list{padding-block-start:var(--shell-sidebar-gap, 2px)}\n"] }]
+        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }] } });
+
+/**
+ * Lets code other than the owner of the nav array add entries to it — a
+ * feature library adding "Roadmap" to the app's "Workspace" group, or a
+ * section adding context links while it is open.
+ *
+ * Contributions target a group by `ShellNavGroup.id` and are merged into every
+ * `<shell-nav>` that renders a group with that id. The app keeps control of
+ * structure and order: it declares the groups (an empty group is fine — empty
+ * groups are not rendered), features only fill them.
+ */
+class ShellNavRegistry {
+    contributions = signal([], ...(ngDevMode ? [{ debugName: "contributions" }] : /* istanbul ignore next */ []));
+    sequence = 0;
+    /**
+     * Add items to the group with this id. Returns a function that removes them
+     * again. Prefer `contributeNavItems()` / `provideShellNavItems()`, which
+     * remove them automatically.
+     */
+    contribute(groupId, items, options = {}) {
+        const entry = {
+            groupId,
+            items,
+            order: options.order ?? 0,
+            sequence: this.sequence++,
+        };
+        this.contributions.update((current) => [...current, entry]);
+        return () => this.contributions.update((current) => current.filter((candidate) => candidate !== entry));
+    }
+    /** Items contributed to a group, in order. Reactive when read in a signal context. */
+    itemsFor(groupId) {
+        return this.contributions()
+            .filter((contribution) => contribution.groupId === groupId)
+            .sort((a, b) => a.order - b.order || a.sequence - b.sequence)
+            .flatMap((contribution) => isSignal(contribution.items) ? contribution.items() : contribution.items);
+    }
+    /**
+     * `groups` with contributed items appended to the groups whose `id` matches.
+     * Returns the input untouched when there is nothing to add, so object
+     * identity stays stable for the common case. Reactive.
+     */
+    merge(groups) {
+        if (!this.contributions().length) {
+            return groups;
+        }
+        return groups.map((group) => {
+            const extra = group.id === undefined ? [] : this.itemsFor(group.id);
+            return extra.length ? { ...group, items: [...group.items, ...extra] } : group;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellNavRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellNavRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellNavRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/**
+ * Contribute nav items for the lifetime of the calling component, directive or
+ * service. Call from an injection context.
+ *
+ * ```ts
+ * export class ProjectPage {
+ *   constructor() {
+ *     contributeNavItems('workspace', [{ label: 'Project settings', route: '/settings' }]);
+ *   }
+ * }
+ * ```
+ */
+function contributeNavItems(groupId, items, options) {
+    const remove = inject(ShellNavRegistry).contribute(groupId, items, options);
+    inject(DestroyRef).onDestroy(remove);
+}
+/**
+ * Contribute nav items for the lifetime of an environment injector. In the app
+ * config the entries exist from startup — the usual way for a feature to own
+ * its link:
+ *
+ * ```ts
+ * providers: [provideShellNavItems('workspace', [{ label: 'Roadmap', route: '/roadmap' }])]
+ * ```
+ *
+ * In a lazy route's `providers` they only appear once that route has loaded,
+ * so do not use that to add the link *to* the lazy route itself.
+ */
+function provideShellNavItems(groupId, items, options) {
+    return provideEnvironmentInitializer(() => contributeNavItems(groupId, items, options));
+}
+
+/**
+ * Renders grouped navigation. Data in, markup out — so the same array feeds
+ * the sidebar, the mobile drawer and anything else that needs the nav tree.
+ *
+ * ```html
+ * <ng-template shellSlot="sidebar-nav">
+ *   <shell-nav [groups]="navigation" [iconTemplate]="icon" />
+ * </ng-template>
+ * ```
+ *
+ * `labels` follows the sidebar by default, so a rail needs no configuration.
+ * Items contributed through `ShellNavRegistry` are merged into the groups with
+ * a matching `id`; groups that end up empty are not rendered.
+ */
+class ShellNavComponent {
+    /** Groups, or a flat item list which is wrapped in one unlabelled group. */
+    groups = input([], ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Override the sidebar's label state — useful when reusing `shell-nav`. */
+    labels = input(null, ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    /** Hide group headings even when labels show (a denser, Slack-like list). */
+    headings = input(true, { ...(ngDevMode ? { debugName: "headings" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Renders `ShellNavItem.icon` keys. Without it, the key is shown as text. */
+    iconTemplate = input(null, ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Replaces the *content* of every row (icon, label, badge). The row element
+     * itself — link, section button, active state, children — stays the
+     * library's, so routing and accessibility keep working.
+     */
+    itemTemplate = input(null, ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+    store = inject(ShellStore);
+    registry = inject(ShellNavRegistry);
+    /** Per-group overrides on top of the data's own `collapsed` flag. */
+    groupOverrides = signal(new Map(), ...(ngDevMode ? [{ debugName: "groupOverrides" }] : /* istanbul ignore next */ []));
+    showLabels = computed(() => this.labels() ?? this.store.sidebar().labels, ...(ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []));
+    resolvedGroups = computed(() => {
+        const groups = this.groups();
+        const items = this.items();
+        const base = groups.length ? groups : items.length ? [{ items }] : [];
+        return this.registry.merge(base).filter((group) => group.items.length > 0);
+    }, ...(ngDevMode ? [{ debugName: "resolvedGroups" }] : /* istanbul ignore next */ []));
+    groupKey(group, index) {
+        return group.id ?? group.label ?? `group-${index}`;
+    }
+    isCollapsed(group, index) {
+        return this.groupOverrides().get(this.groupKey(group, index)) ?? !!group.collapsed;
+    }
+    toggleGroup(group, index) {
+        const key = this.groupKey(group, index);
+        const collapsed = this.isCollapsed(group, index);
+        this.groupOverrides.update((current) => new Map(current).set(key, !collapsed));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: ShellNavComponent, isStandalone: true, selector: "shell-nav", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, headings: { classPropertyName: "headings", publicName: "headings", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-labels": "showLabels()", "attr.data-indicator": "store.config().appearance.navIndicator", "attr.data-motion-expand": "store.config().motion.navExpand ? null : \"off\"" } }, ngImport: i0, template: "@for (group of resolvedGroups(); track groupKey(group, $index); let index = $index) {\n  @let collapsed = isCollapsed(group, index);\n  @let showHeading = showLabels() && headings() && !!group.label;\n\n  <div class=\"nav__group\" [attr.data-collapsed]=\"collapsed\">\n    @if (showHeading) {\n      @if (group.collapsible) {\n        <button\n          type=\"button\"\n          class=\"nav__heading nav__heading--button\"\n          [attr.aria-expanded]=\"!collapsed\"\n          (click)=\"toggleGroup(group, index)\"\n        >\n          <span class=\"nav__heading-text\">{{ group.label }}</span>\n          <span class=\"nav__heading-chevron\" aria-hidden=\"true\"></span>\n        </button>\n      } @else {\n        <h2 class=\"nav__heading\">{{ group.label }}</h2>\n      }\n    } @else if (index > 0) {\n      <!-- Without a heading, a rule keeps the groups legible on a rail. -->\n      <hr class=\"nav__divider\" />\n    }\n\n    @if (!collapsed) {\n      <ul class=\"nav__list\">\n        @for (item of group.items; track item.id ?? item.label) {\n          <li>\n            <shell-nav-item\n              [item]=\"item\"\n              [labels]=\"showLabels()\"\n              [iconTemplate]=\"iconTemplate()\"\n              [itemTemplate]=\"itemTemplate()\"\n            />\n          </li>\n        }\n      </ul>\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:12px}:host([data-motion-expand=off]){--shell-nav-expand-duration: 0s}.nav__group{display:flex;flex-direction:column;gap:2px}.nav__heading{display:flex;align-items:center;gap:6px;margin:0;padding:6px 10px 2px;border:0;background:transparent;color:var(--shell-nav-heading-fg, var(--shell-fg-muted, #6b6f76));font-size:var(--shell-nav-heading-size, var(--shell-font-size-sm, 12.5px));font-weight:600;letter-spacing:.01em}.nav__heading--button{border-radius:var(--shell-radius-sm, 6px);cursor:pointer;transition-property:color;transition-duration:calc(var(--shell-nav-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-nav-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.nav__heading--button{transition-duration:1ms}}.nav__heading--button:focus-visible{outline:2px solid var(--shell-focus-ring, #4f46e5);outline-offset:-2px}.nav__heading--button:hover{color:var(--shell-nav-item-fg, var(--shell-fg, #1b1c1f))}.nav__heading-text{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1 1 auto;text-align:start}.nav__heading-chevron{flex:0 0 auto;inline-size:6px;block-size:6px;border-inline-end:2px solid currentcolor;border-block-end:2px solid currentcolor;transform:rotate(45deg);transition-property:transform;transition-duration:calc(var(--shell-nav-expand-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-nav-expand-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.nav__heading-chevron{transition-duration:1ms}}.nav__group[data-collapsed=true] .nav__heading-chevron{transform:rotate(-45deg)}.nav__divider{margin:6px 8px;border:0;border-block-start:1px solid var(--shell-sidebar-border-color, var(--shell-border, #e6e6e9))}.nav__list{display:flex;flex-direction:column;gap:var(--shell-sidebar-gap, 2px);margin:0;padding:0;list-style:none}\n"], dependencies: [{ kind: "component", type: ShellNavItemComponent, selector: "shell-nav-item", inputs: ["item", "depth", "labels", "iconTemplate", "itemTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ShellNavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shell-nav', imports: [ShellNavItemComponent], host: {
+                        '[attr.data-labels]': 'showLabels()',
+                        '[attr.data-indicator]': 'store.config().appearance.navIndicator',
+                        '[attr.data-motion-expand]': 'store.config().motion.navExpand ? null : "off"',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (group of resolvedGroups(); track groupKey(group, $index); let index = $index) {\n  @let collapsed = isCollapsed(group, index);\n  @let showHeading = showLabels() && headings() && !!group.label;\n\n  <div class=\"nav__group\" [attr.data-collapsed]=\"collapsed\">\n    @if (showHeading) {\n      @if (group.collapsible) {\n        <button\n          type=\"button\"\n          class=\"nav__heading nav__heading--button\"\n          [attr.aria-expanded]=\"!collapsed\"\n          (click)=\"toggleGroup(group, index)\"\n        >\n          <span class=\"nav__heading-text\">{{ group.label }}</span>\n          <span class=\"nav__heading-chevron\" aria-hidden=\"true\"></span>\n        </button>\n      } @else {\n        <h2 class=\"nav__heading\">{{ group.label }}</h2>\n      }\n    } @else if (index > 0) {\n      <!-- Without a heading, a rule keeps the groups legible on a rail. -->\n      <hr class=\"nav__divider\" />\n    }\n\n    @if (!collapsed) {\n      <ul class=\"nav__list\">\n        @for (item of group.items; track item.id ?? item.label) {\n          <li>\n            <shell-nav-item\n              [item]=\"item\"\n              [labels]=\"showLabels()\"\n              [iconTemplate]=\"iconTemplate()\"\n              [itemTemplate]=\"itemTemplate()\"\n            />\n          </li>\n        }\n      </ul>\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:12px}:host([data-motion-expand=off]){--shell-nav-expand-duration: 0s}.nav__group{display:flex;flex-direction:column;gap:2px}.nav__heading{display:flex;align-items:center;gap:6px;margin:0;padding:6px 10px 2px;border:0;background:transparent;color:var(--shell-nav-heading-fg, var(--shell-fg-muted, #6b6f76));font-size:var(--shell-nav-heading-size, var(--shell-font-size-sm, 12.5px));font-weight:600;letter-spacing:.01em}.nav__heading--button{border-radius:var(--shell-radius-sm, 6px);cursor:pointer;transition-property:color;transition-duration:calc(var(--shell-nav-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-nav-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.nav__heading--button{transition-duration:1ms}}.nav__heading--button:focus-visible{outline:2px solid var(--shell-focus-ring, #4f46e5);outline-offset:-2px}.nav__heading--button:hover{color:var(--shell-nav-item-fg, var(--shell-fg, #1b1c1f))}.nav__heading-text{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1 1 auto;text-align:start}.nav__heading-chevron{flex:0 0 auto;inline-size:6px;block-size:6px;border-inline-end:2px solid currentcolor;border-block-end:2px solid currentcolor;transform:rotate(45deg);transition-property:transform;transition-duration:calc(var(--shell-nav-expand-duration, var(--shell-transition-duration, .18s)) * var(--shell-motion-scale, 1));transition-timing-function:var(--shell-nav-expand-easing, var(--shell-transition-easing, cubic-bezier(.2, 0, 0, 1)))}@media(prefers-reduced-motion:reduce){.nav__heading-chevron{transition-duration:1ms}}.nav__group[data-collapsed=true] .nav__heading-chevron{transform:rotate(-45deg)}.nav__divider{margin:6px 8px;border:0;border-block-start:1px solid var(--shell-sidebar-border-color, var(--shell-border, #e6e6e9))}.nav__list{display:flex;flex-direction:column;gap:var(--shell-sidebar-gap, 2px);margin:0;padding:0;list-style:none}\n"] }]
+        }], propDecorators: { groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], headings: [{ type: i0.Input, args: [{ isSignal: true, alias: "headings", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }] } });
+
+/**
+ * Add to a component's `imports` to get the whole shell vocabulary:
+ *
+ * ```ts
+ * @Component({ imports: [APP_SHELL], … })
+ * ```
+ *
+ * Tree-shaking still applies per component, so unused pieces are dropped.
+ */
+const APP_SHELL = [
+    AppShellComponent,
+    ShellSlotDirective,
+    ShellSlotOutletComponent,
+    ShellNavComponent,
+    ShellNavItemComponent,
+    ShellBreadcrumbComponent,
+    SidebarToggleDirective,
+    ContainerSizeDirective,
+];
+
+/*
+ * Public API of the app shell.
+ *
+ * Everything a host application needs, and nothing it should not reach for:
+ * internals such as the focus trap live behind the barrel.
+ */
+// Configuration & types
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { APP_SHELL, AppShellComponent, BREADCRUMB_DATA_KEY, ContainerSizeDirective, DEFAULT_BREAKPOINTS, DEFAULT_SHELL_CONFIG, SHELL_CONFIG, SHELL_MAIN_ID, SHELL_REGION, SHELL_SIDEBAR_ID, SHELL_SIZES, SHELL_STATE_STORAGE, SIDEBAR_BEHAVIOR, SUBHEADER_DATA_KEY, ShellBreadcrumbComponent, ShellBreadcrumbStore, ShellFooterComponent, ShellNavComponent, ShellNavItemComponent, ShellNavRegistry, ShellSidebarComponent, ShellSlotDirective, ShellSlotOutletComponent, ShellSlotRegistry, ShellStore, ShellSubheaderComponent, ShellTopbarComponent, SidebarToggleDirective, atLeast, atMost, contributeBreadcrumbLabel, contributeNavItems, drawerSidebarBehavior, drawerState, hasSlot, hiddenState, isBelow, localShellStateStorage, manualSidebarBehavior, measureRegion, mergeShellConfig, observeWidth, panelState, provideAppShell, provideShellNavItems, railState, resolveSize, responsiveSidebarBehavior, sizeRank };
+//# sourceMappingURL=danjelp-ngx-app-shell.mjs.map