@slotted/angular 0.0.0-stage → 0.1.0-beta.1

package/fesm2022/slotted-angular-app-shell.mjs

@@ -0,0 +1,1334 @@
+import { createDismissableLayer } from '@slotted/core/dismissable-layer';
+import { extentAtPoint, holdResizeGesture, anchorsAtStart, stepAmountFromPixels, EXTENT_LARGE_STEP_PX, EXTENT_STEP_PX, stepExtent } from '@slotted/core/extent';
+import { createFocusScope } from '@slotted/core/focus';
+import { appShellMessages } from '@slotted/core/i18n';
+import { COMPACT_BELOW, clamp, createWidthGate } from '@slotted/core/measure';
+import { setPortalContainer } from '@slotted/core/portal';
+import { createPresence } from '@slotted/core/presence';
+import { createControllable } from '@slotted/core/state';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, model, input, output, ElementRef, signal, computed, viewChild, DestroyRef, effect, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component, booleanAttribute, Directive, HostAttributeToken } from '@angular/core';
+import { injectMessages } from '@slotted/angular/i18n';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { injectProgressIndicatorDefaults, SlProgressBar } from '@slotted/angular/progress-indicator';
+
+const FALLBACK = {
+    asideMode: 'auto',
+    asideSize: 'md',
+    canvas: 'inset',
+    closeOnNavigate: true,
+    collapsedTo: 'rail',
+    escape: 'close',
+    back: 'close',
+    modal: true,
+    navMode: 'auto',
+    navSide: 'start',
+    navSize: 'md',
+    outsidePress: 'close',
+    primary: 'banner',
+    scroll: 'content',
+    separation: 'rule',
+};
+const APP_SHELL_DEFAULTS = new InjectionToken('slotted app shell defaults', {
+    providedIn: 'root',
+    factory: () => FALLBACK,
+});
+/**
+ * An application decides once how its shell is arranged — which region reaches
+ * the corner, which plane the content sits on, how the navigation behaves when
+ * the space runs out — rather than repeating the same inputs on every route. A
+ * shell that states any of them itself still wins. Its words come from the
+ * language in force (`provideSlotted`).
+ */
+function provideAppShellDefaults(defaults) {
+    return {
+        provide: APP_SHELL_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a shell renders as here, before it states anything of its own. */
+function injectAppShellDefaults() {
+    return inject(APP_SHELL_DEFAULTS);
+}
+
+/**
+ * The inline size the navigation stops being a column at. The stylesheet needs
+ * it literal — `@container (inline-size: var(--x))` is invalid CSS — and the
+ * script needs it to know whether `Escape`, the focus scope and `inert` are in
+ * play. It is the limit of the compact size class, `COMPACT_BELOW`;
+ * `specs/components/app-shell/contract.json` states it once, and
+ * `app-shell.styles.test.mjs` compares the stylesheet's own condition to it.
+ */
+const APP_SHELL_OVERLAY_AT = COMPACT_BELOW;
+let nextId = 0;
+/**
+ * The outer frame of a route: the regions that do not change when the content
+ * does.
+ *
+ * **The layer is composed from `packages/core` and rewritten nowhere.**
+ * `measure` answers the shell's own inline size, `dismissable-layer` owns
+ * `Escape`, the outside press and the single stack, `focus` contains the
+ * keyboard and gives it back to the toggle, and `portal` is told once that this
+ * shell is where an overlay belongs.
+ *
+ * **The element is the consumer's.** `<div slAppShell>` is the frame and the
+ * directive adds the grid, the skip links, the veil and the portal root around
+ * whatever is projected into it.
+ */
+class SlAppShell {
+    /** Whether the navigation region is showing its full panel. Two-way. */
+    navOpen = model(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navOpen" }] : /* istanbul ignore next */ []));
+    /** Whether the secondary pane is showing. Two-way. */
+    asideOpen = model(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "asideOpen" }] : /* istanbul ignore next */ []));
+    /**
+     * How much of the shell's inline size the pane takes as a column, in
+     * `[0, 1]`. Unset means `asideSize` decides. Two-way.
+     */
+    asideExtent = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "asideExtent" }] : /* istanbul ignore next */ []));
+    /** The smallest extent the reader may give the pane. */
+    minAsideExtent = input(0.16, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minAsideExtent" }] : /* istanbul ignore next */ []));
+    /** The largest extent the reader may give the pane. */
+    maxAsideExtent = input(0.6, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxAsideExtent" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then `banner`. */
+    primary = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "primary" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then `inset`. */
+    canvas = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canvas" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then `auto`. */
+    navMode = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navMode" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then `start`. */
+    navSide = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navSide" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then `md`. */
+    navSize = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navSize" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then `auto`. */
+    asideMode = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "asideMode" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then `md`. */
+    asideSize = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "asideSize" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then `rail`. */
+    collapsedTo = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsedTo" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then `content`. */
+    scroll = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scroll" }] : /* istanbul ignore next */ []));
+    /** What draws a seam where two regions touch without a gutter. Defaults to the provider, then `rule`. */
+    separation = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separation" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then `true`. */
+    modal = input(undefined, { ...(ngDevMode ? { debugName: "modal" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** Defaults to the provider, then `close`. */
+    escape = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "escape" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then `close`. */
+    outsidePress = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outsidePress" }] : /* istanbul ignore next */ []));
+    /**
+     * The platform's way back — a phone's gesture, a browser's button — closes
+     * a modal layer instead of leaving the page. Defaults to the provider, then `close`.
+     */
+    back = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "back" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then `true`. */
+    closeOnNavigate = input(undefined, { ...(ngDevMode ? { debugName: "closeOnNavigate" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * landmarks' names, the toggles and the skip links. A static `aria-label`
+     * on a part still wins.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /**
+     * The request, before anything commits. `reason` is what tells the reader's
+     * own choice from the one the layout forced, which is the line
+     * `docs/component-features.md` §15 asks for when it says sidebar persistence
+     * belongs to the product.
+     */
+    navOpenChangeRequest = output();
+    /** The pane's request, with the same shape and the reasons a pane can carry. */
+    asideOpenChangeRequest = output();
+    /** The request before the pane's extent moves, already held inside the limits. */
+    asideExtentChangeRequest = output();
+    defaults = injectAppShellDefaults();
+    host = inject(ElementRef).nativeElement;
+    narrow = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
+    /** Whether a pointer is moving the pane's edge, which the host reports as `data-dragging`. */
+    asideDragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "asideDragging" }] : /* istanbul ignore next */ []));
+    /** The limits, ordered and inside `[0, 1]`. */
+    asideBounds = computed(() => {
+        const min = clamp(this.minAsideExtent(), 0, 1);
+        return { min, max: clamp(this.maxAsideExtent(), min, 1) };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "asideBounds" }] : /* istanbul ignore next */ []));
+    /**
+     * Stable ids, and not `crypto.randomUUID()`: a server render and the
+     * hydration that follows it have to produce the same string, and a random one
+     * produces two.
+     */
+    seq = (nextId += 1);
+    navId = `slotted-app-shell-${this.seq}-nav`;
+    mainId = `slotted-app-shell-${this.seq}-main`;
+    asideId = `slotted-app-shell-${this.seq}-aside`;
+    toggleId = `slotted-app-shell-${this.seq}-toggle`;
+    asideToggleId = `slotted-app-shell-${this.seq}-aside-toggle`;
+    /** The nodes the layer, the focus scope and the `inert` pass need. */
+    nodes = {
+        aside: null,
+        asideToggle: null,
+        banner: null,
+        footer: null,
+        main: null,
+        nav: null,
+        toggle: null,
+    };
+    regions = signal({
+        nav: false,
+        main: false,
+        aside: false,
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "regions" }] : /* istanbul ignore next */ []));
+    resolvedPrimary = computed(() => this.primary() ?? this.defaults.primary, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedPrimary" }] : /* istanbul ignore next */ []));
+    resolvedCanvas = computed(() => this.canvas() ?? this.defaults.canvas, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedCanvas" }] : /* istanbul ignore next */ []));
+    resolvedNavSide = computed(() => this.navSide() ?? this.defaults.navSide, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedNavSide" }] : /* istanbul ignore next */ []));
+    resolvedNavSize = computed(() => this.navSize() ?? this.defaults.navSize, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedNavSize" }] : /* istanbul ignore next */ []));
+    resolvedAsideSize = computed(() => this.asideSize() ?? this.defaults.asideSize, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAsideSize" }] : /* istanbul ignore next */ []));
+    wantedAsideMode = computed(() => this.asideMode() ?? this.defaults.asideMode, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "wantedAsideMode" }] : /* istanbul ignore next */ []));
+    /** The pane's mode, resolved the same way against the same width. */
+    resolvedAsideMode = computed(() => {
+        const wanted = this.wantedAsideMode();
+        if (wanted !== 'auto')
+            return wanted;
+        const narrow = this.narrow();
+        return narrow === undefined ? null : narrow ? 'overlay' : 'inline';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAsideMode" }] : /* istanbul ignore next */ []));
+    asideOverlay = computed(() => this.resolvedAsideMode() === 'overlay' && this.asideOpen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "asideOverlay" }] : /* istanbul ignore next */ []));
+    resolvedCollapsedTo = computed(() => this.collapsedTo() ?? this.defaults.collapsedTo, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedCollapsedTo" }] : /* istanbul ignore next */ []));
+    resolvedScroll = computed(() => this.scroll() ?? this.defaults.scroll, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedScroll" }] : /* istanbul ignore next */ []));
+    resolvedSeparation = computed(() => this.separation() ?? this.defaults.separation, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSeparation" }] : /* istanbul ignore next */ []));
+    resolvedModal = computed(() => this.modal() ?? this.defaults.modal, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedModal" }] : /* istanbul ignore next */ []));
+    resolvedEscape = computed(() => this.escape() ?? this.defaults.escape, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedEscape" }] : /* istanbul ignore next */ []));
+    resolvedBack = computed(() => this.back() ?? this.defaults.back, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedBack" }] : /* istanbul ignore next */ []));
+    resolvedOutsidePress = computed(() => this.outsidePress() ?? this.defaults.outsidePress, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedOutsidePress" }] : /* istanbul ignore next */ []));
+    resolvedCloseOnNavigate = computed(() => this.closeOnNavigate() ?? this.defaults.closeOnNavigate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedCloseOnNavigate" }] : /* istanbul ignore next */ []));
+    /** The family's words in the language in force, with this shell's `messages` laid over them. */
+    t = injectMessages(appShellMessages, this.messages);
+    /** Whether the bar on the content's edge is painted, which `main` reports as `aria-busy`. */
+    busy = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+    wantedMode = computed(() => this.navMode() ?? this.defaults.navMode, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "wantedMode" }] : /* istanbul ignore next */ []));
+    /**
+     * `null` until the gate has measured, which is what keeps `data-nav-mode` off
+     * the host through a server render: below the breakpoint the stylesheet shows
+     * the overlaid panel only under `[data-nav-mode='overlay'][data-open]`, so the
+     * frame before hydration draws the narrow shell closed.
+     */
+    resolvedMode = computed(() => {
+        const wanted = this.wantedMode();
+        if (wanted !== 'auto')
+            return wanted;
+        const narrow = this.narrow();
+        return narrow === undefined ? null : narrow ? 'overlay' : 'inline';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMode" }] : /* istanbul ignore next */ []));
+    overlay = computed(() => this.resolvedMode() === 'overlay' && this.navOpen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []));
+    /**
+     * The veil has a presence of its own, as a dialog's backdrop does. The
+     * stylesheet fades it in from `entering` and out through `exiting`, and a
+     * veil mounted straight at `open` gave that transition no closed style to
+     * start from: it appeared in one frame beside a panel that took two hundred
+     * milliseconds to arrive, and left the same way. One presence for both
+     * layers, because there is one veil: with both regions overlaid and both
+     * open it stays, and it leaves when the last of them does.
+     */
+    veil = computed(() => (this.overlay() || this.asideOverlay()) && this.resolvedModal(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "veil" }] : /* istanbul ignore next */ []));
+    veilStatus = signal('unmounted', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "veilStatus" }] : /* istanbul ignore next */ []));
+    veilRef = viewChild('scrim', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "veilRef" }] : /* istanbul ignore next */ []));
+    /** Created on the first resolved value, so a veil the template opens with does not fade in. */
+    veilPresence = null;
+    skipTargets = computed(() => {
+        const regions = this.regions();
+        const targets = [];
+        if (regions.main)
+            targets.push({ href: this.mainId, label: this.t('skipToMain') });
+        if (regions.nav)
+            targets.push({ href: this.navId, label: this.t('skipToNav') });
+        /* A link to a pane the reader closed is a dead destination. */
+        if (regions.aside && this.asideOpen()) {
+            targets.push({ href: this.asideId, label: this.t('skipToAside') });
+        }
+        return targets;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skipTargets" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        effect(() => {
+            const veil = this.veil();
+            if (this.veilPresence === null) {
+                this.veilPresence = createPresence({
+                    present: veil,
+                    onStatusChange: (next) => this.veilStatus.set(next),
+                });
+                this.veilStatus.set(this.veilPresence.status);
+                return;
+            }
+            this.veilPresence.sync(veil);
+        });
+        effect(() => {
+            this.veilPresence?.setNode(this.veilRef()?.nativeElement ?? null);
+        });
+        destroyRef.onDestroy(() => this.veilPresence?.destroy());
+        afterNextRender(() => {
+            const layer = this.host.querySelector(':scope > [data-part="layer"]');
+            if (layer !== null) {
+                setPortalContainer(layer);
+                destroyRef.onDestroy(() => setPortalContainer(null, layer.ownerDocument));
+            }
+            /* The shell answers its own inline size and not the window's, which is
+               what makes a shell inside a splitter, a preview frame or a Storybook
+               stage behave like the narrow window it is the width of. */
+            if (typeof ResizeObserver === 'undefined')
+                return;
+            const gate = createWidthGate(this.host, {
+                at: APP_SHELL_OVERLAY_AT,
+                onChange: (narrow) => this.narrow.set(narrow),
+            });
+            this.narrow.set(gate.narrow());
+            destroyRef.onDestroy(() => gate.destroy());
+        });
+        /**
+         * Crossing into the overlaid mode with the region open closes it, and says
+         * `resize`. A product persisting the reader's own choice writes
+         * `if (reason !== 'resize') persist(next)` and keeps the wide preference
+         * through every narrow window the reader ever opens.
+         */
+        /* `undefined` until the first resolved mode is seen: a mode *forced* to
+           overlay is the region's starting point, not a crossing, and the first
+           run closed a region the template had just opened. Only a mode the width
+           decided — `auto` resolving narrow — is a crossing on first sight. */
+        let wasOverlay;
+        effect(() => {
+            const mode = this.resolvedMode();
+            if (mode === null)
+                return;
+            const overlay = mode === 'overlay';
+            const first = wasOverlay === undefined;
+            const entered = overlay && (first ? this.wantedMode() === 'auto' : !wasOverlay);
+            wasOverlay = overlay;
+            if (!entered)
+                return;
+            queueMicrotask(() => {
+                if (this.navOpen())
+                    this.request(false, 'resize', undefined);
+            });
+        });
+        let asideWasOverlay;
+        effect(() => {
+            const mode = this.resolvedAsideMode();
+            if (mode === null)
+                return;
+            const overlay = mode === 'overlay';
+            const first = asideWasOverlay === undefined;
+            const entered = overlay && (first ? this.wantedAsideMode() === 'auto' : !asideWasOverlay);
+            asideWasOverlay = overlay;
+            if (!entered)
+                return;
+            queueMicrotask(() => {
+                if (this.asideOpen())
+                    this.requestAside(false, 'resize', undefined);
+            });
+        });
+        /**
+         * The overlaid region is a dismissable layer with a focus scope over it.
+         * `@slotted/core/dismissable-layer` inerts every sibling of the layer while
+         * it is modal, which is the whole of the modal contract: the reader is in
+         * the panel, and the ways out are `Escape`, the veil, a destination, and
+         * whatever control the consumer put inside the panel. The toggle is inert
+         * with the rest of the shell, exactly as a dialog's trigger is, and is
+         * registered as a branch so a press on it is never read as a press outside.
+         *
+         * No surveyed implementation inerts anything: Vaadin and PatternFly draw
+         * the veil and leave what is under it operable.
+         */
+        /**
+         * One layer per region, and the same three modules for both: the pane's
+         * layer is the navigation's with the region, the trigger and the request
+         * swapped. `@slotted/core/dismissable-layer` keeps one stack, so with both
+         * open — only possible with both modes forced — `Escape` reaches the topmost.
+         */
+        const raise = (open, panel, trigger, close) => {
+            let layer = null;
+            let release = null;
+            effect(() => {
+                const isOpen = open();
+                const modal = this.resolvedModal();
+                const escape = this.resolvedEscape();
+                const outsidePress = this.resolvedOutsidePress();
+                /* A history entry is a modal layer's: a layer the page stays reachable
+                   under has no claim on the way back. */
+                const back = modal && this.resolvedBack() === 'close';
+                release?.();
+                release = null;
+                layer?.destroy();
+                layer = null;
+                if (!isOpen)
+                    return;
+                queueMicrotask(() => {
+                    const node = panel();
+                    if (node === null || !open())
+                        return;
+                    const control = trigger();
+                    layer = createDismissableLayer(node, {
+                        ...(control === null ? {} : { branches: [control] }),
+                        back,
+                        content: node,
+                        escape: escape === 'close',
+                        modal,
+                        onDismiss: (request) => {
+                            if (request.reason === 'outsidePress' && outsidePress === 'none') {
+                                return request.cancel();
+                            }
+                            close(request.reason, request.source);
+                        },
+                        outsidePress: outsidePress === 'close',
+                        outsidePressEvent: 'click',
+                    });
+                    const scope = createFocusScope(node, {
+                        contain: modal,
+                        initial: 'first',
+                        ...(control === null ? {} : { restore: () => control }),
+                    });
+                    scope.enter();
+                    release = () => scope.destroy();
+                });
+            });
+            destroyRef.onDestroy(() => {
+                release?.();
+                layer?.destroy();
+            });
+        };
+        raise(() => this.overlay(), () => this.nodes.nav, () => this.nodes.toggle, (reason, source) => this.request(false, reason, source));
+        raise(() => this.asideOverlay(), () => this.nodes.aside, () => this.nodes.asideToggle, (reason, source) => this.requestAside(false, reason, source));
+    }
+    /** The root, which the pane's extent is a fraction of. */
+    get element() {
+        return this.host;
+    }
+    /**
+     * Asks to move the pane's extent, held inside the limits. `undefined`
+     * travels whole: it is the pane back on its size step.
+     */
+    requestAsideExtent(next, reason, source) {
+        const { max, min } = this.asideBounds();
+        const wanted = next === undefined ? undefined : clamp(next, min, max);
+        if (wanted === this.asideExtent())
+            return;
+        let cancelled = false;
+        const state = createControllable({
+            initial: this.asideExtent(),
+            onRequest: (raw) => {
+                cancelled = raw.cancelled;
+                this.asideExtentChangeRequest.emit({
+                    cancel: () => raw.cancel(),
+                    get cancelled() {
+                        return raw.cancelled;
+                    },
+                    previous: raw.previous,
+                    reason,
+                    source: raw.source,
+                    value: raw.value,
+                });
+            },
+        });
+        if (!state.request(wanted, reason, source) || cancelled)
+            return;
+        this.asideExtent.set(wanted);
+    }
+    /** A region says it exists, so a skip link is never written to a target nobody rendered. */
+    registerRegion(region) {
+        this.regions.update((current) => ({ ...current, [region]: true }));
+        return () => this.regions.update((current) => ({ ...current, [region]: false }));
+    }
+    /** Asks to move the region, carrying the reason and the originating event. */
+    request(next, reason, source) {
+        if (next === this.navOpen())
+            return;
+        let cancelled = false;
+        const state = createControllable({
+            initial: this.navOpen(),
+            onRequest: (raw) => {
+                cancelled = raw.cancelled;
+                this.navOpenChangeRequest.emit({
+                    cancel: () => raw.cancel(),
+                    get cancelled() {
+                        return raw.cancelled;
+                    },
+                    previous: raw.previous,
+                    reason,
+                    source: raw.source,
+                    value: raw.value,
+                });
+            },
+        });
+        if (!state.request(next, reason, source) || cancelled)
+            return;
+        this.navOpen.set(next);
+    }
+    /** Asks to move the pane, carrying the reason and the originating event. */
+    requestAside(next, reason, source) {
+        if (next === this.asideOpen())
+            return;
+        let cancelled = false;
+        const state = createControllable({
+            initial: this.asideOpen(),
+            onRequest: (raw) => {
+                cancelled = raw.cancelled;
+                this.asideOpenChangeRequest.emit({
+                    cancel: () => raw.cancel(),
+                    get cancelled() {
+                        return raw.cancelled;
+                    },
+                    previous: raw.previous,
+                    reason,
+                    source: raw.source,
+                    value: raw.value,
+                });
+            },
+        });
+        if (!state.request(next, reason, source) || cancelled)
+            return;
+        this.asideOpen.set(next);
+    }
+    /** Asks to show the pane, with the reason `programmatic`. */
+    openAside() {
+        this.requestAside(true, 'programmatic', undefined);
+    }
+    /** Asks to hide it, with the reason `programmatic`. */
+    closeAside() {
+        this.requestAside(false, 'programmatic', undefined);
+    }
+    /** Asks to show the region, with the reason `programmatic`. */
+    openNav() {
+        this.request(true, 'programmatic', undefined);
+    }
+    /** Asks to hide it, with the reason `programmatic`. */
+    closeNav() {
+        this.request(false, 'programmatic', undefined);
+    }
+    /** Moves focus into the content region, which is where a skip link sends it. */
+    focusMain() {
+        this.nodes.main?.focus();
+    }
+    /**
+     * A click that lands on an `a[href]` inside the region asks to close, in the
+     * overlaid mode only. Vaadin and PatternFly both do it, and without it a
+     * phone costs two taps per destination. `defaultPrevented` is no refusal
+     * here: a client-side router prevents the native navigation of every link it
+     * routes. A disabled destination (`aria-disabled="true"`) stays open; any
+     * other refusal cancels the request.
+     */
+    onClick(event) {
+        if (!this.overlay() || !this.resolvedCloseOnNavigate())
+            return;
+        const link = event.target?.closest?.('a[href]');
+        if (!link || this.nodes.nav?.contains(link) !== true)
+            return;
+        if (link.getAttribute('aria-disabled') === 'true')
+            return;
+        this.request(false, 'select', event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlAppShell, isStandalone: true, selector: "[slAppShell]", inputs: { navOpen: { classPropertyName: "navOpen", publicName: "navOpen", isSignal: true, isRequired: false, transformFunction: null }, asideOpen: { classPropertyName: "asideOpen", publicName: "asideOpen", isSignal: true, isRequired: false, transformFunction: null }, asideExtent: { classPropertyName: "asideExtent", publicName: "asideExtent", isSignal: true, isRequired: false, transformFunction: null }, minAsideExtent: { classPropertyName: "minAsideExtent", publicName: "minAsideExtent", isSignal: true, isRequired: false, transformFunction: null }, maxAsideExtent: { classPropertyName: "maxAsideExtent", publicName: "maxAsideExtent", isSignal: true, isRequired: false, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, canvas: { classPropertyName: "canvas", publicName: "canvas", isSignal: true, isRequired: false, transformFunction: null }, navMode: { classPropertyName: "navMode", publicName: "navMode", isSignal: true, isRequired: false, transformFunction: null }, navSide: { classPropertyName: "navSide", publicName: "navSide", isSignal: true, isRequired: false, transformFunction: null }, navSize: { classPropertyName: "navSize", publicName: "navSize", isSignal: true, isRequired: false, transformFunction: null }, asideMode: { classPropertyName: "asideMode", publicName: "asideMode", isSignal: true, isRequired: false, transformFunction: null }, asideSize: { classPropertyName: "asideSize", publicName: "asideSize", isSignal: true, isRequired: false, transformFunction: null }, collapsedTo: { classPropertyName: "collapsedTo", publicName: "collapsedTo", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, separation: { classPropertyName: "separation", publicName: "separation", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, escape: { classPropertyName: "escape", publicName: "escape", isSignal: true, isRequired: false, transformFunction: null }, outsidePress: { classPropertyName: "outsidePress", publicName: "outsidePress", isSignal: true, isRequired: false, transformFunction: null }, back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null }, closeOnNavigate: { classPropertyName: "closeOnNavigate", publicName: "closeOnNavigate", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navOpen: "navOpenChange", asideOpen: "asideOpenChange", asideExtent: "asideExtentChange", navOpenChangeRequest: "navOpenChangeRequest", asideOpenChangeRequest: "asideOpenChangeRequest", asideExtentChangeRequest: "asideExtentChangeRequest" }, host: { attributes: { "data-ui": "app-shell", "data-part": "root" }, listeners: { "click": "onClick($event)" }, properties: { "attr.data-primary": "resolvedPrimary()", "attr.data-canvas": "resolvedCanvas()", "attr.data-nav-mode": "resolvedMode()", "attr.data-aside-mode": "resolvedAsideMode()", "attr.data-nav-side": "resolvedNavSide()", "attr.data-nav-size": "resolvedNavSize()", "attr.data-aside-size": "resolvedAsideSize()", "attr.data-collapsed-to": "resolvedCollapsedTo()", "attr.data-scroll": "resolvedScroll()", "attr.data-separation": "resolvedSeparation()", "attr.data-open": "navOpen() ? '' : null", "attr.data-dragging": "asideDragging() ? '' : null" } }, viewQueries: [{ propertyName: "veilRef", first: true, predicate: ["scrim"], descendants: true, isSignal: true }], exportAs: ["slAppShell"], ngImport: i0, template: `@if (skipTargets().length > 0) {
+      <div data-part="skip">
+        @for (target of skipTargets(); track target.href) {
+          <a [href]="'#' + target.href">{{ target.label }}</a>
+        }
+      </div>
+    }
+    <ng-content />
+    @if (veilStatus() !== 'unmounted') {
+      <div data-part="scrim" [attr.data-status]="veilStatus()" #scrim></div>
+    }
+    <div data-part="layer" #layer></div>`, isInline: true, styles: ["@layer slotted.components{[data-ui=app-shell]{--_gutter: var( --slotted-app-shell-gutter, calc(var(--slotted-control-gap-lg, 8px) + var(--slotted-space-2, .25rem)) );--_row-inset: var(--slotted-app-shell-row-inset-size, var(--slotted-space-4, .5rem));--_row-mark: var(--slotted-app-shell-row-mark-size, var(--slotted-control-height-md, 34px));--_row-gap: var(--slotted-control-gap-md, 8px);--_row-font-size: var( --slotted-app-shell-row-text-size, var(--slotted-font-size-sm, .8125rem) );--_row-line-height: var( --slotted-app-shell-row-text-line-height, var(--slotted-line-height-sm, 1.45) );--slotted-app-shell-row-inset: var(--_row-inset);--slotted-app-shell-row-mark: var(--_row-mark);--slotted-app-shell-row-gap: var(--_row-gap);--slotted-app-shell-row-height: var(--_row-mark);--slotted-app-shell-row-font-size: var(--_row-font-size);--slotted-app-shell-row-line-height: var(--_row-line-height);--_nav-size: var(--slotted-app-shell-nav-size-md, 15rem);--_nav-overlay-size: var(--slotted-app-shell-nav-overlay-size, 20rem);--_aside-size: var(--slotted-app-shell-aside-size-md, 20rem);--_rail-size: var( --slotted-app-shell-rail-size, calc(var(--_row-mark) + var(--_row-inset) * 2) );--_edge: var(--_gutter);--_nav-inset: 0px;--_nav-edges: 0px;--_frame: var(--slotted-app-shell-frame, var(--slotted-surface-sunken, Canvas));--_canvas: var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas));--_ink: var(--slotted-app-shell-color, var(--slotted-text, CanvasText));--_scrollbar-thumb: var( --slotted-app-shell-scrollbar-thumb-color, var(--slotted-border-strong, ButtonBorder) );--_scrollbar-track: var(--slotted-app-shell-scrollbar-track-color, transparent);--_rule: var(--slotted-app-shell-border-color, var(--slotted-border-subtle, ButtonBorder));--_rule-width: var(--slotted-border-width-thin, 1px);--_radius: var(--slotted-app-shell-radius, var(--slotted-radius-lg, 8px));--_elevation: var(--slotted-app-shell-elevation, var(--slotted-shadow-xs));--_seam: var(--_rule-width) solid var(--_rule);--_seam-width: var(--_rule-width);--_inner-radius: calc(var(--_radius) - var(--_rule-width));--_scrim: var(--slotted-app-shell-scrim, var(--slotted-scrim, Canvas));--_banner-size: var( --slotted-app-shell-banner-block-size, calc(var(--slotted-control-height-lg, 38px) + var(--slotted-space-5, .75rem) * 2) );--_duration: var(--slotted-duration-medium);--_easing: var(--slotted-easing-standard, cubic-bezier(.2, 0, 0, 1));background-color:var(--_frame);background-image:var(--slotted-app-shell-frame-image, none);background-position:center;background-size:cover;color:var(--_ink);container-name:slotted-app-shell;container-type:inline-size;display:grid;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto;min-block-size:100%;min-inline-size:0;overflow-x:clip;overflow-y:visible;overflow-inline:clip;overflow-block:visible;position:relative}[data-ui=app-shell][data-nav-size=sm]{--_nav-size: var(--slotted-app-shell-nav-size-sm, 13rem)}[data-ui=app-shell][data-nav-size=lg]{--_nav-size: var(--slotted-app-shell-nav-size-lg, 18rem)}[data-ui=app-shell][data-aside-size=sm]{--_aside-size: var(--slotted-app-shell-aside-size-sm, 16rem)}[data-ui=app-shell][data-aside-size=lg]{--_aside-size: var(--slotted-app-shell-aside-size-lg, 26rem)}[data-ui=app-shell][data-scroll=content]{block-size:100%;container-type:size;max-block-size:100dvh}[data-ui=app-shell]>[data-part=skip]{inset-block-start:0;inset-inline-start:0;position:absolute;z-index:var(--slotted-z-index-popover, 1100)}[data-ui=app-shell]>[data-part=skip]>a{background-color:var(--_canvas);border:var(--_rule-width) solid var(--_rule);border-radius:var(--slotted-control-radius, 4px);box-shadow:var(--slotted-shadow-md);color:var(--slotted-text, CanvasText);display:inline-block;font-size:var(--slotted-control-font-size-md, 13px);font-weight:var(--slotted-font-weight-medium, 500);inset-block-start:var(--_gutter);inset-inline-start:var(--_gutter);padding-block:var(--slotted-space-3, .375rem);padding-inline:var(--slotted-space-5, .75rem);position:absolute;text-decoration:none;transition:translate var(--_duration) var(--_easing);translate:0 -200%;white-space:nowrap}[data-ui=app-shell]>[data-part=skip]>a:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px);translate:0 0}[data-ui=app-shell]>[data-part=banner]{align-items:center;background-color:var(--slotted-app-shell-banner-surface, transparent);color:var( --slotted-app-shell-banner-color, var(--slotted-app-shell-color, var(--slotted-text, CanvasText)) );container-name:slotted-app-shell-banner;container-type:inline-size;display:flex;gap:var(--_row-gap);grid-area:1 / 1 / 2 / -1;min-block-size:var(--_banner-size);min-inline-size:0;padding-inline:var(--_edge)}[data-ui=app-shell] [data-part=brand]{align-items:center;display:flex;flex:0 1 auto;font-weight:var(--slotted-font-weight-semibold, 600);gap:var(--_row-gap);min-inline-size:0;padding-inline-start:var(--_row-inset)}[data-ui=app-shell] [data-part=brand]>*:not([data-part=nav-toggle]){min-inline-size:0;overflow:var(--slotted-app-shell-brand-overflow, hidden);text-overflow:ellipsis;white-space:var(--slotted-app-shell-brand-wrap, nowrap)}[data-ui=app-shell]>[data-part=banner]>[data-part=actions]{align-items:center;display:flex;flex:0 1 auto;min-inline-size:0;gap:var(--slotted-control-gap-sm, 6px);margin-inline-start:auto;padding-inline-end:var(--_row-inset)}[data-ui=app-shell]>[data-part=banner]>[data-part=actions]>*{flex-shrink:0}[data-ui=app-shell]>[data-part=banner]>[data-part=centre]{align-items:center;display:flex;flex:1 1 auto;gap:var(--_row-gap);min-inline-size:0}[data-ui=app-shell]>[data-part=nav]{background-color:var(--slotted-app-shell-nav-surface, transparent);box-sizing:border-box;color:var( --slotted-app-shell-nav-color, var(--slotted-app-shell-color, var(--slotted-text, CanvasText)) );container-name:slotted-app-shell-nav;container-type:inline-size;display:flex;flex-direction:column;grid-area:2 / 1 / 3 / 2;min-block-size:0;min-inline-size:0;overflow:hidden;transition:inline-size var(--_duration) var(--_easing),visibility var(--_duration) step-start}[data-ui=app-shell]>[data-part=nav]>[data-part=nav-header],[data-ui=app-shell]>[data-part=nav]>[data-part=nav-footer]{align-items:center;display:flex;flex:0 0 auto;gap:var(--_row-gap);min-block-size:var(--_rail-size);min-inline-size:0;padding-block:var(--_row-inset)}[data-ui=app-shell]>[data-part=nav]>:is([data-part=nav-header],[data-part=nav-body],[data-part=nav-footer]){padding-inline:var(--_nav-inset)}[data-ui=app-shell]>[data-part=nav]>[data-part=nav-body]{align-items:stretch;display:flex;flex:1 1 auto;flex-direction:column;gap:var(--slotted-space-1, .125rem);min-block-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;padding-block:var(--slotted-space-4, .5rem);scrollbar-color:var(--_scrollbar-thumb) var(--_scrollbar-track);scrollbar-gutter:stable;scrollbar-width:thin}[data-ui=app-shell]>[data-part=main]{background-color:var( --slotted-app-shell-main-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );color:var( --slotted-app-shell-main-color, var(--slotted-app-shell-color, var(--slotted-text, CanvasText)) );grid-area:2 / 2 / 3 / 3;isolation:isolate;min-block-size:0;min-inline-size:0}[data-ui=app-shell][data-scroll=content]>[data-part=main]{overflow:auto}[data-ui=app-shell]>[data-part=progress]{contain:strict;grid-area:2 / 2 / 3 / 3;inset-block-start:calc(-1 * var(--_progress-lift, 0px));min-block-size:0;min-inline-size:0;overflow:clip;pointer-events:none;position:relative;z-index:1}[data-ui=app-shell][data-scroll=document]>[data-part=progress]{--slotted-progress-indicator-position: sticky}[data-ui=app-shell]>[data-part=main]:focus{outline:none}[data-ui=app-shell]>[data-part=main]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=app-shell]>[data-part=aside]{background-color:var( --slotted-app-shell-aside-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );box-sizing:border-box;color:var( --slotted-app-shell-aside-color, var(--slotted-app-shell-color, var(--slotted-text, CanvasText)) );display:flex;flex-direction:column;grid-area:3 / 1 / 4 / -1;min-block-size:0;min-inline-size:0}[data-ui=app-shell][data-scroll=content]>[data-part=aside]{overflow:auto}[data-ui=app-shell]:not([data-aside-mode=overlay])>[data-part=aside]:not([data-open]){display:none}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-header],[data-ui=app-shell]>[data-part=aside]>[data-part=aside-footer]{align-items:center;display:flex;flex:0 0 auto;gap:var(--_row-gap);min-block-size:var(--_rail-size);min-inline-size:0;padding-block:var(--_row-inset);padding-inline:calc(var(--_row-inset) + var(--_row-gap))}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-header]{font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-header]>:not([data-part]){flex:1 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-footer]{justify-content:flex-end}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-body]{flex:1 1 auto;min-block-size:0;min-inline-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;padding-block:var(--slotted-space-5, .75rem);padding-inline:calc(var(--_row-inset) + var(--_row-gap));scrollbar-color:var(--_scrollbar-thumb) var(--_scrollbar-track);scrollbar-gutter:stable;scrollbar-width:thin}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-body][data-inset=none]{padding:0}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-resizer]{--_resizer-thickness: var(--slotted-space-6, 1rem);--_resizer-reach: var(--slotted-target-min, 24px);background:transparent;border:0 solid transparent;border-inline-start-width:var(--slotted-border-width-thick, 2px);box-sizing:border-box;cursor:col-resize;display:none;inline-size:var(--_resizer-thickness);inset-block:0;inset-inline-start:0;position:absolute;touch-action:none;transition:border-color var(--_duration) var(--_easing);z-index:1}[data-ui=app-shell][data-nav-side=end]>[data-part=aside]>[data-part=aside-resizer]{border-inline-end-width:var(--slotted-border-width-thick, 2px);border-inline-start-width:0;inset-inline-end:0;inset-inline-start:auto}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-resizer]:before{content:\"\";inset-block:0;inset-inline:calc((var(--_resizer-reach) - var(--_resizer-thickness)) / -2);position:absolute}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-resizer]:not([data-disabled]):hover,[data-ui=app-shell]>[data-part=aside]>[data-part=aside-resizer]:focus-visible,[data-ui=app-shell][data-dragging]>[data-part=aside]>[data-part=aside-resizer]{border-color:var( --slotted-app-shell-resizer-color, var(--slotted-border-strong, ButtonBorder) )}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-resizer]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}[data-ui=app-shell]>[data-part=footer]{align-items:center;background-color:var(--slotted-app-shell-footer-surface, transparent);color:var( --slotted-app-shell-footer-color, var(--slotted-app-shell-color, var(--slotted-text-muted, GrayText)) );display:flex;font-size:var(--slotted-control-font-size-sm, 12px);gap:var(--_row-gap);grid-area:4 / 1 / 5 / -1;min-inline-size:0;padding-block:var(--slotted-space-3, .375rem);padding-inline:calc(var(--_edge) + var(--_row-inset))}[data-ui=app-shell]>[data-part=layer]{display:contents}[data-ui=app-shell][data-canvas=inset]>[data-part=nav]{border-radius:var(--_radius);margin-block:var(--_gutter);margin-inline-start:var(--_gutter)}[data-ui=app-shell][data-canvas=floating]>[data-part=main],[data-ui=app-shell][data-canvas=floating]>[data-part=aside],[data-ui=app-shell][data-canvas=inset]>[data-part=main],[data-ui=app-shell][data-canvas=inset]>[data-part=aside]{border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--_elevation);margin-block:var(--_gutter);margin-inline:var(--_gutter)}[data-ui=app-shell][data-canvas=floating]>[data-part=aside],[data-ui=app-shell][data-canvas=inset]>[data-part=aside]{margin-inline-start:0}[data-ui=app-shell][data-canvas=floating]>[data-part=footer],[data-ui=app-shell][data-canvas=panel]>[data-part=footer],[data-ui=app-shell][data-canvas=inset]>[data-part=footer]{padding-block-start:0}[data-ui=app-shell][data-canvas=floating][data-nav-mode=overlay]>[data-part=main],[data-ui=app-shell][data-canvas=inset][data-nav-mode=overlay]>[data-part=main]{border-block-end:0;border-inline:0;border-radius:0;box-shadow:none;margin:0}[data-ui=app-shell][data-canvas=flush]{--_edge: var(--_row-inset);--_nav-edges: var(--_seam-width);--_nav-inset: var(--_row-inset)}[data-ui=app-shell][data-canvas=flush]>[data-part=banner]{background-color:var( --slotted-app-shell-banner-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui=app-shell][data-canvas=flush]>[data-part=nav]{background-color:var( --slotted-app-shell-nav-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui=app-shell][data-canvas=flush]>[data-part=main]{background-color:var(--slotted-app-shell-main-surface, transparent)}[data-ui=app-shell][data-canvas=flush]>[data-part=aside]{background-color:var( --slotted-app-shell-aside-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui=app-shell][data-canvas=flush]>[data-part=footer]{background-color:var( --slotted-app-shell-footer-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui=app-shell][data-canvas=flush]>[data-part=nav]{padding-block:var(--_gutter)}[data-ui=app-shell][data-canvas=flush]>[data-part=banner]{border-block-end:var(--_seam)}[data-ui=app-shell][data-canvas=flush]>[data-part=footer]{border-block-start:var(--_seam)}[data-ui=app-shell][data-canvas=flush]>[data-part=aside]{border-block-start:var(--_seam)}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])>[data-part=nav]>[data-part=nav-footer]{border-block-start:var(--_seam)}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])>[data-part=aside]>[data-part=aside-header]{border-block-end:var(--_seam)}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])>[data-part=aside]>[data-part=aside-footer]{border-block-start:var(--_seam)}[data-ui=app-shell][data-canvas=floating]>[data-part=nav]{background-color:var( --slotted-app-shell-nav-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--_elevation);margin-block:var(--_gutter);margin-inline-start:var(--_gutter)}[data-ui=app-shell][data-canvas=floating]{--_edge: calc(var(--_gutter) + var(--_rule-width) + var(--_row-inset));--_nav-edges: calc(2 * var(--_rule-width));--_nav-inset: var(--_row-inset)}[data-ui=app-shell][data-canvas=floating][data-nav-side=end]>[data-part=nav]{margin-inline:0 var(--_gutter)}[data-ui=app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main]:before,[data-ui=app-shell][data-canvas=panel]:before{background-color:var( --slotted-app-shell-main-surface, var(--slotted-app-shell-canvas, var(--slotted-surface)) );border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--_elevation);content:\"\";grid-area:1 / 2 / 3 / 3;margin:var(--_gutter);min-inline-size:0}[data-ui=app-shell][data-canvas=panel]:before{grid-area:2 / 1 / 3 / -1;margin:0}[data-ui=app-shell][data-canvas=panel]:is([data-primary=nav],[data-primary=main]):before{grid-area:1 / 1 / 3 / -1}[data-ui=app-shell][data-nav-mode=overlay][data-canvas]:before{content:none}[data-ui=app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main]>[data-part=banner]{margin-block-start:calc(var(--_gutter) + var(--_rule-width));margin-inline:calc(var(--_gutter) + var(--_rule-width));padding-inline:0}[data-ui=app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main]>[data-part=main]{border:none;border-radius:0 0 var(--_inner-radius) var(--_inner-radius);box-shadow:none;margin-block:0 calc(var(--_gutter) + var(--_rule-width));margin-inline:calc(var(--_gutter) + var(--_rule-width))}[data-ui=app-shell][data-primary=main]>[data-part=banner],[data-ui=app-shell][data-primary=main][data-nav-side=end]>[data-part=banner],[data-ui=app-shell][data-canvas=panel][data-primary=nav]>[data-part=banner],[data-ui=app-shell][data-canvas=panel][data-primary=nav][data-nav-side=end]>[data-part=banner]{border-block-end:var(--_seam);grid-column:2 / 3}[data-ui=app-shell][data-primary=main][data-nav-mode=overlay]>[data-part=banner]{margin:0;padding-inline:var(--_edge)}[data-ui=app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main][data-nav-mode=overlay]>[data-part=main]{border-radius:0;margin:0}[data-ui=app-shell][data-canvas=panel]{--_edge: calc(var(--_rule-width) + var(--_row-inset));--_nav-edges: var(--_seam-width);--_nav-inset: var(--_row-inset)}[data-ui=app-shell][data-canvas=floating][data-nav-mode=overlay],[data-ui=app-shell][data-canvas=panel][data-nav-mode=overlay]{--_edge: var(--_gutter)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]){box-sizing:border-box;padding-block-end:var(--_gutter);padding-inline:var(--_gutter)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):is([data-primary=nav],[data-primary=main]){padding-block-start:var(--_gutter)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay])>[data-part=nav]{border-end-start-radius:var(--_inner-radius);border-start-start-radius:var(--_inner-radius);margin:var(--_rule-width) 0 var(--_rule-width) var(--_rule-width)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay])[data-nav-side=end]>[data-part=nav]{border-radius:0 var(--_inner-radius) var(--_inner-radius) 0;margin:var(--_rule-width) var(--_rule-width) var(--_rule-width) 0}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay])>[data-part=main]{border-end-end-radius:var(--_inner-radius);margin-block-end:var(--_rule-width);margin-inline-end:var(--_rule-width)}[data-ui=app-shell][data-canvas=panel][data-primary=banner]:not([data-nav-mode=overlay])>[data-part=main]{border-start-end-radius:var(--_inner-radius);margin-block-start:var(--_rule-width)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):not([data-primary=banner])>[data-part=banner]{margin-block-start:var(--_rule-width);margin-inline-end:var(--_rule-width)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):has(>[data-part=aside][data-open])>[data-part=main]{border-end-end-radius:0;border-start-end-radius:0;margin-inline-end:0}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):has(>[data-part=aside][data-open])>[data-part=banner]{margin-inline-end:0}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):not([data-aside-mode=overlay])>[data-part=aside]{border-end-end-radius:var(--_inner-radius);border-start-end-radius:var(--_inner-radius);margin:var(--_rule-width) var(--_rule-width) var(--_rule-width) 0}[data-ui=app-shell][data-canvas=panel][data-nav-mode=overlay]>[data-part=main]{border-block-start:var(--_rule-width) solid var(--_rule)}[data-ui=app-shell]:is([data-canvas=flush],[data-primary=main]),[data-ui=app-shell][data-canvas=panel][data-primary=nav]{--_progress-lift: var(--_seam-width)}[data-ui=app-shell][data-canvas=panel][data-primary=banner]{--_progress-lift: var(--_rule-width)}[data-ui=app-shell][data-canvas=panel][data-nav-mode=overlay]{--_progress-lift: 0px}[data-ui=app-shell][data-canvas=floating]>[data-part=progress],[data-ui=app-shell][data-canvas=inset]>[data-part=progress]{border-radius:var(--_radius);margin-block:var(--_gutter);margin-inline:var(--_gutter)}[data-ui=app-shell][data-canvas=floating][data-nav-mode=overlay]>[data-part=progress],[data-ui=app-shell][data-canvas=inset][data-nav-mode=overlay]>[data-part=progress]{border-radius:0;margin:0}[data-ui=app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main]>[data-part=progress]{border-radius:0 0 var(--_inner-radius) var(--_inner-radius);margin-block:0 calc(var(--_gutter) + var(--_rule-width));margin-inline:calc(var(--_gutter) + var(--_rule-width))}[data-ui=app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main][data-nav-mode=overlay]>[data-part=progress]{border-radius:0;margin:0}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay])>[data-part=progress]{border-end-end-radius:var(--_inner-radius);margin-block-end:var(--_rule-width);margin-inline-end:var(--_rule-width)}[data-ui=app-shell][data-canvas=panel][data-primary=banner]:not([data-nav-mode=overlay])>[data-part=progress]{border-start-end-radius:var(--_inner-radius);margin-block-start:var(--_rule-width)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):has(>[data-part=aside][data-open])>[data-part=progress]{border-end-end-radius:0;border-start-end-radius:0;margin-inline-end:0}[data-ui=app-shell][data-separation=tone]{--_seam: none;--_seam-width: 0px}[data-ui=app-shell][data-canvas=flush][data-separation=tone]>[data-part=footer]{--_ground: var( --slotted-app-shell-footer-surface, var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) ) )}[data-ui=app-shell][data-canvas=flush][data-separation=tone]:not([data-primary=main])>[data-part=banner]{--_ground: var( --slotted-app-shell-banner-surface, var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) ) )}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])[data-separation=tone]>[data-part=nav]{--_ground: var( --slotted-app-shell-nav-surface, var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) ) )}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])[data-separation=tone]>[data-part=aside]{--_ground: var( --slotted-app-shell-aside-surface, var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) ) )}[data-ui=app-shell][data-separation=tone]>[data-part=nav]>[data-part=nav-rail]{--_ground: var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) )}[data-ui=app-shell][data-canvas=flush][data-separation=tone]:not([data-primary=main])>[data-part=banner],[data-ui=app-shell][data-canvas=flush][data-separation=tone]>[data-part=footer],[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])[data-separation=tone]>:is([data-part=nav],[data-part=aside]),[data-ui=app-shell][data-separation=tone]>[data-part=nav]>[data-part=nav-rail]{--slotted-tone-secondary-subtle-hover: color-mix( in oklab, var(--_ground), var(--slotted-text) 4% );--slotted-tone-secondary-subtle-active: color-mix( in oklab, var(--_ground), var(--slotted-text) 7% );background-color:var(--_ground)}[data-ui=app-shell][data-canvas=flush][data-separation=tone]>[data-part=main]{background-color:var( --slotted-app-shell-main-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui=app-shell]>[data-part=nav]:has(>[data-part=nav-rail]){display:grid;grid-template-columns:var(--_rail-size) minmax(var(--_nav-size),1fr);grid-template-rows:auto minmax(0,1fr) auto}[data-ui=app-shell]>[data-part=nav]>[data-part=nav-rail]{align-items:center;border-inline-end:var(--_seam);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--slotted-space-1, .125rem);grid-area:1 / 1 / -1 / 2;min-block-size:0;overflow:auto;overscroll-behavior:contain;padding-block:var(--_row-inset);scrollbar-width:none}[data-ui=app-shell]>[data-part=nav]:has(>[data-part=nav-rail])>[data-part=nav-header]{grid-area:1 / 2 / 2 / 3}[data-ui=app-shell]>[data-part=nav]:has(>[data-part=nav-rail])>[data-part=nav-body]{grid-area:2 / 2 / 3 / 3}[data-ui=app-shell]>[data-part=nav]:has(>[data-part=nav-rail])>[data-part=nav-footer]{grid-area:3 / 2 / 4 / 3}[data-ui=app-shell]>[data-part=nav]:has(>[data-part=nav-rail])>:is([data-part=nav-header],[data-part=nav-body],[data-part=nav-footer]){padding-inline-start:var(--_row-inset);transition:visibility var(--_duration) step-start}[data-ui=app-shell][data-nav-mode=inline][data-open]>[data-part=nav]:has(>[data-part=nav-rail]){inline-size:calc(var(--_rail-size) + var(--_nav-size) + var(--_nav-edges))}[data-ui=app-shell][data-nav-mode=inline]:not([data-open])>[data-part=nav]:has(>[data-part=nav-rail]){inline-size:calc(var(--_rail-size) + var(--_nav-edges))}[data-ui=app-shell][data-nav-mode=inline]:not([data-open])>[data-part=nav]:has(>[data-part=nav-rail])>:is([data-part=nav-header],[data-part=nav-body],[data-part=nav-footer]){transition:visibility var(--_duration) step-end;visibility:hidden}[data-ui=app-shell][data-nav-mode=inline]:not([data-open])>[data-part=nav]>[data-part=nav-rail]{border-inline-end:none}@media(forced-colors:active){[data-ui=app-shell][data-separation=tone]{--_seam: var(--_rule-width) solid CanvasText;--_seam-width: var(--_rule-width)}}[data-ui=app-shell] [data-part=nav-toggle],[data-ui=app-shell] [data-part=aside-toggle]{--slotted-icon-size: var(--slotted-control-icon-size-md, 16px);background-color:transparent;block-size:var(--_row-mark);border:none;border-radius:var(--slotted-control-radius, 4px);color:color-mix(in oklab,currentcolor 70%,transparent);cursor:pointer;display:inline-grid;flex:0 0 auto;inline-size:var(--_row-mark);padding:0;place-items:center;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, cubic-bezier(.2, 0, 0, 1)),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, cubic-bezier(.2, 0, 0, 1))}[data-ui=app-shell][data-nav-side=end] [data-part=nav-toggle]>[data-ui=icon],[dir=rtl] [data-ui=app-shell] [data-part=nav-toggle]>[data-ui=icon],[data-ui=app-shell]:not([data-nav-side=end]) [data-part=aside-toggle]>[data-ui=icon],[dir=rtl] [data-ui=app-shell][data-nav-side=end] [data-part=aside-toggle]>[data-ui=icon]{scale:-1 1}[dir=rtl] [data-ui=app-shell][data-nav-side=end] [data-part=nav-toggle]>[data-ui=icon],[dir=rtl] [data-ui=app-shell]:not([data-nav-side=end]) [data-part=aside-toggle]>[data-ui=icon]{scale:1 1}[data-ui=app-shell] [data-part=nav-toggle]:enabled:hover,[data-ui=app-shell] [data-part=aside-toggle]:enabled:hover{background-color:var(--slotted-tone-secondary-subtle-hover, ButtonFace);color:currentcolor}[data-ui=app-shell] [data-part=nav-toggle]:enabled:active,[data-ui=app-shell] [data-part=aside-toggle]:enabled:active{background-color:var(--slotted-tone-secondary-subtle-active, ButtonFace)}[data-ui=app-shell] [data-part=nav-toggle]:focus-visible,[data-ui=app-shell] [data-part=aside-toggle]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=app-shell][data-nav-mode=inline]>[data-part=nav]{inline-size:calc(var(--_rail-size) + 2 * var(--_nav-inset) + var(--_nav-edges))}[data-ui=app-shell][data-nav-mode=inline][data-open]>[data-part=nav]{inline-size:var(--_nav-size)}[data-ui=app-shell][data-nav-mode=inline]:not([data-open])>[data-part=nav]>[data-part=nav-header],[data-ui=app-shell][data-nav-mode=inline]:not([data-open])>[data-part=nav]>[data-part=nav-footer]{flex-wrap:wrap;justify-content:center}[data-ui=app-shell][data-nav-mode=inline]:not([data-open])>[data-part=nav]>[data-part=nav-body]{align-items:center}[data-ui=app-shell][data-nav-mode=inline][data-collapsed-to=hidden]:not([data-open])>[data-part=nav]{display:none}[data-ui=app-shell][data-nav-side=end]>[data-part=nav]{grid-area:2 / 3 / 3 / 4}[data-ui=app-shell][data-canvas=inset][data-nav-side=end]>[data-part=nav]{margin-inline:0 var(--_gutter)}[data-ui=app-shell][data-canvas=flush][data-nav-side=end]>[data-part=nav]{padding-inline:0 var(--_gutter)}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])>[data-part=nav]{border-inline-end:var(--_seam)}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])[data-nav-side=end]>[data-part=nav]{border-inline-end:none;border-inline-start:var(--_seam)}[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])>[data-part=nav]{grid-area:1 / 1 / -1 / 2}[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])[data-nav-side=end]>[data-part=nav]{grid-area:1 / 3 / -1 / 4}[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])>[data-part=nav]>[data-part=nav-header]{box-sizing:border-box;min-block-size:var(--_banner-size)}[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])>[data-part=banner],[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])>[data-part=footer]{grid-column:2 / -1}[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])[data-nav-side=end]>[data-part=banner],[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])[data-nav-side=end]>[data-part=footer]{grid-column:1 / -2}[data-ui=app-shell][data-primary=main]>[data-part=banner],[data-ui=app-shell][data-canvas=panel][data-primary=nav]>[data-part=banner]{grid-column:2 / 3}[data-ui=app-shell][data-nav-mode=overlay]>[data-part=nav]{--_nav-inset: var(--_row-inset);background-color:var( --slotted-app-shell-nav-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );border-block-start:var(--_rule-width) solid var(--_rule);box-shadow:var(--slotted-shadow-lg);display:flex;grid-area:2 / 1 / -1 / -1;inline-size:min(var(--_nav-overlay-size),calc(100% - var(--_row-mark) - 2 * var(--_gutter)));inset-block:0;inset-inline-start:0;margin:0;padding-inline:0;position:absolute;transition:translate var(--_duration) var(--slotted-easing-exit, cubic-bezier(.3, 0, .8, .15)),visibility var(--_duration) step-end;translate:-100% 0;visibility:hidden;z-index:var(--slotted-z-index-overlay, 1000)}[data-ui=app-shell][data-nav-mode=overlay][data-open]>[data-part=nav]{transition:translate var(--_duration) var(--slotted-easing-enter, cubic-bezier(.05, .7, .1, 1)),visibility var(--_duration) step-start;translate:0 0;visibility:visible}[data-ui=app-shell][data-nav-mode=overlay][data-nav-side=end]>[data-part=nav]{inset-inline-end:0;inset-inline-start:auto;translate:100% 0}[data-ui=app-shell][data-canvas=floating][data-nav-mode=overlay]>[data-part=nav],[data-ui=app-shell][data-canvas=panel][data-nav-mode=overlay]>[data-part=nav],[data-ui=app-shell][data-canvas=inset][data-nav-mode=overlay]>[data-part=nav]{border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--slotted-shadow-lg);margin-block:var(--_gutter);margin-inline-start:var(--_gutter);translate:calc(-100% - var(--_gutter)) 0}[data-ui=app-shell]:not([data-canvas=flush])[data-nav-mode=overlay][data-nav-side=end]>[data-part=nav]{margin-inline-end:var(--_gutter);margin-inline-start:0;translate:calc(100% + var(--_gutter)) 0}[data-ui=app-shell]:not([data-canvas=flush])[data-nav-mode=overlay][data-open]>[data-part=nav]{translate:0 0}[data-ui=app-shell][data-aside-mode=overlay]>[data-part=aside]{background-color:var( --slotted-app-shell-aside-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );border-block-start:var(--_rule-width) solid var(--_rule);box-shadow:var(--slotted-shadow-lg);display:flex;grid-area:2 / 1 / -1 / -1;inline-size:var(--_aside-size);inset-block:0;inset-inline-end:0;inset-inline-start:auto;margin:0;max-inline-size:80%;position:absolute;transition:translate var(--_duration) var(--slotted-easing-exit, cubic-bezier(.3, 0, .8, .15)),visibility var(--_duration) step-end;translate:100% 0;visibility:hidden;z-index:var(--slotted-z-index-overlay, 1000)}[data-ui=app-shell][data-aside-mode=overlay]>[data-part=aside][data-open]{transition:translate var(--_duration) var(--slotted-easing-enter, cubic-bezier(.05, .7, .1, 1)),visibility var(--_duration) step-start;translate:0 0;visibility:visible}[data-ui=app-shell][data-aside-mode=overlay][data-nav-side=end]>[data-part=aside]{inset-inline-end:auto;inset-inline-start:0;translate:-100% 0}[data-ui=app-shell][data-canvas=floating][data-aside-mode=overlay]>[data-part=aside],[data-ui=app-shell][data-canvas=panel][data-aside-mode=overlay]>[data-part=aside],[data-ui=app-shell][data-canvas=inset][data-aside-mode=overlay]>[data-part=aside]{border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--slotted-shadow-lg);margin-block:var(--_gutter);margin-inline-end:var(--_gutter);translate:calc(100% + var(--_gutter)) 0}[data-ui=app-shell]:not([data-canvas=flush])[data-aside-mode=overlay][data-nav-side=end]>[data-part=aside]{margin-inline-end:0;margin-inline-start:var(--_gutter);translate:calc(-100% - var(--_gutter)) 0}[data-ui=app-shell]:not([data-canvas=flush])[data-aside-mode=overlay]>[data-part=aside][data-open]{translate:0 0}@container slotted-app-shell (inline-size >= 600px){[data-ui=app-shell]:not([data-nav-mode])>[data-part=nav]{inline-size:calc(var(--_rail-size) + 2 * var(--_nav-inset) + var(--_nav-edges))}[data-ui=app-shell]:not([data-nav-mode])[data-open]>[data-part=nav]{inline-size:var(--_nav-size)}[data-ui=app-shell]:not([data-aside-mode=overlay])>[data-part=aside]{grid-area:2 / 3 / 3 / 4;inline-size:var(--slotted-app-shell-aside-extent, var(--_aside-size));position:relative}[data-ui=app-shell]:not([data-aside-mode=overlay])>[data-part=aside]>[data-part=aside-resizer]:not([hidden]){display:block}[data-ui=app-shell]:not([data-aside-mode=overlay])[data-nav-side=end]>[data-part=aside]{grid-area:2 / 1 / 3 / 2}[data-ui=app-shell]:not([data-aside-mode=overlay])[data-primary=main]>[data-part=aside],[data-ui=app-shell]:not([data-aside-mode=overlay])[data-canvas=panel][data-primary=nav]>[data-part=aside]{grid-row:1 / 3}[data-ui=app-shell]:not([data-aside-mode=overlay]):is([data-canvas=floating],[data-canvas=inset])[data-nav-side=end]>[data-part=aside]{margin-inline:var(--_gutter) 0}[data-ui=app-shell]:not([data-aside-mode=overlay])[data-canvas=flush]>[data-part=aside]{border-block-start:none}[data-ui=app-shell]:not([data-aside-mode=overlay]):is([data-canvas=flush],[data-canvas=panel])>[data-part=aside]{border-inline-start:var(--_seam)}[data-ui=app-shell]:not([data-aside-mode=overlay]):is([data-canvas=flush],[data-canvas=panel])[data-nav-side=end]>[data-part=aside]{border-inline-end:var(--_seam);border-inline-start:none}}@container slotted-app-shell (inline-size < 600px){[data-ui=app-shell]:not([data-nav-mode])>[data-part=nav]{display:none}[data-ui=app-shell]:not([data-nav-mode])[data-canvas=floating]>[data-part=main],[data-ui=app-shell]:not([data-nav-mode])[data-canvas=inset]>[data-part=main]{border-block-end:0;border-inline:0;border-radius:0;box-shadow:none;margin:0}[data-ui=app-shell]:not([data-nav-mode]):is([data-canvas=floating],[data-canvas=inset])[data-primary=main]:before{content:none}[data-ui=app-shell]:not([data-nav-mode])[data-primary=main]>[data-part=banner]{margin:0;padding-inline:var(--_edge)}[data-ui=app-shell]:not([data-nav-mode])[data-canvas=panel]>[data-part=main]{border-block-start:var(--_rule-width) solid var(--_rule);border-radius:0}[data-ui=app-shell]:not([data-nav-mode])[data-canvas=floating]>[data-part=progress],[data-ui=app-shell]:not([data-nav-mode])[data-canvas=inset]>[data-part=progress]{border-radius:0;margin:0}[data-ui=app-shell]:not([data-nav-mode])[data-canvas=panel]>[data-part=progress]{border-radius:0}[data-ui=app-shell]:not([data-aside-mode=overlay]):is([data-canvas=floating],[data-canvas=inset])>[data-part=aside]{margin-inline:var(--_gutter)}[data-ui=app-shell][data-scroll=content]:not([data-aside-mode=overlay])>[data-part=aside]{max-block-size:50cqb}[data-ui=app-shell]:not([data-aside-mode])>[data-part=aside]{display:none}}[data-ui=app-shell]>[data-part=scrim]{background-color:var(--_scrim);grid-area:2 / 1 / -1 / -1;inset:0;opacity:1;position:absolute;transition:opacity var(--_duration) var(--_easing);z-index:calc(var(--slotted-z-index-overlay, 1000) - 1)}[data-ui=app-shell]>[data-part=scrim][data-status=entering],[data-ui=app-shell]>[data-part=scrim][data-status=exiting]{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShell, decorators: [{
+            type: Component,
+            args: [{ selector: '[slAppShell]', standalone: true, exportAs: 'slAppShell', template: `@if (skipTargets().length > 0) {
+      <div data-part="skip">
+        @for (target of skipTargets(); track target.href) {
+          <a [href]="'#' + target.href">{{ target.label }}</a>
+        }
+      </div>
+    }
+    <ng-content />
+    @if (veilStatus() !== 'unmounted') {
+      <div data-part="scrim" [attr.data-status]="veilStatus()" #scrim></div>
+    }
+    <div data-part="layer" #layer></div>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'app-shell',
+                        'data-part': 'root',
+                        '[attr.data-primary]': 'resolvedPrimary()',
+                        '[attr.data-canvas]': 'resolvedCanvas()',
+                        '[attr.data-nav-mode]': 'resolvedMode()',
+                        '[attr.data-aside-mode]': 'resolvedAsideMode()',
+                        '[attr.data-nav-side]': 'resolvedNavSide()',
+                        '[attr.data-nav-size]': 'resolvedNavSize()',
+                        '[attr.data-aside-size]': 'resolvedAsideSize()',
+                        '[attr.data-collapsed-to]': 'resolvedCollapsedTo()',
+                        '[attr.data-scroll]': 'resolvedScroll()',
+                        '[attr.data-separation]': 'resolvedSeparation()',
+                        '[attr.data-open]': "navOpen() ? '' : null",
+                        '[attr.data-dragging]': "asideDragging() ? '' : null",
+                        '(click)': 'onClick($event)',
+                    }, styles: ["@layer slotted.components{[data-ui=app-shell]{--_gutter: var( --slotted-app-shell-gutter, calc(var(--slotted-control-gap-lg, 8px) + var(--slotted-space-2, .25rem)) );--_row-inset: var(--slotted-app-shell-row-inset-size, var(--slotted-space-4, .5rem));--_row-mark: var(--slotted-app-shell-row-mark-size, var(--slotted-control-height-md, 34px));--_row-gap: var(--slotted-control-gap-md, 8px);--_row-font-size: var( --slotted-app-shell-row-text-size, var(--slotted-font-size-sm, .8125rem) );--_row-line-height: var( --slotted-app-shell-row-text-line-height, var(--slotted-line-height-sm, 1.45) );--slotted-app-shell-row-inset: var(--_row-inset);--slotted-app-shell-row-mark: var(--_row-mark);--slotted-app-shell-row-gap: var(--_row-gap);--slotted-app-shell-row-height: var(--_row-mark);--slotted-app-shell-row-font-size: var(--_row-font-size);--slotted-app-shell-row-line-height: var(--_row-line-height);--_nav-size: var(--slotted-app-shell-nav-size-md, 15rem);--_nav-overlay-size: var(--slotted-app-shell-nav-overlay-size, 20rem);--_aside-size: var(--slotted-app-shell-aside-size-md, 20rem);--_rail-size: var( --slotted-app-shell-rail-size, calc(var(--_row-mark) + var(--_row-inset) * 2) );--_edge: var(--_gutter);--_nav-inset: 0px;--_nav-edges: 0px;--_frame: var(--slotted-app-shell-frame, var(--slotted-surface-sunken, Canvas));--_canvas: var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas));--_ink: var(--slotted-app-shell-color, var(--slotted-text, CanvasText));--_scrollbar-thumb: var( --slotted-app-shell-scrollbar-thumb-color, var(--slotted-border-strong, ButtonBorder) );--_scrollbar-track: var(--slotted-app-shell-scrollbar-track-color, transparent);--_rule: var(--slotted-app-shell-border-color, var(--slotted-border-subtle, ButtonBorder));--_rule-width: var(--slotted-border-width-thin, 1px);--_radius: var(--slotted-app-shell-radius, var(--slotted-radius-lg, 8px));--_elevation: var(--slotted-app-shell-elevation, var(--slotted-shadow-xs));--_seam: var(--_rule-width) solid var(--_rule);--_seam-width: var(--_rule-width);--_inner-radius: calc(var(--_radius) - var(--_rule-width));--_scrim: var(--slotted-app-shell-scrim, var(--slotted-scrim, Canvas));--_banner-size: var( --slotted-app-shell-banner-block-size, calc(var(--slotted-control-height-lg, 38px) + var(--slotted-space-5, .75rem) * 2) );--_duration: var(--slotted-duration-medium);--_easing: var(--slotted-easing-standard, cubic-bezier(.2, 0, 0, 1));background-color:var(--_frame);background-image:var(--slotted-app-shell-frame-image, none);background-position:center;background-size:cover;color:var(--_ink);container-name:slotted-app-shell;container-type:inline-size;display:grid;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto;min-block-size:100%;min-inline-size:0;overflow-x:clip;overflow-y:visible;overflow-inline:clip;overflow-block:visible;position:relative}[data-ui=app-shell][data-nav-size=sm]{--_nav-size: var(--slotted-app-shell-nav-size-sm, 13rem)}[data-ui=app-shell][data-nav-size=lg]{--_nav-size: var(--slotted-app-shell-nav-size-lg, 18rem)}[data-ui=app-shell][data-aside-size=sm]{--_aside-size: var(--slotted-app-shell-aside-size-sm, 16rem)}[data-ui=app-shell][data-aside-size=lg]{--_aside-size: var(--slotted-app-shell-aside-size-lg, 26rem)}[data-ui=app-shell][data-scroll=content]{block-size:100%;container-type:size;max-block-size:100dvh}[data-ui=app-shell]>[data-part=skip]{inset-block-start:0;inset-inline-start:0;position:absolute;z-index:var(--slotted-z-index-popover, 1100)}[data-ui=app-shell]>[data-part=skip]>a{background-color:var(--_canvas);border:var(--_rule-width) solid var(--_rule);border-radius:var(--slotted-control-radius, 4px);box-shadow:var(--slotted-shadow-md);color:var(--slotted-text, CanvasText);display:inline-block;font-size:var(--slotted-control-font-size-md, 13px);font-weight:var(--slotted-font-weight-medium, 500);inset-block-start:var(--_gutter);inset-inline-start:var(--_gutter);padding-block:var(--slotted-space-3, .375rem);padding-inline:var(--slotted-space-5, .75rem);position:absolute;text-decoration:none;transition:translate var(--_duration) var(--_easing);translate:0 -200%;white-space:nowrap}[data-ui=app-shell]>[data-part=skip]>a:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px);translate:0 0}[data-ui=app-shell]>[data-part=banner]{align-items:center;background-color:var(--slotted-app-shell-banner-surface, transparent);color:var( --slotted-app-shell-banner-color, var(--slotted-app-shell-color, var(--slotted-text, CanvasText)) );container-name:slotted-app-shell-banner;container-type:inline-size;display:flex;gap:var(--_row-gap);grid-area:1 / 1 / 2 / -1;min-block-size:var(--_banner-size);min-inline-size:0;padding-inline:var(--_edge)}[data-ui=app-shell] [data-part=brand]{align-items:center;display:flex;flex:0 1 auto;font-weight:var(--slotted-font-weight-semibold, 600);gap:var(--_row-gap);min-inline-size:0;padding-inline-start:var(--_row-inset)}[data-ui=app-shell] [data-part=brand]>*:not([data-part=nav-toggle]){min-inline-size:0;overflow:var(--slotted-app-shell-brand-overflow, hidden);text-overflow:ellipsis;white-space:var(--slotted-app-shell-brand-wrap, nowrap)}[data-ui=app-shell]>[data-part=banner]>[data-part=actions]{align-items:center;display:flex;flex:0 1 auto;min-inline-size:0;gap:var(--slotted-control-gap-sm, 6px);margin-inline-start:auto;padding-inline-end:var(--_row-inset)}[data-ui=app-shell]>[data-part=banner]>[data-part=actions]>*{flex-shrink:0}[data-ui=app-shell]>[data-part=banner]>[data-part=centre]{align-items:center;display:flex;flex:1 1 auto;gap:var(--_row-gap);min-inline-size:0}[data-ui=app-shell]>[data-part=nav]{background-color:var(--slotted-app-shell-nav-surface, transparent);box-sizing:border-box;color:var( --slotted-app-shell-nav-color, var(--slotted-app-shell-color, var(--slotted-text, CanvasText)) );container-name:slotted-app-shell-nav;container-type:inline-size;display:flex;flex-direction:column;grid-area:2 / 1 / 3 / 2;min-block-size:0;min-inline-size:0;overflow:hidden;transition:inline-size var(--_duration) var(--_easing),visibility var(--_duration) step-start}[data-ui=app-shell]>[data-part=nav]>[data-part=nav-header],[data-ui=app-shell]>[data-part=nav]>[data-part=nav-footer]{align-items:center;display:flex;flex:0 0 auto;gap:var(--_row-gap);min-block-size:var(--_rail-size);min-inline-size:0;padding-block:var(--_row-inset)}[data-ui=app-shell]>[data-part=nav]>:is([data-part=nav-header],[data-part=nav-body],[data-part=nav-footer]){padding-inline:var(--_nav-inset)}[data-ui=app-shell]>[data-part=nav]>[data-part=nav-body]{align-items:stretch;display:flex;flex:1 1 auto;flex-direction:column;gap:var(--slotted-space-1, .125rem);min-block-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;padding-block:var(--slotted-space-4, .5rem);scrollbar-color:var(--_scrollbar-thumb) var(--_scrollbar-track);scrollbar-gutter:stable;scrollbar-width:thin}[data-ui=app-shell]>[data-part=main]{background-color:var( --slotted-app-shell-main-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );color:var( --slotted-app-shell-main-color, var(--slotted-app-shell-color, var(--slotted-text, CanvasText)) );grid-area:2 / 2 / 3 / 3;isolation:isolate;min-block-size:0;min-inline-size:0}[data-ui=app-shell][data-scroll=content]>[data-part=main]{overflow:auto}[data-ui=app-shell]>[data-part=progress]{contain:strict;grid-area:2 / 2 / 3 / 3;inset-block-start:calc(-1 * var(--_progress-lift, 0px));min-block-size:0;min-inline-size:0;overflow:clip;pointer-events:none;position:relative;z-index:1}[data-ui=app-shell][data-scroll=document]>[data-part=progress]{--slotted-progress-indicator-position: sticky}[data-ui=app-shell]>[data-part=main]:focus{outline:none}[data-ui=app-shell]>[data-part=main]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=app-shell]>[data-part=aside]{background-color:var( --slotted-app-shell-aside-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );box-sizing:border-box;color:var( --slotted-app-shell-aside-color, var(--slotted-app-shell-color, var(--slotted-text, CanvasText)) );display:flex;flex-direction:column;grid-area:3 / 1 / 4 / -1;min-block-size:0;min-inline-size:0}[data-ui=app-shell][data-scroll=content]>[data-part=aside]{overflow:auto}[data-ui=app-shell]:not([data-aside-mode=overlay])>[data-part=aside]:not([data-open]){display:none}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-header],[data-ui=app-shell]>[data-part=aside]>[data-part=aside-footer]{align-items:center;display:flex;flex:0 0 auto;gap:var(--_row-gap);min-block-size:var(--_rail-size);min-inline-size:0;padding-block:var(--_row-inset);padding-inline:calc(var(--_row-inset) + var(--_row-gap))}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-header]{font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-header]>:not([data-part]){flex:1 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-footer]{justify-content:flex-end}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-body]{flex:1 1 auto;min-block-size:0;min-inline-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;padding-block:var(--slotted-space-5, .75rem);padding-inline:calc(var(--_row-inset) + var(--_row-gap));scrollbar-color:var(--_scrollbar-thumb) var(--_scrollbar-track);scrollbar-gutter:stable;scrollbar-width:thin}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-body][data-inset=none]{padding:0}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-resizer]{--_resizer-thickness: var(--slotted-space-6, 1rem);--_resizer-reach: var(--slotted-target-min, 24px);background:transparent;border:0 solid transparent;border-inline-start-width:var(--slotted-border-width-thick, 2px);box-sizing:border-box;cursor:col-resize;display:none;inline-size:var(--_resizer-thickness);inset-block:0;inset-inline-start:0;position:absolute;touch-action:none;transition:border-color var(--_duration) var(--_easing);z-index:1}[data-ui=app-shell][data-nav-side=end]>[data-part=aside]>[data-part=aside-resizer]{border-inline-end-width:var(--slotted-border-width-thick, 2px);border-inline-start-width:0;inset-inline-end:0;inset-inline-start:auto}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-resizer]:before{content:\"\";inset-block:0;inset-inline:calc((var(--_resizer-reach) - var(--_resizer-thickness)) / -2);position:absolute}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-resizer]:not([data-disabled]):hover,[data-ui=app-shell]>[data-part=aside]>[data-part=aside-resizer]:focus-visible,[data-ui=app-shell][data-dragging]>[data-part=aside]>[data-part=aside-resizer]{border-color:var( --slotted-app-shell-resizer-color, var(--slotted-border-strong, ButtonBorder) )}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-resizer]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}[data-ui=app-shell]>[data-part=footer]{align-items:center;background-color:var(--slotted-app-shell-footer-surface, transparent);color:var( --slotted-app-shell-footer-color, var(--slotted-app-shell-color, var(--slotted-text-muted, GrayText)) );display:flex;font-size:var(--slotted-control-font-size-sm, 12px);gap:var(--_row-gap);grid-area:4 / 1 / 5 / -1;min-inline-size:0;padding-block:var(--slotted-space-3, .375rem);padding-inline:calc(var(--_edge) + var(--_row-inset))}[data-ui=app-shell]>[data-part=layer]{display:contents}[data-ui=app-shell][data-canvas=inset]>[data-part=nav]{border-radius:var(--_radius);margin-block:var(--_gutter);margin-inline-start:var(--_gutter)}[data-ui=app-shell][data-canvas=floating]>[data-part=main],[data-ui=app-shell][data-canvas=floating]>[data-part=aside],[data-ui=app-shell][data-canvas=inset]>[data-part=main],[data-ui=app-shell][data-canvas=inset]>[data-part=aside]{border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--_elevation);margin-block:var(--_gutter);margin-inline:var(--_gutter)}[data-ui=app-shell][data-canvas=floating]>[data-part=aside],[data-ui=app-shell][data-canvas=inset]>[data-part=aside]{margin-inline-start:0}[data-ui=app-shell][data-canvas=floating]>[data-part=footer],[data-ui=app-shell][data-canvas=panel]>[data-part=footer],[data-ui=app-shell][data-canvas=inset]>[data-part=footer]{padding-block-start:0}[data-ui=app-shell][data-canvas=floating][data-nav-mode=overlay]>[data-part=main],[data-ui=app-shell][data-canvas=inset][data-nav-mode=overlay]>[data-part=main]{border-block-end:0;border-inline:0;border-radius:0;box-shadow:none;margin:0}[data-ui=app-shell][data-canvas=flush]{--_edge: var(--_row-inset);--_nav-edges: var(--_seam-width);--_nav-inset: var(--_row-inset)}[data-ui=app-shell][data-canvas=flush]>[data-part=banner]{background-color:var( --slotted-app-shell-banner-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui=app-shell][data-canvas=flush]>[data-part=nav]{background-color:var( --slotted-app-shell-nav-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui=app-shell][data-canvas=flush]>[data-part=main]{background-color:var(--slotted-app-shell-main-surface, transparent)}[data-ui=app-shell][data-canvas=flush]>[data-part=aside]{background-color:var( --slotted-app-shell-aside-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui=app-shell][data-canvas=flush]>[data-part=footer]{background-color:var( --slotted-app-shell-footer-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui=app-shell][data-canvas=flush]>[data-part=nav]{padding-block:var(--_gutter)}[data-ui=app-shell][data-canvas=flush]>[data-part=banner]{border-block-end:var(--_seam)}[data-ui=app-shell][data-canvas=flush]>[data-part=footer]{border-block-start:var(--_seam)}[data-ui=app-shell][data-canvas=flush]>[data-part=aside]{border-block-start:var(--_seam)}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])>[data-part=nav]>[data-part=nav-footer]{border-block-start:var(--_seam)}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])>[data-part=aside]>[data-part=aside-header]{border-block-end:var(--_seam)}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])>[data-part=aside]>[data-part=aside-footer]{border-block-start:var(--_seam)}[data-ui=app-shell][data-canvas=floating]>[data-part=nav]{background-color:var( --slotted-app-shell-nav-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--_elevation);margin-block:var(--_gutter);margin-inline-start:var(--_gutter)}[data-ui=app-shell][data-canvas=floating]{--_edge: calc(var(--_gutter) + var(--_rule-width) + var(--_row-inset));--_nav-edges: calc(2 * var(--_rule-width));--_nav-inset: var(--_row-inset)}[data-ui=app-shell][data-canvas=floating][data-nav-side=end]>[data-part=nav]{margin-inline:0 var(--_gutter)}[data-ui=app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main]:before,[data-ui=app-shell][data-canvas=panel]:before{background-color:var( --slotted-app-shell-main-surface, var(--slotted-app-shell-canvas, var(--slotted-surface)) );border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--_elevation);content:\"\";grid-area:1 / 2 / 3 / 3;margin:var(--_gutter);min-inline-size:0}[data-ui=app-shell][data-canvas=panel]:before{grid-area:2 / 1 / 3 / -1;margin:0}[data-ui=app-shell][data-canvas=panel]:is([data-primary=nav],[data-primary=main]):before{grid-area:1 / 1 / 3 / -1}[data-ui=app-shell][data-nav-mode=overlay][data-canvas]:before{content:none}[data-ui=app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main]>[data-part=banner]{margin-block-start:calc(var(--_gutter) + var(--_rule-width));margin-inline:calc(var(--_gutter) + var(--_rule-width));padding-inline:0}[data-ui=app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main]>[data-part=main]{border:none;border-radius:0 0 var(--_inner-radius) var(--_inner-radius);box-shadow:none;margin-block:0 calc(var(--_gutter) + var(--_rule-width));margin-inline:calc(var(--_gutter) + var(--_rule-width))}[data-ui=app-shell][data-primary=main]>[data-part=banner],[data-ui=app-shell][data-primary=main][data-nav-side=end]>[data-part=banner],[data-ui=app-shell][data-canvas=panel][data-primary=nav]>[data-part=banner],[data-ui=app-shell][data-canvas=panel][data-primary=nav][data-nav-side=end]>[data-part=banner]{border-block-end:var(--_seam);grid-column:2 / 3}[data-ui=app-shell][data-primary=main][data-nav-mode=overlay]>[data-part=banner]{margin:0;padding-inline:var(--_edge)}[data-ui=app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main][data-nav-mode=overlay]>[data-part=main]{border-radius:0;margin:0}[data-ui=app-shell][data-canvas=panel]{--_edge: calc(var(--_rule-width) + var(--_row-inset));--_nav-edges: var(--_seam-width);--_nav-inset: var(--_row-inset)}[data-ui=app-shell][data-canvas=floating][data-nav-mode=overlay],[data-ui=app-shell][data-canvas=panel][data-nav-mode=overlay]{--_edge: var(--_gutter)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]){box-sizing:border-box;padding-block-end:var(--_gutter);padding-inline:var(--_gutter)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):is([data-primary=nav],[data-primary=main]){padding-block-start:var(--_gutter)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay])>[data-part=nav]{border-end-start-radius:var(--_inner-radius);border-start-start-radius:var(--_inner-radius);margin:var(--_rule-width) 0 var(--_rule-width) var(--_rule-width)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay])[data-nav-side=end]>[data-part=nav]{border-radius:0 var(--_inner-radius) var(--_inner-radius) 0;margin:var(--_rule-width) var(--_rule-width) var(--_rule-width) 0}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay])>[data-part=main]{border-end-end-radius:var(--_inner-radius);margin-block-end:var(--_rule-width);margin-inline-end:var(--_rule-width)}[data-ui=app-shell][data-canvas=panel][data-primary=banner]:not([data-nav-mode=overlay])>[data-part=main]{border-start-end-radius:var(--_inner-radius);margin-block-start:var(--_rule-width)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):not([data-primary=banner])>[data-part=banner]{margin-block-start:var(--_rule-width);margin-inline-end:var(--_rule-width)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):has(>[data-part=aside][data-open])>[data-part=main]{border-end-end-radius:0;border-start-end-radius:0;margin-inline-end:0}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):has(>[data-part=aside][data-open])>[data-part=banner]{margin-inline-end:0}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):not([data-aside-mode=overlay])>[data-part=aside]{border-end-end-radius:var(--_inner-radius);border-start-end-radius:var(--_inner-radius);margin:var(--_rule-width) var(--_rule-width) var(--_rule-width) 0}[data-ui=app-shell][data-canvas=panel][data-nav-mode=overlay]>[data-part=main]{border-block-start:var(--_rule-width) solid var(--_rule)}[data-ui=app-shell]:is([data-canvas=flush],[data-primary=main]),[data-ui=app-shell][data-canvas=panel][data-primary=nav]{--_progress-lift: var(--_seam-width)}[data-ui=app-shell][data-canvas=panel][data-primary=banner]{--_progress-lift: var(--_rule-width)}[data-ui=app-shell][data-canvas=panel][data-nav-mode=overlay]{--_progress-lift: 0px}[data-ui=app-shell][data-canvas=floating]>[data-part=progress],[data-ui=app-shell][data-canvas=inset]>[data-part=progress]{border-radius:var(--_radius);margin-block:var(--_gutter);margin-inline:var(--_gutter)}[data-ui=app-shell][data-canvas=floating][data-nav-mode=overlay]>[data-part=progress],[data-ui=app-shell][data-canvas=inset][data-nav-mode=overlay]>[data-part=progress]{border-radius:0;margin:0}[data-ui=app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main]>[data-part=progress]{border-radius:0 0 var(--_inner-radius) var(--_inner-radius);margin-block:0 calc(var(--_gutter) + var(--_rule-width));margin-inline:calc(var(--_gutter) + var(--_rule-width))}[data-ui=app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main][data-nav-mode=overlay]>[data-part=progress]{border-radius:0;margin:0}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay])>[data-part=progress]{border-end-end-radius:var(--_inner-radius);margin-block-end:var(--_rule-width);margin-inline-end:var(--_rule-width)}[data-ui=app-shell][data-canvas=panel][data-primary=banner]:not([data-nav-mode=overlay])>[data-part=progress]{border-start-end-radius:var(--_inner-radius);margin-block-start:var(--_rule-width)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):has(>[data-part=aside][data-open])>[data-part=progress]{border-end-end-radius:0;border-start-end-radius:0;margin-inline-end:0}[data-ui=app-shell][data-separation=tone]{--_seam: none;--_seam-width: 0px}[data-ui=app-shell][data-canvas=flush][data-separation=tone]>[data-part=footer]{--_ground: var( --slotted-app-shell-footer-surface, var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) ) )}[data-ui=app-shell][data-canvas=flush][data-separation=tone]:not([data-primary=main])>[data-part=banner]{--_ground: var( --slotted-app-shell-banner-surface, var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) ) )}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])[data-separation=tone]>[data-part=nav]{--_ground: var( --slotted-app-shell-nav-surface, var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) ) )}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])[data-separation=tone]>[data-part=aside]{--_ground: var( --slotted-app-shell-aside-surface, var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) ) )}[data-ui=app-shell][data-separation=tone]>[data-part=nav]>[data-part=nav-rail]{--_ground: var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) )}[data-ui=app-shell][data-canvas=flush][data-separation=tone]:not([data-primary=main])>[data-part=banner],[data-ui=app-shell][data-canvas=flush][data-separation=tone]>[data-part=footer],[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])[data-separation=tone]>:is([data-part=nav],[data-part=aside]),[data-ui=app-shell][data-separation=tone]>[data-part=nav]>[data-part=nav-rail]{--slotted-tone-secondary-subtle-hover: color-mix( in oklab, var(--_ground), var(--slotted-text) 4% );--slotted-tone-secondary-subtle-active: color-mix( in oklab, var(--_ground), var(--slotted-text) 7% );background-color:var(--_ground)}[data-ui=app-shell][data-canvas=flush][data-separation=tone]>[data-part=main]{background-color:var( --slotted-app-shell-main-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui=app-shell]>[data-part=nav]:has(>[data-part=nav-rail]){display:grid;grid-template-columns:var(--_rail-size) minmax(var(--_nav-size),1fr);grid-template-rows:auto minmax(0,1fr) auto}[data-ui=app-shell]>[data-part=nav]>[data-part=nav-rail]{align-items:center;border-inline-end:var(--_seam);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--slotted-space-1, .125rem);grid-area:1 / 1 / -1 / 2;min-block-size:0;overflow:auto;overscroll-behavior:contain;padding-block:var(--_row-inset);scrollbar-width:none}[data-ui=app-shell]>[data-part=nav]:has(>[data-part=nav-rail])>[data-part=nav-header]{grid-area:1 / 2 / 2 / 3}[data-ui=app-shell]>[data-part=nav]:has(>[data-part=nav-rail])>[data-part=nav-body]{grid-area:2 / 2 / 3 / 3}[data-ui=app-shell]>[data-part=nav]:has(>[data-part=nav-rail])>[data-part=nav-footer]{grid-area:3 / 2 / 4 / 3}[data-ui=app-shell]>[data-part=nav]:has(>[data-part=nav-rail])>:is([data-part=nav-header],[data-part=nav-body],[data-part=nav-footer]){padding-inline-start:var(--_row-inset);transition:visibility var(--_duration) step-start}[data-ui=app-shell][data-nav-mode=inline][data-open]>[data-part=nav]:has(>[data-part=nav-rail]){inline-size:calc(var(--_rail-size) + var(--_nav-size) + var(--_nav-edges))}[data-ui=app-shell][data-nav-mode=inline]:not([data-open])>[data-part=nav]:has(>[data-part=nav-rail]){inline-size:calc(var(--_rail-size) + var(--_nav-edges))}[data-ui=app-shell][data-nav-mode=inline]:not([data-open])>[data-part=nav]:has(>[data-part=nav-rail])>:is([data-part=nav-header],[data-part=nav-body],[data-part=nav-footer]){transition:visibility var(--_duration) step-end;visibility:hidden}[data-ui=app-shell][data-nav-mode=inline]:not([data-open])>[data-part=nav]>[data-part=nav-rail]{border-inline-end:none}@media(forced-colors:active){[data-ui=app-shell][data-separation=tone]{--_seam: var(--_rule-width) solid CanvasText;--_seam-width: var(--_rule-width)}}[data-ui=app-shell] [data-part=nav-toggle],[data-ui=app-shell] [data-part=aside-toggle]{--slotted-icon-size: var(--slotted-control-icon-size-md, 16px);background-color:transparent;block-size:var(--_row-mark);border:none;border-radius:var(--slotted-control-radius, 4px);color:color-mix(in oklab,currentcolor 70%,transparent);cursor:pointer;display:inline-grid;flex:0 0 auto;inline-size:var(--_row-mark);padding:0;place-items:center;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, cubic-bezier(.2, 0, 0, 1)),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, cubic-bezier(.2, 0, 0, 1))}[data-ui=app-shell][data-nav-side=end] [data-part=nav-toggle]>[data-ui=icon],[dir=rtl] [data-ui=app-shell] [data-part=nav-toggle]>[data-ui=icon],[data-ui=app-shell]:not([data-nav-side=end]) [data-part=aside-toggle]>[data-ui=icon],[dir=rtl] [data-ui=app-shell][data-nav-side=end] [data-part=aside-toggle]>[data-ui=icon]{scale:-1 1}[dir=rtl] [data-ui=app-shell][data-nav-side=end] [data-part=nav-toggle]>[data-ui=icon],[dir=rtl] [data-ui=app-shell]:not([data-nav-side=end]) [data-part=aside-toggle]>[data-ui=icon]{scale:1 1}[data-ui=app-shell] [data-part=nav-toggle]:enabled:hover,[data-ui=app-shell] [data-part=aside-toggle]:enabled:hover{background-color:var(--slotted-tone-secondary-subtle-hover, ButtonFace);color:currentcolor}[data-ui=app-shell] [data-part=nav-toggle]:enabled:active,[data-ui=app-shell] [data-part=aside-toggle]:enabled:active{background-color:var(--slotted-tone-secondary-subtle-active, ButtonFace)}[data-ui=app-shell] [data-part=nav-toggle]:focus-visible,[data-ui=app-shell] [data-part=aside-toggle]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=app-shell][data-nav-mode=inline]>[data-part=nav]{inline-size:calc(var(--_rail-size) + 2 * var(--_nav-inset) + var(--_nav-edges))}[data-ui=app-shell][data-nav-mode=inline][data-open]>[data-part=nav]{inline-size:var(--_nav-size)}[data-ui=app-shell][data-nav-mode=inline]:not([data-open])>[data-part=nav]>[data-part=nav-header],[data-ui=app-shell][data-nav-mode=inline]:not([data-open])>[data-part=nav]>[data-part=nav-footer]{flex-wrap:wrap;justify-content:center}[data-ui=app-shell][data-nav-mode=inline]:not([data-open])>[data-part=nav]>[data-part=nav-body]{align-items:center}[data-ui=app-shell][data-nav-mode=inline][data-collapsed-to=hidden]:not([data-open])>[data-part=nav]{display:none}[data-ui=app-shell][data-nav-side=end]>[data-part=nav]{grid-area:2 / 3 / 3 / 4}[data-ui=app-shell][data-canvas=inset][data-nav-side=end]>[data-part=nav]{margin-inline:0 var(--_gutter)}[data-ui=app-shell][data-canvas=flush][data-nav-side=end]>[data-part=nav]{padding-inline:0 var(--_gutter)}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])>[data-part=nav]{border-inline-end:var(--_seam)}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])[data-nav-side=end]>[data-part=nav]{border-inline-end:none;border-inline-start:var(--_seam)}[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])>[data-part=nav]{grid-area:1 / 1 / -1 / 2}[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])[data-nav-side=end]>[data-part=nav]{grid-area:1 / 3 / -1 / 4}[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])>[data-part=nav]>[data-part=nav-header]{box-sizing:border-box;min-block-size:var(--_banner-size)}[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])>[data-part=banner],[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])>[data-part=footer]{grid-column:2 / -1}[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])[data-nav-side=end]>[data-part=banner],[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])[data-nav-side=end]>[data-part=footer]{grid-column:1 / -2}[data-ui=app-shell][data-primary=main]>[data-part=banner],[data-ui=app-shell][data-canvas=panel][data-primary=nav]>[data-part=banner]{grid-column:2 / 3}[data-ui=app-shell][data-nav-mode=overlay]>[data-part=nav]{--_nav-inset: var(--_row-inset);background-color:var( --slotted-app-shell-nav-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );border-block-start:var(--_rule-width) solid var(--_rule);box-shadow:var(--slotted-shadow-lg);display:flex;grid-area:2 / 1 / -1 / -1;inline-size:min(var(--_nav-overlay-size),calc(100% - var(--_row-mark) - 2 * var(--_gutter)));inset-block:0;inset-inline-start:0;margin:0;padding-inline:0;position:absolute;transition:translate var(--_duration) var(--slotted-easing-exit, cubic-bezier(.3, 0, .8, .15)),visibility var(--_duration) step-end;translate:-100% 0;visibility:hidden;z-index:var(--slotted-z-index-overlay, 1000)}[data-ui=app-shell][data-nav-mode=overlay][data-open]>[data-part=nav]{transition:translate var(--_duration) var(--slotted-easing-enter, cubic-bezier(.05, .7, .1, 1)),visibility var(--_duration) step-start;translate:0 0;visibility:visible}[data-ui=app-shell][data-nav-mode=overlay][data-nav-side=end]>[data-part=nav]{inset-inline-end:0;inset-inline-start:auto;translate:100% 0}[data-ui=app-shell][data-canvas=floating][data-nav-mode=overlay]>[data-part=nav],[data-ui=app-shell][data-canvas=panel][data-nav-mode=overlay]>[data-part=nav],[data-ui=app-shell][data-canvas=inset][data-nav-mode=overlay]>[data-part=nav]{border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--slotted-shadow-lg);margin-block:var(--_gutter);margin-inline-start:var(--_gutter);translate:calc(-100% - var(--_gutter)) 0}[data-ui=app-shell]:not([data-canvas=flush])[data-nav-mode=overlay][data-nav-side=end]>[data-part=nav]{margin-inline-end:var(--_gutter);margin-inline-start:0;translate:calc(100% + var(--_gutter)) 0}[data-ui=app-shell]:not([data-canvas=flush])[data-nav-mode=overlay][data-open]>[data-part=nav]{translate:0 0}[data-ui=app-shell][data-aside-mode=overlay]>[data-part=aside]{background-color:var( --slotted-app-shell-aside-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );border-block-start:var(--_rule-width) solid var(--_rule);box-shadow:var(--slotted-shadow-lg);display:flex;grid-area:2 / 1 / -1 / -1;inline-size:var(--_aside-size);inset-block:0;inset-inline-end:0;inset-inline-start:auto;margin:0;max-inline-size:80%;position:absolute;transition:translate var(--_duration) var(--slotted-easing-exit, cubic-bezier(.3, 0, .8, .15)),visibility var(--_duration) step-end;translate:100% 0;visibility:hidden;z-index:var(--slotted-z-index-overlay, 1000)}[data-ui=app-shell][data-aside-mode=overlay]>[data-part=aside][data-open]{transition:translate var(--_duration) var(--slotted-easing-enter, cubic-bezier(.05, .7, .1, 1)),visibility var(--_duration) step-start;translate:0 0;visibility:visible}[data-ui=app-shell][data-aside-mode=overlay][data-nav-side=end]>[data-part=aside]{inset-inline-end:auto;inset-inline-start:0;translate:-100% 0}[data-ui=app-shell][data-canvas=floating][data-aside-mode=overlay]>[data-part=aside],[data-ui=app-shell][data-canvas=panel][data-aside-mode=overlay]>[data-part=aside],[data-ui=app-shell][data-canvas=inset][data-aside-mode=overlay]>[data-part=aside]{border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--slotted-shadow-lg);margin-block:var(--_gutter);margin-inline-end:var(--_gutter);translate:calc(100% + var(--_gutter)) 0}[data-ui=app-shell]:not([data-canvas=flush])[data-aside-mode=overlay][data-nav-side=end]>[data-part=aside]{margin-inline-end:0;margin-inline-start:var(--_gutter);translate:calc(-100% - var(--_gutter)) 0}[data-ui=app-shell]:not([data-canvas=flush])[data-aside-mode=overlay]>[data-part=aside][data-open]{translate:0 0}@container slotted-app-shell (inline-size >= 600px){[data-ui=app-shell]:not([data-nav-mode])>[data-part=nav]{inline-size:calc(var(--_rail-size) + 2 * var(--_nav-inset) + var(--_nav-edges))}[data-ui=app-shell]:not([data-nav-mode])[data-open]>[data-part=nav]{inline-size:var(--_nav-size)}[data-ui=app-shell]:not([data-aside-mode=overlay])>[data-part=aside]{grid-area:2 / 3 / 3 / 4;inline-size:var(--slotted-app-shell-aside-extent, var(--_aside-size));position:relative}[data-ui=app-shell]:not([data-aside-mode=overlay])>[data-part=aside]>[data-part=aside-resizer]:not([hidden]){display:block}[data-ui=app-shell]:not([data-aside-mode=overlay])[data-nav-side=end]>[data-part=aside]{grid-area:2 / 1 / 3 / 2}[data-ui=app-shell]:not([data-aside-mode=overlay])[data-primary=main]>[data-part=aside],[data-ui=app-shell]:not([data-aside-mode=overlay])[data-canvas=panel][data-primary=nav]>[data-part=aside]{grid-row:1 / 3}[data-ui=app-shell]:not([data-aside-mode=overlay]):is([data-canvas=floating],[data-canvas=inset])[data-nav-side=end]>[data-part=aside]{margin-inline:var(--_gutter) 0}[data-ui=app-shell]:not([data-aside-mode=overlay])[data-canvas=flush]>[data-part=aside]{border-block-start:none}[data-ui=app-shell]:not([data-aside-mode=overlay]):is([data-canvas=flush],[data-canvas=panel])>[data-part=aside]{border-inline-start:var(--_seam)}[data-ui=app-shell]:not([data-aside-mode=overlay]):is([data-canvas=flush],[data-canvas=panel])[data-nav-side=end]>[data-part=aside]{border-inline-end:var(--_seam);border-inline-start:none}}@container slotted-app-shell (inline-size < 600px){[data-ui=app-shell]:not([data-nav-mode])>[data-part=nav]{display:none}[data-ui=app-shell]:not([data-nav-mode])[data-canvas=floating]>[data-part=main],[data-ui=app-shell]:not([data-nav-mode])[data-canvas=inset]>[data-part=main]{border-block-end:0;border-inline:0;border-radius:0;box-shadow:none;margin:0}[data-ui=app-shell]:not([data-nav-mode]):is([data-canvas=floating],[data-canvas=inset])[data-primary=main]:before{content:none}[data-ui=app-shell]:not([data-nav-mode])[data-primary=main]>[data-part=banner]{margin:0;padding-inline:var(--_edge)}[data-ui=app-shell]:not([data-nav-mode])[data-canvas=panel]>[data-part=main]{border-block-start:var(--_rule-width) solid var(--_rule);border-radius:0}[data-ui=app-shell]:not([data-nav-mode])[data-canvas=floating]>[data-part=progress],[data-ui=app-shell]:not([data-nav-mode])[data-canvas=inset]>[data-part=progress]{border-radius:0;margin:0}[data-ui=app-shell]:not([data-nav-mode])[data-canvas=panel]>[data-part=progress]{border-radius:0}[data-ui=app-shell]:not([data-aside-mode=overlay]):is([data-canvas=floating],[data-canvas=inset])>[data-part=aside]{margin-inline:var(--_gutter)}[data-ui=app-shell][data-scroll=content]:not([data-aside-mode=overlay])>[data-part=aside]{max-block-size:50cqb}[data-ui=app-shell]:not([data-aside-mode])>[data-part=aside]{display:none}}[data-ui=app-shell]>[data-part=scrim]{background-color:var(--_scrim);grid-area:2 / 1 / -1 / -1;inset:0;opacity:1;position:absolute;transition:opacity var(--_duration) var(--_easing);z-index:calc(var(--slotted-z-index-overlay, 1000) - 1)}[data-ui=app-shell]>[data-part=scrim][data-status=entering],[data-ui=app-shell]>[data-part=scrim][data-status=exiting]{opacity:0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { navOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "navOpen", required: false }] }, { type: i0.Output, args: ["navOpenChange"] }], asideOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "asideOpen", required: false }] }, { type: i0.Output, args: ["asideOpenChange"] }], asideExtent: [{ type: i0.Input, args: [{ isSignal: true, alias: "asideExtent", required: false }] }, { type: i0.Output, args: ["asideExtentChange"] }], minAsideExtent: [{ type: i0.Input, args: [{ isSignal: true, alias: "minAsideExtent", required: false }] }], maxAsideExtent: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAsideExtent", required: false }] }], primary: [{ type: i0.Input, args: [{ isSignal: true, alias: "primary", required: false }] }], canvas: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvas", required: false }] }], navMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "navMode", required: false }] }], navSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "navSide", required: false }] }], navSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "navSize", required: false }] }], asideMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "asideMode", required: false }] }], asideSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "asideSize", required: false }] }], collapsedTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedTo", required: false }] }], scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }], separation: [{ type: i0.Input, args: [{ isSignal: true, alias: "separation", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], escape: [{ type: i0.Input, args: [{ isSignal: true, alias: "escape", required: false }] }], outsidePress: [{ type: i0.Input, args: [{ isSignal: true, alias: "outsidePress", required: false }] }], back: [{ type: i0.Input, args: [{ isSignal: true, alias: "back", required: false }] }], closeOnNavigate: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnNavigate", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], navOpenChangeRequest: [{ type: i0.Output, args: ["navOpenChangeRequest"] }], asideOpenChangeRequest: [{ type: i0.Output, args: ["asideOpenChangeRequest"] }], asideExtentChangeRequest: [{ type: i0.Output, args: ["asideExtentChangeRequest"] }], veilRef: [{ type: i0.ViewChild, args: ['scrim', { isSignal: true }] }] } });
+function optionalBoolean(value) {
+    return value === undefined ? undefined : booleanAttribute(value);
+}
+/** Attaches a region's element to the shell and takes it off again on destroy. */
+function attach(slot) {
+    const shell = inject(SlAppShell);
+    const node = inject(ElementRef).nativeElement;
+    shell.nodes[slot] = node;
+    inject(DestroyRef).onDestroy(() => {
+        if (shell.nodes[slot] === node)
+            shell.nodes[slot] = null;
+    });
+    return shell;
+}
+/**
+ * The `banner` landmark: a `header` in the context of the `body`, so it needs
+ * no `role`.
+ */
+class SlAppShellBanner {
+    constructor() {
+        attach('banner');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellBanner, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellBanner, isStandalone: true, selector: "header[slAppShellBanner]", host: { attributes: { "data-part": "banner" } }, exportAs: ["slAppShellBanner"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellBanner, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'header[slAppShellBanner]',
+                    standalone: true,
+                    exportAs: 'slAppShellBanner',
+                    host: { 'data-part': 'banner' },
+                }]
+        }], ctorParameters: () => [] });
+/** The start cluster of the banner: the toggle, the mark, the name of the workspace. */
+class SlAppShellBrand {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellBrand, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellBrand, isStandalone: true, selector: "[slAppShellBrand]", host: { attributes: { "data-part": "brand" } }, exportAs: ["slAppShellBrand"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellBrand, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slAppShellBrand]',
+                    standalone: true,
+                    exportAs: 'slAppShellBrand',
+                    host: { 'data-part': 'brand' },
+                }]
+        }] });
+/** The middle of the bar, and the one cluster that grows: a search, a trail, a route title. */
+class SlAppShellCentre {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellCentre, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellCentre, isStandalone: true, selector: "[slAppShellCentre]", host: { attributes: { "data-part": "centre" } }, exportAs: ["slAppShellCentre"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellCentre, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slAppShellCentre]',
+                    standalone: true,
+                    exportAs: 'slAppShellCentre',
+                    host: { 'data-part': 'centre' },
+                }]
+        }] });
+/** The end cluster, pushed there by the space it takes. */
+class SlAppShellActions {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellActions, isStandalone: true, selector: "[slAppShellActions]", host: { attributes: { "data-part": "actions" } }, exportAs: ["slAppShellActions"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellActions, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slAppShellActions]',
+                    standalone: true,
+                    exportAs: 'slAppShellActions',
+                    host: { 'data-part': 'actions' },
+                }]
+        }] });
+/**
+ * The `navigation` landmark, and the one element all three modes share. A
+ * document with more than one `navigation` needs a unique label on each, so
+ * this one carries the family's unless the consumer wrote another.
+ */
+class SlAppShellNav {
+    shell = attach('nav');
+    written = inject(new HostAttributeToken('aria-label'), { optional: true });
+    writtenId = inject(new HostAttributeToken('id'), { optional: true });
+    elementId = this.writtenId ?? this.shell.navId;
+    label = computed(() => this.written ?? this.shell.t('nav'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const remove = this.shell.registerRegion('nav');
+        inject(DestroyRef).onDestroy(remove);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellNav, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellNav, isStandalone: true, selector: "nav[slAppShellNav]", host: { attributes: { "data-part": "nav" }, properties: { "attr.id": "elementId", "attr.aria-label": "label()" } }, exportAs: ["slAppShellNav"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellNav, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'nav[slAppShellNav]',
+                    standalone: true,
+                    exportAs: 'slAppShellNav',
+                    host: {
+                        'data-part': 'nav',
+                        '[attr.id]': 'elementId',
+                        '[attr.aria-label]': 'label()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * A strip of marks before the column: the first level of a two-level
+ * navigation, inside the one navigation landmark and under its one open state.
+ * Closed to `rail`, the region keeps this strip and lets the column go.
+ */
+class SlAppShellNavRail {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellNavRail, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellNavRail, isStandalone: true, selector: "[slAppShellNavRail]", host: { attributes: { "data-part": "nav-rail" } }, exportAs: ["slAppShellNavRail"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellNavRail, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slAppShellNavRail]',
+                    standalone: true,
+                    exportAs: 'slAppShellNavRail',
+                    host: { 'data-part': 'nav-rail' },
+                }]
+        }] });
+/** The pinned top of the navigation column. */
+class SlAppShellNavHeader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellNavHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellNavHeader, isStandalone: true, selector: "[slAppShellNavHeader]", host: { attributes: { "data-part": "nav-header" } }, exportAs: ["slAppShellNavHeader"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellNavHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slAppShellNavHeader]',
+                    standalone: true,
+                    exportAs: 'slAppShellNavHeader',
+                    host: { 'data-part': 'nav-header' },
+                }]
+        }] });
+/** The middle, and the only part of the column that scrolls. */
+class SlAppShellNavBody {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellNavBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellNavBody, isStandalone: true, selector: "[slAppShellNavBody]", host: { attributes: { "data-part": "nav-body" } }, exportAs: ["slAppShellNavBody"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellNavBody, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slAppShellNavBody]',
+                    standalone: true,
+                    exportAs: 'slAppShellNavBody',
+                    host: { 'data-part': 'nav-body' },
+                }]
+        }] });
+/** The pinned bottom: the account, the collapse control. */
+class SlAppShellNavFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellNavFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellNavFooter, isStandalone: true, selector: "[slAppShellNavFooter]", host: { attributes: { "data-part": "nav-footer" } }, exportAs: ["slAppShellNavFooter"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellNavFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slAppShellNavFooter]',
+                    standalone: true,
+                    exportAs: 'slAppShellNavFooter',
+                    host: { 'data-part': 'nav-footer' },
+                }]
+        }] });
+/**
+ * The `main` landmark, and the skip link's destination.
+ *
+ * `tabindex="-1"` is not decoration: a `main` without it takes the scroll and
+ * leaves the focus behind in Safari and in Firefox, so the link appears to work
+ * and moves nothing a screen reader follows.
+ */
+class SlAppShellMain {
+    shell = attach('main');
+    writtenId = inject(new HostAttributeToken('id'), { optional: true });
+    elementId = this.writtenId ?? this.shell.mainId;
+    /** The wait on this region's edge; an `aria-busy` the consumer wrote wins. */
+    writtenBusy = inject(new HostAttributeToken('aria-busy'), { optional: true });
+    busy = computed(() => this.writtenBusy ?? (this.shell.busy() ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const remove = this.shell.registerRegion('main');
+        inject(DestroyRef).onDestroy(remove);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellMain, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellMain, isStandalone: true, selector: "main[slAppShellMain]", host: { attributes: { "data-part": "main", "tabindex": "-1" }, properties: { "attr.id": "elementId", "attr.aria-busy": "busy()" } }, exportAs: ["slAppShellMain"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellMain, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'main[slAppShellMain]',
+                    standalone: true,
+                    exportAs: 'slAppShellMain',
+                    host: {
+                        'data-part': 'main',
+                        tabindex: '-1',
+                        '[attr.id]': 'elementId',
+                        '[attr.aria-busy]': 'busy()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * The wait for the next page, on the line between the chrome and the content.
+ * The element is the consumer's, anywhere inside the shell: the stylesheet
+ * lays it over `main` in every arrangement as a frame, and it holds one bar
+ * at `edge-start`. Where the line is — the card's border, the banner's seam —
+ * is the stylesheet's to know, not the consumer's.
+ *
+ * `main` is busy for exactly as long as the bar is painted, which the bar
+ * itself reports: not from the moment `loading` turns, because a fast answer
+ * draws nothing, and not after the bar has gone. `size` defaults to `sm`,
+ * `delay` to 200 and `minDuration` to 400 milliseconds; an input, then
+ * `provideProgressIndicatorDefaults()`, wins.
+ */
+class SlAppShellProgress {
+    shell = inject(SlAppShell);
+    defaults = injectProgressIndicatorDefaults();
+    loading = input(true, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    min = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    buffer = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buffer" }] : /* istanbul ignore next */ []));
+    valueText = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    tone = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    delay = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "delay" }] : /* istanbul ignore next */ []));
+    minDuration = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minDuration" }] : /* istanbul ignore next */ []));
+    /** The bar was painted and has been withdrawn. */
+    withdraw = output();
+    bar = viewChild.required(SlProgressBar, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bar" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => this.shell.busy.set(this.bar().painted()));
+        inject(DestroyRef).onDestroy(() => this.shell.busy.set(false));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.7", type: SlAppShellProgress, isStandalone: true, selector: "[slAppShellProgress]", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, buffer: { classPropertyName: "buffer", publicName: "buffer", isSignal: true, isRequired: false, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, minDuration: { classPropertyName: "minDuration", publicName: "minDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { withdraw: "withdraw" }, host: { attributes: { "data-part": "progress" } }, viewQueries: [{ propertyName: "bar", first: true, predicate: SlProgressBar, descendants: true, isSignal: true }], exportAs: ["slAppShellProgress"], ngImport: i0, template: `<div
+    slProgressBar
+    placement="edge-start"
+    [buffer]="buffer()"
+    [delay]="delay() ?? defaults.delay ?? 200"
+    [label]="label() ?? shell.t('progress')"
+    [loading]="loading()"
+    [max]="max()"
+    [min]="min()"
+    [minDuration]="minDuration() ?? defaults.minDuration ?? 400"
+    [size]="size() ?? 'sm'"
+    [tone]="tone()"
+    [value]="value()"
+    [valueText]="valueText()"
+    (withdraw)="withdraw.emit()"
+  ></div>`, isInline: true, dependencies: [{ kind: "component", type: SlProgressBar, selector: "[slProgressBar]", inputs: ["value", "min", "max", "buffer", "showValue", "valueText", "format", "locale", "wave", "placement"], exportAs: ["slProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellProgress, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slAppShellProgress]',
+                    standalone: true,
+                    exportAs: 'slAppShellProgress',
+                    imports: [SlProgressBar],
+                    template: `<div
+    slProgressBar
+    placement="edge-start"
+    [buffer]="buffer()"
+    [delay]="delay() ?? defaults.delay ?? 200"
+    [label]="label() ?? shell.t('progress')"
+    [loading]="loading()"
+    [max]="max()"
+    [min]="min()"
+    [minDuration]="minDuration() ?? defaults.minDuration ?? 400"
+    [size]="size() ?? 'sm'"
+    [tone]="tone()"
+    [value]="value()"
+    [valueText]="valueText()"
+    (withdraw)="withdraw.emit()"
+  ></div>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { 'data-part': 'progress' },
+                }]
+        }], ctorParameters: () => [], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], buffer: [{ type: i0.Input, args: [{ isSignal: true, alias: "buffer", required: false }] }], valueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueText", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], minDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDuration", required: false }] }], withdraw: [{ type: i0.Output, args: ["withdraw"] }], bar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SlProgressBar), { isSignal: true }] }] } });
+/**
+ * The `complementary` landmark. It opens and closes the way the navigation
+ * region does — a column beside the content or a layer over it, by
+ * `asideMode` — and carries its own `data-open`, because the host's is the
+ * navigation's and every selector written over it still reads the navigation.
+ */
+class SlAppShellAside {
+    shell = attach('aside');
+    written = inject(new HostAttributeToken('aria-label'), { optional: true });
+    writtenId = inject(new HostAttributeToken('id'), { optional: true });
+    elementId = this.writtenId ?? this.shell.asideId;
+    label = computed(() => this.written ?? this.shell.t('aside'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /* The extent as the column's width: a fraction of the shell in `cqi`, which
+       the stylesheet reads in the column alone. */
+    extentLength = computed(() => {
+        const extent = this.shell.asideExtent();
+        return extent === undefined ? null : `${Math.round(extent * 10000) / 100}cqi`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "extentLength" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const remove = this.shell.registerRegion('aside');
+        inject(DestroyRef).onDestroy(remove);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellAside, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellAside, isStandalone: true, selector: "aside[slAppShellAside]", host: { attributes: { "data-part": "aside" }, properties: { "attr.id": "elementId", "attr.aria-label": "label()", "attr.data-open": "shell.asideOpen() ? '' : null", "style.--slotted-app-shell-aside-extent": "extentLength()" } }, exportAs: ["slAppShellAside"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellAside, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'aside[slAppShellAside]',
+                    standalone: true,
+                    exportAs: 'slAppShellAside',
+                    host: {
+                        'data-part': 'aside',
+                        '[attr.id]': 'elementId',
+                        '[attr.aria-label]': 'label()',
+                        '[attr.data-open]': "shell.asideOpen() ? '' : null",
+                        '[style.--slotted-app-shell-aside-extent]': 'extentLength()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/** The pinned top of the pane: its title, and the control that closes it. */
+class SlAppShellAsideHeader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellAsideHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellAsideHeader, isStandalone: true, selector: "[slAppShellAsideHeader]", host: { attributes: { "data-part": "aside-header" } }, exportAs: ["slAppShellAsideHeader"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellAsideHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slAppShellAsideHeader]',
+                    standalone: true,
+                    exportAs: 'slAppShellAsideHeader',
+                    host: { 'data-part': 'aside-header' },
+                }]
+        }] });
+/**
+ * The middle, and the only part of the pane that scrolls. It stands on the
+ * pane's inset; `inset="none"` drops it for content that brings its own.
+ */
+class SlAppShellAsideBody {
+    /** `none` drops the body's own padding, for content that brings its own inset. */
+    inset = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inset" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellAsideBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlAppShellAsideBody, isStandalone: true, selector: "[slAppShellAsideBody]", inputs: { inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "aside-body" }, properties: { "attr.data-inset": "inset() ?? null" } }, exportAs: ["slAppShellAsideBody"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellAsideBody, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slAppShellAsideBody]',
+                    standalone: true,
+                    exportAs: 'slAppShellAsideBody',
+                    host: { 'data-part': 'aside-body', '[attr.data-inset]': 'inset() ?? null' },
+                }]
+        }], propDecorators: { inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }] } });
+/**
+ * The box the pane's extent is a fraction of: the shell's content box, which
+ * is what `cqi` resolves against. Physical edges, because the pointer and the
+ * rectangle are both in client coordinates.
+ */
+function shellRect(root) {
+    const rect = root.getBoundingClientRect();
+    const box = getComputedStyle(root);
+    /* A border whose style is none is nought wide, whatever its width says. */
+    const border = (style, width) => style === 'none' || style === 'hidden' ? 0 : parseFloat(width) || 0;
+    const start = (parseFloat(box.paddingLeft) || 0) + border(box.borderLeftStyle, box.borderLeftWidth);
+    const end = (parseFloat(box.paddingRight) || 0) + border(box.borderRightStyle, box.borderRightWidth);
+    const width = Math.max(0, rect.width - start - end);
+    return width > 0 ? { height: rect.height, width, x: rect.x + start, y: rect.y } : null;
+}
+/** How far a press on the separator may wander and still be a tap. */
+const TAP_SLOP_PX = 3;
+/**
+ * The pane's inner edge, from the WAI-ARIA Window Splitter pattern: a focusable
+ * `separator` whose three values are the extent as whole percentages of the
+ * shell. **Rendering it is the capability**; there is no `resizable` input.
+ *
+ * It moves the column alone. Under `asideMode="overlay"` the layer keeps its
+ * size step and a closed pane has nothing to resize, so the element is
+ * `hidden` there; below the breakpoint the stylesheet hides it, because a row
+ * under the content has no inline edge.
+ *
+ * The arrows are physical, the pattern's own reading: `ArrowLeft` grows an end
+ * pane in a left-to-right document, and shrinks it where `navSide="end"` or a
+ * mirrored line puts the pane at the start.
+ */
+class SlAppShellAsideResizer {
+    shell = inject(SlAppShell);
+    native = inject(ElementRef).nativeElement;
+    written = inject(new HostAttributeToken('aria-label'), { optional: true });
+    /** Where the press began and how far the edge was from the pointer then. */
+    press = null;
+    /** What the document looked like before the drag, and how to put it back. */
+    gesture = null;
+    /** The pane's measure while the size step decides it, read from the layout. */
+    rest = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rest" }] : /* istanbul ignore next */ []));
+    label = computed(() => this.written ?? this.shell.t('resizeAside'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    shown = computed(() => this.shell.resolvedAsideMode() === 'inline' && this.shell.asideOpen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+    /* The pane is at the end of the line the navigation is not on. */
+    side = computed(() => this.shell.resolvedNavSide() === 'end' ? 'start' : 'end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    current = computed(() => {
+        const { max, min } = this.shell.asideBounds();
+        return clamp(this.shell.asideExtent() ?? this.rest() ?? min, min, max);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        destroyRef.onDestroy(() => this.gesture?.());
+        afterNextRender(() => {
+            const aside = this.shell.nodes.aside;
+            if (aside === null)
+                return;
+            const read = () => {
+                const rect = shellRect(this.shell.element);
+                this.rest.set(rect === null ? undefined : aside.getBoundingClientRect().width / rect.width);
+            };
+            read();
+            if (typeof ResizeObserver === 'undefined')
+                return;
+            const observer = new ResizeObserver(read);
+            observer.observe(aside);
+            destroyRef.onDestroy(() => observer.disconnect());
+        });
+    }
+    percent(value) {
+        return Math.round(clamp(value, 0, 1) * 100);
+    }
+    isRtl() {
+        return getComputedStyle(this.native).direction === 'rtl';
+    }
+    pointAt(event, rect) {
+        return extentAtPoint({
+            point: { x: event.clientX, y: event.clientY },
+            rect,
+            rtl: this.isRtl(),
+            side: this.side(),
+        });
+    }
+    pointerDown(event) {
+        if (event.defaultPrevented || event.button !== 0)
+            return;
+        const rect = shellRect(this.shell.element);
+        if (rect === null)
+            return;
+        event.preventDefault();
+        this.native.setPointerCapture(event.pointerId);
+        this.native.focus();
+        this.press = {
+            moved: false,
+            offset: this.current() - this.pointAt(event, rect),
+            x: event.clientX,
+        };
+    }
+    pointerMove(event) {
+        const held = this.press;
+        if (held === null)
+            return;
+        const rect = shellRect(this.shell.element);
+        if (rect === null)
+            return;
+        if (!held.moved) {
+            if (Math.abs(event.clientX - held.x) < TAP_SLOP_PX)
+                return;
+            held.moved = true;
+            /* The cursor has to survive the pointer leaving the separator, and a drag
+               across the page must not select the text under it. Both are the
+               document's and neither is reachable from the family's own stylesheet. */
+            this.gesture?.();
+            this.gesture = holdResizeGesture(this.native.ownerDocument, 'col-resize');
+            this.shell.asideDragging.set(true);
+        }
+        this.shell.requestAsideExtent(this.pointAt(event, rect) + held.offset, 'pointer', event);
+    }
+    endDrag(event) {
+        const held = this.press;
+        if (held === null)
+            return;
+        this.press = null;
+        if (this.native.hasPointerCapture(event.pointerId)) {
+            this.native.releasePointerCapture(event.pointerId);
+        }
+        if (!held.moved)
+            return;
+        this.gesture?.();
+        this.gesture = null;
+        this.shell.asideDragging.set(false);
+    }
+    keyDown(event) {
+        if (event.defaultPrevented)
+            return;
+        const side = this.side();
+        const { max, min } = this.shell.asideBounds();
+        const atStart = anchorsAtStart(side, this.isRtl());
+        /* A distance and not a proportion, converted against the shell measured at
+           the moment of the press. */
+        const by = (direction) => {
+            event.preventDefault();
+            const rect = shellRect(this.shell.element);
+            const amount = rect === null
+                ? 0
+                : stepAmountFromPixels({
+                    pixels: event.shiftKey ? EXTENT_LARGE_STEP_PX : EXTENT_STEP_PX,
+                    rect,
+                    side,
+                });
+            this.shell.requestAsideExtent(stepExtent({ amount, direction, fraction: this.current(), max, min }), 'keyboard', event);
+        };
+        switch (event.key) {
+            case 'ArrowLeft':
+                return by(atStart ? -1 : 1);
+            case 'ArrowRight':
+                return by(atStart ? 1 : -1);
+            case 'Home':
+                event.preventDefault();
+                return this.shell.requestAsideExtent(min, 'keyboard', event);
+            case 'End':
+                event.preventDefault();
+                return this.shell.requestAsideExtent(max, 'keyboard', event);
+            default:
+                return undefined;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellAsideResizer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellAsideResizer, isStandalone: true, selector: "[slAppShellAsideResizer]", host: { attributes: { "data-part": "aside-resizer", "role": "separator", "tabindex": "0", "aria-orientation": "vertical" }, listeners: { "pointerdown": "pointerDown($event)", "pointermove": "pointerMove($event)", "pointerup": "endDrag($event)", "lostpointercapture": "endDrag($event)", "keydown": "keyDown($event)" }, properties: { "attr.aria-controls": "shell.asideId", "attr.aria-label": "label()", "attr.aria-valuemin": "percent(shell.asideBounds().min)", "attr.aria-valuemax": "percent(shell.asideBounds().max)", "attr.aria-valuenow": "percent(current())", "attr.hidden": "shown() ? null : ''" } }, exportAs: ["slAppShellAsideResizer"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellAsideResizer, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slAppShellAsideResizer]',
+                    standalone: true,
+                    exportAs: 'slAppShellAsideResizer',
+                    host: {
+                        'data-part': 'aside-resizer',
+                        role: 'separator',
+                        tabindex: '0',
+                        'aria-orientation': 'vertical',
+                        '[attr.aria-controls]': 'shell.asideId',
+                        '[attr.aria-label]': 'label()',
+                        '[attr.aria-valuemin]': 'percent(shell.asideBounds().min)',
+                        '[attr.aria-valuemax]': 'percent(shell.asideBounds().max)',
+                        '[attr.aria-valuenow]': 'percent(current())',
+                        '[attr.hidden]': "shown() ? null : ''",
+                        '(pointerdown)': 'pointerDown($event)',
+                        '(pointermove)': 'pointerMove($event)',
+                        '(pointerup)': 'endDrag($event)',
+                        '(lostpointercapture)': 'endDrag($event)',
+                        '(keydown)': 'keyDown($event)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/** The pinned bottom: the actions that close the task the pane holds. */
+class SlAppShellAsideFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellAsideFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellAsideFooter, isStandalone: true, selector: "[slAppShellAsideFooter]", host: { attributes: { "data-part": "aside-footer" } }, exportAs: ["slAppShellAsideFooter"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellAsideFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slAppShellAsideFooter]',
+                    standalone: true,
+                    exportAs: 'slAppShellAsideFooter',
+                    host: { 'data-part': 'aside-footer' },
+                }]
+        }] });
+/**
+ * The pane's disclosure control, with the navigation control's wiring: it can
+ * stand in the pane's own header, in the banner's actions, or anywhere else,
+ * and there is still exactly one control carrying the pane's state.
+ */
+class SlAppShellAsideToggle {
+    shell = attach('asideToggle');
+    written = inject(new HostAttributeToken('aria-label'), { optional: true });
+    writtenId = inject(new HostAttributeToken('id'), { optional: true });
+    writtenControls = inject(new HostAttributeToken('aria-controls'), {
+        optional: true,
+    });
+    elementId = this.writtenId ?? this.shell.asideToggleId;
+    controls = this.writtenControls ?? this.shell.asideId;
+    label = computed(() => {
+        if (this.written !== null)
+            return this.written;
+        return this.shell.asideOpen() ? this.shell.t('closeAside') : this.shell.t('openAside');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    press(event) {
+        const reason = event.detail === 0 ? 'keyboard' : 'pointer';
+        this.shell.requestAside(!this.shell.asideOpen(), reason, event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellAsideToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellAsideToggle, isStandalone: true, selector: "button[slAppShellAsideToggle]", host: { attributes: { "data-part": "aside-toggle", "type": "button" }, listeners: { "click": "press($event)" }, properties: { "attr.id": "elementId", "attr.aria-controls": "controls", "attr.aria-expanded": "shell.asideOpen()", "attr.aria-label": "label()" } }, exportAs: ["slAppShellAsideToggle"], ngImport: i0, template: `<ng-content
+    ><span slIcon
+      ><svg slGlyph [name]="shell.asideOpen() ? 'panel-close' : 'panel-open'"></svg></span
+  ></ng-content>`, isInline: true, dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellAsideToggle, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slAppShellAsideToggle]',
+                    standalone: true,
+                    exportAs: 'slAppShellAsideToggle',
+                    imports: [SlGlyph, SlIcon],
+                    /* The panel mark says what a press does, unless the consumer wrote content of their own. */
+                    template: `<ng-content
+    ><span slIcon
+      ><svg slGlyph [name]="shell.asideOpen() ? 'panel-close' : 'panel-open'"></svg></span
+  ></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'data-part': 'aside-toggle',
+                        type: 'button',
+                        '[attr.id]': 'elementId',
+                        '[attr.aria-controls]': 'controls',
+                        '[attr.aria-expanded]': 'shell.asideOpen()',
+                        '[attr.aria-label]': 'label()',
+                        '(click)': 'press($event)',
+                    },
+                }]
+        }] });
+/** The `contentinfo` landmark: the application's footer, not the page's action bar. */
+class SlAppShellFooter {
+    constructor() {
+        attach('footer');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellFooter, isStandalone: true, selector: "footer[slAppShellFooter]", host: { attributes: { "data-part": "footer" } }, exportAs: ["slAppShellFooter"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'footer[slAppShellFooter]',
+                    standalone: true,
+                    exportAs: 'slAppShellFooter',
+                    host: { 'data-part': 'footer' },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * The disclosure control, by the APG's Disclosure pattern: a `button` carrying
+ * `aria-expanded` and `aria-controls`, which `Enter` and `Space` activate
+ * natively. It takes its wiring from the shell rather than from its position,
+ * so it can stand in the banner, in the navigation's own footer, or anywhere
+ * else, and there is still exactly one control carrying the state.
+ */
+class SlAppShellNavToggle {
+    shell = attach('toggle');
+    written = inject(new HostAttributeToken('aria-label'), { optional: true });
+    writtenId = inject(new HostAttributeToken('id'), { optional: true });
+    writtenControls = inject(new HostAttributeToken('aria-controls'), {
+        optional: true,
+    });
+    elementId = this.writtenId ?? this.shell.toggleId;
+    controls = this.writtenControls ?? this.shell.navId;
+    label = computed(() => {
+        if (this.written !== null)
+            return this.written;
+        return this.shell.navOpen() ? this.shell.t('close') : this.shell.t('open');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    press(event) {
+        /* A click synthesised by the keyboard reports no detail; a real one does.
+           The reason is the difference between a product that persists a press and
+           one that cannot tell which gesture it saw. */
+        const reason = event.detail === 0 ? 'keyboard' : 'pointer';
+        this.shell.request(!this.shell.navOpen(), reason, event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellNavToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellNavToggle, isStandalone: true, selector: "button[slAppShellNavToggle]", host: { attributes: { "data-part": "nav-toggle", "type": "button" }, listeners: { "click": "press($event)" }, properties: { "attr.id": "elementId", "attr.aria-controls": "controls", "attr.aria-expanded": "shell.navOpen()", "attr.aria-label": "label()" } }, exportAs: ["slAppShellNavToggle"], ngImport: i0, template: `<ng-content
+    ><span slIcon><svg slGlyph [name]="shell.navOpen() ? 'panel-close' : 'panel-open'"></svg></span
+  ></ng-content>`, isInline: true, dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellNavToggle, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slAppShellNavToggle]',
+                    standalone: true,
+                    exportAs: 'slAppShellNavToggle',
+                    imports: [SlGlyph, SlIcon],
+                    /* The panel mark says what a press does, unless the consumer wrote content of their own. */
+                    template: `<ng-content
+    ><span slIcon><svg slGlyph [name]="shell.navOpen() ? 'panel-close' : 'panel-open'"></svg></span
+  ></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'data-part': 'nav-toggle',
+                        type: 'button',
+                        '[attr.id]': 'elementId',
+                        '[attr.aria-controls]': 'controls',
+                        '[attr.aria-expanded]': 'shell.navOpen()',
+                        '[attr.aria-label]': 'label()',
+                        '(click)': 'press($event)',
+                    },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { APP_SHELL_DEFAULTS, APP_SHELL_OVERLAY_AT, SlAppShell, SlAppShellActions, SlAppShellAside, SlAppShellAsideBody, SlAppShellAsideFooter, SlAppShellAsideHeader, SlAppShellAsideResizer, SlAppShellAsideToggle, SlAppShellBanner, SlAppShellBrand, SlAppShellCentre, SlAppShellFooter, SlAppShellMain, SlAppShellNav, SlAppShellNavBody, SlAppShellNavFooter, SlAppShellNavHeader, SlAppShellNavRail, SlAppShellNavToggle, SlAppShellProgress, injectAppShellDefaults, provideAppShellDefaults };
+//# sourceMappingURL=slotted-angular-app-shell.mjs.map