@aquera/nile-elements 2.0.4 → 2.0.6

package/dist/src/nile-app-shell/nile-app-shell.js

@@ -0,0 +1,796 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { styles } from './nile-app-shell.css';
+import { renderGlyph } from '../internal/glyph';
+import NileElement from '../internal/nile-element';
+import '../nile-button/nile-button';
+/**
+ * @summary The application frame every route inherits: a side nav, a content
+ * container, an optional aside and an AI assistant panel. It holds anything —
+ * the shell owns the boxes, the page owns what goes in them.
+ *
+ * @status stable
+ * @since 2.0
+ *
+ * @tag nile-app-shell
+ *
+ * @dependency nile-button
+ * @dependency nile-glyph
+ *
+ * @slot - The page body, inside the content container.
+ * @slot banner - A full-width strip above every other region.
+ * @slot top-bar - The page-title bar. Mounted inside the container by default,
+ *   or spanning the shell when `top-bar-placement="shell"`. The nav toggle is
+ *   rendered before whatever is slotted here.
+ * @slot top-bar-actions - Controls pinned to the end of the top bar.
+ * @slot tabs - A hoisted second-level tab strip, flush under the top bar and
+ *   outside `<main>`'s scroller, so it never scrolls away. The region carries
+ *   the strip's height, padding and rule, so slot a `<nile-tab-group>` or the
+ *   tab controls themselves.
+ * @slot side-nav - The navigation track. Works best with `<nile-side-bar>`.
+ * @slot aside - A secondary column between the content container and the panel.
+ * @slot panel - The AI panel's body. When nothing is slotted here the panel is
+ *   unmounted and `openPanel()` is a no-op.
+ * @slot panel-header - Replaces the default panel heading (mark plus title).
+ * @slot panel-actions - Controls added before the panel's close button.
+ * @slot panel-footer - A bar docked below the panel's scroll region, for a
+ *   composer.
+ *
+ * @event nile-nav-toggle - Emitted after the nav's collapsed state or its
+ *   forced-rail lock changes. `detail: { collapsed, locked }`.
+ * @event nile-panel-toggle - Emitted after the panel opens or closes.
+ *   `detail: { open, mode }`.
+ * @event nile-panel-mode-change - Emitted when the panel flips between docked
+ *   and overlay. `detail: { mode }`.
+ *
+ * @csspart skip-link - The skip-to-content link.
+ * @csspart banner - The banner region.
+ * @csspart shell-top-bar - The top bar when it spans the shell.
+ * @csspart top-bar - The top bar, in either placement.
+ * @csspart nav-toggle - The built-in nav toggle button.
+ * @csspart rule - The vertical rule after the nav toggle.
+ * @csspart top-bar-actions - The end-aligned top bar action group. Unmounted
+ *   when it holds neither slotted actions nor the Ask button, so it reserves
+ *   no gap.
+ * @csspart ask - The built-in Ask button, the shell's single door to the panel.
+ *   A `<nile-button>`; its inner surface and label are exported as
+ *   `ask__base` and `ask__label`.
+ * @csspart tabs - The hoisted tab-strip region, under the top bar.
+ * @csspart side-nav - The navigation track.
+ * @csspart content-section - The flex row holding container, aside and panel.
+ * @csspart container - The content container.
+ * @csspart main - The scrolling page body.
+ * @csspart aside - The aside region.
+ * @csspart panel - The AI panel.
+ * @csspart panel-header - The panel's header bar.
+ * @csspart panel-title - The panel's title text.
+ * @csspart panel-actions - The panel's header action group.
+ * @csspart panel-close - The panel's close button.
+ * @csspart panel-body - The panel's scroll region.
+ * @csspart panel-footer - The panel's footer.
+ *
+ * @cssproperty [--nile-app-shell-side-nav-width=260px] - Expanded nav track.
+ * @cssproperty [--nile-app-shell-side-nav-rail-width=64px] - Collapsed track.
+ * @cssproperty [--nile-app-shell-side-nav-bg=transparent] - Surface behind a
+ *   slotted side nav. Transparent by default: the nav and the page share one
+ *   surface.
+ * @cssproperty [--nile-app-shell-side-nav-border=0] - Edge on a slotted side
+ *   nav.
+ * @cssproperty [--nile-app-shell-gutter=8px] - Content-section padding, and the
+ *   gap between container, aside and panel.
+ * @cssproperty [--nile-app-shell-content-padding=24px] - Container inner
+ *   padding. The origin every top bar starts at.
+ * @cssproperty [--nile-app-shell-top-bar-height=56px] - Top bar and panel
+ *   header height. Drops to 48px under 600px of viewport height.
+ * @cssproperty [--nile-app-shell-tabs-height=48px] - Tab strip height.
+ * @cssproperty [--nile-app-shell-panel-width=480px] - Docked panel width, and
+ *   the `min()` ceiling for the overlay drawer.
+ * @cssproperty [--nile-app-shell-panel-min-width=360px] - How far a docked
+ *   panel shrinks to keep pushing rather than covering the page.
+ * @cssproperty [--nile-app-shell-aside-width=320px] - Aside width.
+ * @cssproperty [--nile-app-shell-aside-min-width=240px] - How far the aside
+ *   shrinks before the page is asked for room.
+ * @cssproperty [--nile-app-shell-content-min-width=640px] - Container floor.
+ * @cssproperty [--nile-app-shell-min-width=768px] - Below this the window
+ *   scrolls rather than the shell compressing.
+ * @cssproperty [--nile-app-shell-centered-width=824px] - Column width under
+ *   `content-align="centered"`.
+ * @cssproperty [--nile-app-shell-utility-size=32px] - Height of the Ask
+ *   button. The toggle and close controls are nile-buttons and size themselves.
+ * @cssproperty [--nile-app-shell-radius=16px] - Container, aside and panel
+ *   radius.
+ * @cssproperty [--nile-app-shell-duration=250ms] - Track and panel motion.
+ * @cssproperty [--nile-app-shell-ease] - Easing for moves and resizes.
+ *
+ * @method openPanel() - Open the AI panel. No-op when the panel is unavailable.
+ * @method closePanel() - Close the AI panel.
+ * @method togglePanel(force?) - Toggle, or force a specific open state.
+ * @method expandNav() - Expand the side nav.
+ * @method collapseNav() - Collapse the side nav to a rail.
+ * @method toggleNav(force?) - Toggle, or force a specific collapsed state.
+ */
+let NileAppShell = class NileAppShell extends NileElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The user's nav preference. The nav can still render as a rail while this is
+         * false — see `navLocked`.
+         */
+        this.navCollapsed = false;
+        /** Whether the AI panel is open. */
+        this.panelOpen = false;
+        /**
+         * Unmounts the AI panel for this route even when the `panel` slot is filled.
+         * `openPanel()` becomes a no-op.
+         */
+        this.noPanel = false;
+        /** The default panel heading. Ignored when `panel-header` is slotted. */
+        this.panelLabel = 'Ask Aquera';
+        /** Hides the built-in nav toggle. Mount `nile-app-shell-nav-toggle` yourself. */
+        this.noNavToggle = false;
+        /** Drops the Cmd/Ctrl+J and Escape panel shortcuts. */
+        this.noPanelShortcut = false;
+        /** Hides the skip-to-content link. */
+        this.noSkipLink = false;
+        /** Label for the skip-to-content link. */
+        this.skipLinkLabel = 'Skip to main content';
+        /** Where the top bar is mounted: inside the container, or spanning the shell. */
+        this.topBarPlacement = 'content';
+        /** `centered` caps the page body at `--nile-app-shell-centered-width`. */
+        this.contentAlign = 'fluid';
+        /**
+         * Makes the slotted page root a size query container, so page CSS can size
+         * against the content container instead of the viewport. Query it unnamed —
+         * `@container (min-width: 720px)` — because a container name declared inside
+         * the shell's shadow tree is not visible to page CSS. Opt-in, because it
+         * also applies layout containment to that element.
+         */
+        this.contentContainer = false;
+        /** Drops the container's card chrome for a full-bleed page. */
+        this.flat = false;
+        /** Removes the container's inner padding. */
+        this.noPadding = false;
+        /**
+         * The label on the built-in Ask button.
+         *
+         * The button is the shell's, not the app's: it is the one control that has
+         * to know whether a panel is mounted for this route and how to open it, and
+         * slotted content can see neither. Everything else in the bar — the
+         * breadcrumb, the page actions, the tab strip — is slotted markup.
+         */
+        this.askLabel = 'Ask';
+        /** Drops the built-in Ask button, for a bar that renders its own. */
+        this.noAsk = false;
+        /** Sizes the shell to the viewport instead of its parent. */
+        this.fullHeight = false;
+        /**
+         * Below this shell width the panel overlays the content instead of pushing
+         * it, and the nav is forced to a rail.
+         *
+         * Zero — the default — means never: the panel is furniture that squeezes the
+         * page, at every width. It earns its room from the nav rail first and from
+         * its own width next (see `--nile-app-shell-panel-min-width`), so it does
+         * not have to cover the page to fit. Set a width here to opt back into an
+         * overlay drawer below it.
+         */
+        this.overlayBreakpoint = 0;
+        /**
+         * Below this shell width an open docked panel forces the nav to a rail.
+         * A floor, not the whole rule: the nav also rails as soon as the expanded
+         * track is what stops the row from fitting. This is the first thing the
+         * panel takes room from, so it can push rather than cover.
+         */
+        this.dockedRailBreakpoint = 1440;
+        /** The panel's current mode. Derived from the shell's width. */
+        this._panelMode = 'docked';
+        /** Whether the nav is held at a rail by the shell's width. */
+        this._navLocked = false;
+        this._hasBanner = false;
+        this._hasSideNav = false;
+        this._hasTopBar = false;
+        this._hasTopBarActions = false;
+        this._hasTabs = false;
+        this._hasPanel = false;
+        this._hasPanelFooter = false;
+        /**
+         * True when a `nile-app-shell-panel` is slotted. That component owns the
+         * panel's heading, actions, close button and footer, so the shell renders a
+         * bare region and keeps only the geometry and the open state — the same
+         * hand-off as `no-nav-toggle` plus `nile-app-shell-nav-toggle`.
+         */
+        this._panelOwnsChrome = false;
+        this._hasAside = false;
+        this._width = 0;
+        this._restoredPanelOpen = null;
+        /** A slotted sidebar's own expand button is the same toggle. */
+        this._onSideNavToggle = (event) => {
+            const detail = event.detail;
+            if (detail && typeof detail.collapsed === 'boolean') {
+                this._setNavCollapsed(detail.collapsed);
+            }
+        };
+        this._onKeyDown = (event) => {
+            if (this.noPanelShortcut || !this.panelAvailable)
+                return;
+            const key = event.key ?? '';
+            if ((event.metaKey || event.ctrlKey) && key.toLowerCase() === 'j') {
+                event.preventDefault();
+                this.togglePanel();
+                return;
+            }
+            // A docked panel is furniture, not a dismissible overlay.
+            if (key === 'Escape' && this.panelOpen && this._panelMode === 'overlay') {
+                this.closePanel();
+            }
+        };
+    }
+    static get styles() {
+        return [styles];
+    }
+    /** The panel's current mode: `docked` or `overlay`. */
+    get panelMode() {
+        return this._panelMode;
+    }
+    /** Whether the shell is holding the nav at a rail. The toggle is disabled. */
+    get navLocked() {
+        return this._navLocked;
+    }
+    /** Whether a panel is mounted for this route. */
+    get panelAvailable() {
+        return this._hasPanel && !this.noPanel;
+    }
+    /** Whether the built-in Ask button is rendered. */
+    get askVisible() {
+        return this.panelAvailable && !this.noAsk;
+    }
+    /** Whether the nav renders as a rail right now, preference or lock. */
+    get rail() {
+        return this.navCollapsed || this._navLocked;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._restore();
+        this._resizeObserver = new ResizeObserver(entries => {
+            const entry = entries[entries.length - 1];
+            this._measure(entry.contentRect.width);
+        });
+        this._resizeObserver.observe(this);
+        document.addEventListener('keydown', this._onKeyDown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = undefined;
+        document.removeEventListener('keydown', this._onKeyDown);
+    }
+    willUpdate(changed) {
+        if (changed.has('panelOpen') ||
+            changed.has('noPanel') ||
+            changed.has('overlayBreakpoint') ||
+            changed.has('dockedRailBreakpoint') ||
+            // Mounting an aside changes what a docked panel has to fit beside.
+            // Private state is outside `keyof this`, so ask the map directly.
+            changed.has('_hasAside') ||
+            changed.has('_hasSideNav')) {
+            this._recompute();
+        }
+    }
+    updated(changed) {
+        super.updated(changed);
+        // Derived state the stylesheet and consumers read off the host.
+        this.toggleAttribute('rail', this.rail);
+        this.toggleAttribute('nav-locked', this._navLocked);
+        this.toggleAttribute('has-banner', this._hasBanner);
+        this.toggleAttribute('has-side-nav', this._hasSideNav);
+        this.toggleAttribute('has-top-bar', this._hasTopBar || (!this.noNavToggle && this._hasSideNav));
+        this.toggleAttribute('has-top-bar-actions', this._hasTopBarActions);
+        this.toggleAttribute('has-ask', this.askVisible);
+        this.toggleAttribute('has-tabs', this._hasTabs);
+        this.toggleAttribute('has-aside', this._hasAside);
+        this.toggleAttribute('has-panel', this.panelAvailable);
+        this.toggleAttribute('has-panel-footer', this._hasPanelFooter);
+        this.setAttribute('panel-mode', this._panelMode);
+        this.setAttribute('panel-chrome', this._panelOwnsChrome ? 'external' : 'internal');
+        this._syncSideNav();
+    }
+    /** Open the AI panel. No-op when no panel is mounted for this route. */
+    openPanel() {
+        if (!this.panelAvailable)
+            return;
+        this._setPanelOpen(true);
+    }
+    /** Close the AI panel. */
+    closePanel() {
+        this._setPanelOpen(false);
+    }
+    /**
+     * Toggle the panel, or force a state. Call `openPanel()` from a page action —
+     * a page action that toggles closes the panel for a user who already had it
+     * open.
+     */
+    togglePanel(force) {
+        const next = force ?? !this.panelOpen;
+        if (next)
+            this.openPanel();
+        else
+            this.closePanel();
+    }
+    /** Expand the side nav. */
+    expandNav() {
+        this._setNavCollapsed(false);
+    }
+    /** Collapse the side nav to a rail. */
+    collapseNav() {
+        this._setNavCollapsed(true);
+    }
+    /** Toggle the side nav, or force a collapsed state. */
+    toggleNav(force) {
+        this._setNavCollapsed(force ?? !this.navCollapsed);
+    }
+    /** Move focus to the page body. */
+    focusMain() {
+        this._main?.focus();
+    }
+    _setPanelOpen(value) {
+        if (this.panelOpen === value)
+            return;
+        this.panelOpen = value;
+        this._persist();
+        this.emit('nile-panel-toggle', { open: value, mode: this._panelMode });
+    }
+    _setNavCollapsed(value) {
+        if (this.navCollapsed === value)
+            return;
+        this.navCollapsed = value;
+        this._persist();
+        this.emit('nile-nav-toggle', {
+            collapsed: value,
+            locked: this._navLocked,
+        });
+    }
+    /** Records the shell's width and re-derives everything that depends on it. */
+    _measure(width) {
+        if (width === this._width)
+            return;
+        const first = this._width === 0;
+        this._width = width;
+        this._recompute();
+        // A persisted panel state only applies once we know the panel would dock.
+        if (first && this._restoredPanelOpen !== null) {
+            const open = this._restoredPanelOpen;
+            this._restoredPanelOpen = null;
+            if (open && this._panelMode === 'docked')
+                this.openPanel();
+        }
+    }
+    /**
+     * The shell's geometry, read off its own custom properties so a consumer's
+     * overrides are part of the sum. Falls back to the stylesheet's defaults
+     * before the element has a computed style.
+     */
+    _geometry() {
+        const style = getComputedStyle(this);
+        const px = (name, fallback) => {
+            const value = parseFloat(style.getPropertyValue(name));
+            return Number.isFinite(value) ? value : fallback;
+        };
+        return {
+            nav: px('--nile-app-shell-side-nav-width', 260),
+            rail: px('--nile-app-shell-side-nav-rail-width', 64),
+            gutter: px('--nile-app-shell-gutter', 8),
+            content: px('--nile-app-shell-content-min-width', 640),
+            aside: px('--nile-app-shell-aside-width', 320),
+            panel: px('--nile-app-shell-panel-width', 480),
+        };
+    }
+    /**
+     * The shell width a docked panel needs to sit beside the content floor, over
+     * a side-nav `track` wide.
+     *
+     * A fixed breakpoint cannot answer this: what shares the row changes per
+     * route. An aside alone adds 328px, so a shell wide enough to hold the
+     * expanded nav beside a docked panel on one route is 328px short on the
+     * next. Summing what is actually mounted rails the nav exactly when the
+     * track is what the row cannot afford.
+     */
+    _dockRequirement(geo, track) {
+        const nav = this._hasSideNav ? track : 0;
+        const aside = this._hasAside ? geo.aside + geo.gutter : 0;
+        // Two gutters of padding on the content column, one between container and
+        // panel; the aside carries its own gutter above.
+        return nav + geo.content + aside + geo.panel + geo.gutter * 3;
+    }
+    _recompute() {
+        const width = this._width;
+        const geo = this._geometry();
+        /*
+         * Overlay is opt-in and nothing derives it: a panel that covers the page
+         * hides the thing the user is asking about. Running out of room is not a
+         * reason to switch — the rail and the panel's own min width absorb that —
+         * so the shell only overlays below a width the author names.
+         */
+        const overlay = this.overlayBreakpoint > 0 && width > 0 && width < this.overlayBreakpoint;
+        const mode = overlay ? 'overlay' : 'docked';
+        // A docked panel squeezes the container, so a narrow shell trades the
+        // expanded nav for content width before the page gives any up. Measured
+        // against the expanded track: the nav rails exactly when it is the track
+        // that stops the row from fitting.
+        const railAt = Math.max(this.dockedRailBreakpoint, this._dockRequirement(geo, geo.nav));
+        const squeezed = !overlay &&
+            this.panelOpen &&
+            this.panelAvailable &&
+            width > 0 &&
+            width < railAt;
+        const locked = overlay || squeezed;
+        if (mode !== this._panelMode) {
+            this._panelMode = mode;
+            this.emit('nile-panel-mode-change', { mode });
+        }
+        if (locked !== this._navLocked) {
+            this._navLocked = locked;
+            this.emit('nile-nav-toggle', {
+                collapsed: this.navCollapsed,
+                locked,
+            });
+        }
+    }
+    /** Mirrors the effective rail state onto a slotted `nile-side-bar`. */
+    _syncSideNav() {
+        this.querySelectorAll('[slot="side-nav"]').forEach(el => {
+            if (el.tagName === 'NILE-SIDE-BAR')
+                el.toggleAttribute('collapsed', this.rail);
+        });
+    }
+    _storageKey(part) {
+        return `nile-app-shell:${this.persistKey}:${part}`;
+    }
+    _restore() {
+        if (!this.persistKey)
+            return;
+        try {
+            const nav = localStorage.getItem(this._storageKey('nav-collapsed'));
+            if (nav !== null)
+                this.navCollapsed = nav === 'true';
+            const panel = localStorage.getItem(this._storageKey('panel-open'));
+            if (panel !== null)
+                this._restoredPanelOpen = panel === 'true';
+        }
+        catch {
+            /* Storage can be blocked; the shell still works without it. */
+        }
+    }
+    _persist() {
+        if (!this.persistKey)
+            return;
+        try {
+            localStorage.setItem(this._storageKey('nav-collapsed'), String(this.navCollapsed));
+            if (this._panelMode === 'docked') {
+                localStorage.setItem(this._storageKey('panel-open'), String(this.panelOpen));
+            }
+        }
+        catch {
+            /* Storage can be blocked; the shell still works without it. */
+        }
+    }
+    _onSlotChange(slot, event) {
+        const assigned = event.target.assignedNodes({
+            flatten: true,
+        });
+        const filled = assigned.some(node => node.nodeType === Node.ELEMENT_NODE ||
+            (node.textContent ?? '').trim() !== '');
+        switch (slot) {
+            case 'banner':
+                this._hasBanner = filled;
+                break;
+            case 'side-nav':
+                this._hasSideNav = filled;
+                this._syncSideNav();
+                break;
+            case 'top-bar':
+                this._hasTopBar = filled;
+                break;
+            case 'top-bar-actions':
+                this._hasTopBarActions = filled;
+                break;
+            case 'tabs':
+                this._hasTabs = filled;
+                break;
+            case 'aside':
+                this._hasAside = filled;
+                break;
+            case 'panel':
+                this._hasPanel = filled;
+                this._panelOwnsChrome = assigned.some(node => node.nodeType === Node.ELEMENT_NODE &&
+                    node.tagName === 'NILE-APP-SHELL-PANEL');
+                this._recompute();
+                break;
+            case 'panel-footer':
+                this._hasPanelFooter = filled;
+                break;
+            default:
+                break;
+        }
+    }
+    _renderNavToggle() {
+        if (this.noNavToggle || !this._hasSideNav)
+            return '';
+        const expanded = !this.rail;
+        return html `
+      <div class="nav-toggle-group">
+        <nile-button
+          class="nav-toggle"
+          part="nav-toggle"
+          variant="ghost"
+          circle
+          aria-controls="side-nav"
+          aria-expanded=${expanded ? 'true' : 'false'}
+          ?disabled=${this._navLocked}
+          title=${this._navLocked
+            ? 'The navigation stays collapsed at this window width'
+            : expanded
+                ? 'Collapse navigation'
+                : 'Expand navigation'}
+          aria-label=${expanded ? 'Collapse navigation' : 'Expand navigation'}
+          @click=${() => this.toggleNav()}
+        >
+          ${renderGlyph(expanded ? 'ng-panel-left-close' : 'ng-panel-left-open', 24, 'currentColor')}
+        </nile-button>
+        ${this._hasTopBar ? html `<span class="rule" part="rule"></span>` : ''}
+      </div>
+    `;
+    }
+    _renderTopBar(placement) {
+        return html `
+      <div
+        class=${placement === 'shell' ? 'top-bar shell-top-bar' : 'top-bar'}
+        part=${placement === 'shell' ? 'top-bar shell-top-bar' : 'top-bar'}
+      >
+        ${this._renderNavToggle()}
+        <div class="top-bar-content">
+          <slot
+            name="top-bar"
+            @slotchange=${(e) => this._onSlotChange('top-bar', e)}
+          ></slot>
+        </div>
+        <div class="top-bar-actions" part="top-bar-actions">
+          <slot
+            name="top-bar-actions"
+            @slotchange=${(e) => this._onSlotChange('top-bar-actions', e)}
+          ></slot>
+          ${this.askVisible
+            ? html `
+                <nile-button
+                  class="ask"
+                  part="ask"
+                  exportparts="base: ask__base, label: ask__label"
+                  variant="primary"
+                  @click=${() => this.openPanel()}
+                >
+                  <span slot="prefix" class="ask-mark">
+                    ${renderGlyph('ng-sparkles', 16, 'currentColor')}
+                  </span>
+                  ${this.askLabel}
+                </nile-button>
+              `
+            : ''}
+        </div>
+      </div>
+    `;
+    }
+    render() {
+        const shellBar = this.topBarPlacement === 'shell';
+        return html `
+      <button
+        class="skip-link"
+        part="skip-link"
+        type="button"
+        @click=${() => this.focusMain()}
+      >
+        ${this.skipLinkLabel}
+      </button>
+
+      <div class="banner" part="banner">
+        <slot
+          name="banner"
+          @slotchange=${(e) => this._onSlotChange('banner', e)}
+        ></slot>
+      </div>
+
+      ${shellBar ? this._renderTopBar('shell') : ''}
+
+      <div
+        id="side-nav"
+        class="side-nav"
+        part="side-nav"
+        @nile-toggle=${this._onSideNavToggle}
+      >
+        <slot
+          name="side-nav"
+          @slotchange=${(e) => this._onSlotChange('side-nav', e)}
+        ></slot>
+      </div>
+
+      <div class="content-section" part="content-section">
+        <div class="container" part="container">
+          ${shellBar ? '' : this._renderTopBar('content')}
+          <div class="tabs" part="tabs">
+            <slot
+              name="tabs"
+              @slotchange=${(e) => this._onSlotChange('tabs', e)}
+            ></slot>
+          </div>
+          <main class="main" part="main" tabindex="-1">
+            <div class="main-inner"><slot></slot></div>
+          </main>
+        </div>
+
+        <div class="aside" part="aside">
+          <slot
+            name="aside"
+            @slotchange=${(e) => this._onSlotChange('aside', e)}
+          ></slot>
+        </div>
+
+        <aside
+          class="panel"
+          part="panel"
+          aria-label=${ifDefined(this._panelOwnsChrome ? undefined : this.panelLabel)}
+          aria-hidden=${this.panelOpen ? 'false' : 'true'}
+        >
+          ${this._panelOwnsChrome
+            ? html `<slot
+                name="panel"
+                @slotchange=${(e) => this._onSlotChange('panel', e)}
+              ></slot>`
+            : html `
+                <header class="panel-header" part="panel-header">
+                  <slot name="panel-header">
+                    <span class="panel-heading">
+                      <span class="panel-mark">
+                        ${renderGlyph('ng-sparkles', 20, 'currentColor')}
+                      </span>
+                      <h2 class="panel-title" part="panel-title">
+                        ${this.panelLabel}
+                      </h2>
+                    </span>
+                  </slot>
+                  <div class="panel-actions" part="panel-actions">
+                    <slot name="panel-actions"></slot>
+                    <nile-button
+                      class="panel-close"
+                      part="panel-close"
+                      variant="ghost"
+                      circle
+                      title="Close ${this.panelLabel}"
+                      aria-label="Close ${this.panelLabel}"
+                      @click=${() => this.closePanel()}
+                    >
+                      ${renderGlyph('ng-x-close', 24, 'currentColor')}
+                    </nile-button>
+                  </div>
+                </header>
+                <div class="panel-body" part="panel-body">
+                  <slot
+                    name="panel"
+                    @slotchange=${(e) => this._onSlotChange('panel', e)}
+                  ></slot>
+                </div>
+                <div class="panel-footer" part="panel-footer">
+                  <slot
+                    name="panel-footer"
+                    @slotchange=${(e) => this._onSlotChange('panel-footer', e)}
+                  ></slot>
+                </div>
+              `}
+        </aside>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'nav-collapsed' })
+], NileAppShell.prototype, "navCollapsed", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'panel-open' })
+], NileAppShell.prototype, "panelOpen", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'no-panel' })
+], NileAppShell.prototype, "noPanel", void 0);
+__decorate([
+    property({ type: String, attribute: 'panel-label' })
+], NileAppShell.prototype, "panelLabel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'no-nav-toggle' })
+], NileAppShell.prototype, "noNavToggle", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-panel-shortcut' })
+], NileAppShell.prototype, "noPanelShortcut", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'no-skip-link' })
+], NileAppShell.prototype, "noSkipLink", void 0);
+__decorate([
+    property({ type: String, attribute: 'skip-link-label' })
+], NileAppShell.prototype, "skipLinkLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'top-bar-placement' })
+], NileAppShell.prototype, "topBarPlacement", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'content-align' })
+], NileAppShell.prototype, "contentAlign", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'content-container' })
+], NileAppShell.prototype, "contentContainer", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileAppShell.prototype, "flat", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'no-padding' })
+], NileAppShell.prototype, "noPadding", void 0);
+__decorate([
+    property({ type: String, attribute: 'ask-label' })
+], NileAppShell.prototype, "askLabel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'no-ask' })
+], NileAppShell.prototype, "noAsk", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'full-height' })
+], NileAppShell.prototype, "fullHeight", void 0);
+__decorate([
+    property({ type: Number, attribute: 'overlay-breakpoint' })
+], NileAppShell.prototype, "overlayBreakpoint", void 0);
+__decorate([
+    property({ type: Number, attribute: 'docked-rail-breakpoint' })
+], NileAppShell.prototype, "dockedRailBreakpoint", void 0);
+__decorate([
+    property({ type: String, attribute: 'persist-key' })
+], NileAppShell.prototype, "persistKey", void 0);
+__decorate([
+    state()
+], NileAppShell.prototype, "_panelMode", void 0);
+__decorate([
+    state()
+], NileAppShell.prototype, "_navLocked", void 0);
+__decorate([
+    state()
+], NileAppShell.prototype, "_hasBanner", void 0);
+__decorate([
+    state()
+], NileAppShell.prototype, "_hasSideNav", void 0);
+__decorate([
+    state()
+], NileAppShell.prototype, "_hasTopBar", void 0);
+__decorate([
+    state()
+], NileAppShell.prototype, "_hasTopBarActions", void 0);
+__decorate([
+    state()
+], NileAppShell.prototype, "_hasTabs", void 0);
+__decorate([
+    state()
+], NileAppShell.prototype, "_hasPanel", void 0);
+__decorate([
+    state()
+], NileAppShell.prototype, "_hasPanelFooter", void 0);
+__decorate([
+    state()
+], NileAppShell.prototype, "_panelOwnsChrome", void 0);
+__decorate([
+    state()
+], NileAppShell.prototype, "_hasAside", void 0);
+__decorate([
+    query('.main')
+], NileAppShell.prototype, "_main", void 0);
+NileAppShell = __decorate([
+    customElement('nile-app-shell')
+], NileAppShell);
+export { NileAppShell };
+export default NileAppShell;
+//# sourceMappingURL=nile-app-shell.js.map