@aquera/nile-elements 2.0.4 → 2.0.6

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

@@ -0,0 +1,126 @@
+/**
+ * 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, state } from 'lit/decorators.js';
+import { styles } from './nile-app-shell-nav-toggle.css';
+import { renderGlyph } from '../internal/glyph';
+import '../nile-button/nile-button';
+import NileElement from '../internal/nile-element';
+/**
+ * @summary The side-nav toggle, as a standalone control. `nile-app-shell`
+ * renders one in its own top bar; mount this in a header you build yourself, or
+ * a route has no way to expand the rail.
+ *
+ * @status stable
+ * @since 2.0
+ *
+ * @tag nile-app-shell-nav-toggle
+ *
+ * @dependency nile-app-shell
+ * @dependency nile-glyph
+ *
+ * @csspart button - The toggle button.
+ * @csspart rule - The trailing vertical rule.
+ *
+ * @cssproperty [--nile-app-shell-nav-toggle-offset=-4px] - Optical start offset.
+ */
+let NileAppShellNavToggle = class NileAppShellNavToggle extends NileElement {
+    constructor() {
+        super(...arguments);
+        /** Draws the vertical rule the shell's own bar puts after the toggle. */
+        this.withRule = false;
+        this._rail = false;
+        this._locked = false;
+        this._onShellToggle = () => {
+            this._sync();
+        };
+        this._onClick = () => {
+            this._attach();
+            this._observed?.toggleNav();
+            this._sync();
+        };
+    }
+    static get styles() {
+        return [styles];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // The shell may upgrade after this element does, so read it on a microtask.
+        Promise.resolve().then(() => this._attach());
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._observed?.removeEventListener('nile-nav-toggle', this._onShellToggle);
+        this._observed = undefined;
+    }
+    /** The shell this toggle drives, if it found one. */
+    get appShell() {
+        if (this.shell) {
+            const root = this.getRootNode();
+            return root.querySelector(`#${this.shell}`) ?? null;
+        }
+        return this.closest('nile-app-shell') ?? null;
+    }
+    _attach() {
+        const shell = this.appShell;
+        if (!shell || shell === this._observed)
+            return;
+        this._observed?.removeEventListener('nile-nav-toggle', this._onShellToggle);
+        this._observed = shell;
+        shell.addEventListener('nile-nav-toggle', this._onShellToggle);
+        this._sync();
+    }
+    _sync() {
+        const shell = this._observed;
+        if (!shell)
+            return;
+        this._rail = shell.rail;
+        this._locked = shell.navLocked;
+    }
+    render() {
+        const expanded = !this._rail;
+        return html `
+      <nile-button
+        class="toggle"
+        part="button"
+        variant="ghost"
+        circle
+        aria-expanded=${expanded ? 'true' : 'false'}
+        ?disabled=${this._locked}
+        title=${this._locked
+            ? 'The navigation stays collapsed at this window width'
+            : expanded
+                ? 'Collapse navigation'
+                : 'Expand navigation'}
+        aria-label=${expanded ? 'Collapse navigation' : 'Expand navigation'}
+        @click=${this._onClick}
+      >
+        ${renderGlyph(expanded ? 'ng-panel-left-close' : 'ng-panel-left-open', 24, 'currentColor')}
+      </nile-button>
+      <span class="rule" part="rule"></span>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'with-rule' })
+], NileAppShellNavToggle.prototype, "withRule", void 0);
+__decorate([
+    property({ type: String })
+], NileAppShellNavToggle.prototype, "shell", void 0);
+__decorate([
+    state()
+], NileAppShellNavToggle.prototype, "_rail", void 0);
+__decorate([
+    state()
+], NileAppShellNavToggle.prototype, "_locked", void 0);
+NileAppShellNavToggle = __decorate([
+    customElement('nile-app-shell-nav-toggle')
+], NileAppShellNavToggle);
+export { NileAppShellNavToggle };
+export default NileAppShellNavToggle;
+//# sourceMappingURL=nile-app-shell-nav-toggle.js.map

package/dist/src/nile-app-shell-nav-toggle/nile-app-shell-nav-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-app-shell-nav-toggle.js","sourceRoot":"","sources":["../../../src/nile-app-shell-nav-toggle/nile-app-shell-nav-toggle.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styles } from './nile-app-shell-nav-toggle.css';\nimport { renderGlyph } from '../internal/glyph';\nimport '../nile-button/nile-button';\nimport NileElement from '../internal/nile-element';\nimport type { NileAppShell } from '../nile-app-shell/nile-app-shell';\n\n/**\n * @summary The side-nav toggle, as a standalone control. `nile-app-shell`\n * renders one in its own top bar; mount this in a header you build yourself, or\n * a route has no way to expand the rail.\n *\n * @status stable\n * @since 2.0\n *\n * @tag nile-app-shell-nav-toggle\n *\n * @dependency nile-app-shell\n * @dependency nile-glyph\n *\n * @csspart button - The toggle button.\n * @csspart rule - The trailing vertical rule.\n *\n * @cssproperty [--nile-app-shell-nav-toggle-offset=-4px] - Optical start offset.\n */\n@customElement('nile-app-shell-nav-toggle')\nexport class NileAppShellNavToggle extends NileElement {\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /** Draws the vertical rule the shell's own bar puts after the toggle. */\n  @property({ type: Boolean, reflect: true, attribute: 'with-rule' })\n  withRule: boolean = false;\n\n  /**\n   * The shell to drive. Defaults to the nearest `nile-app-shell` ancestor, or\n   * the element with this id.\n   */\n  @property({ type: String })\n  shell?: string;\n\n  @state() private _rail: boolean = false;\n  @state() private _locked: boolean = false;\n\n  private _observed?: NileAppShell;\n\n  public connectedCallback(): void {\n    super.connectedCallback();\n    // The shell may upgrade after this element does, so read it on a microtask.\n    Promise.resolve().then(() => this._attach());\n  }\n\n  public disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._observed?.removeEventListener('nile-nav-toggle', this._onShellToggle);\n    this._observed = undefined;\n  }\n\n  /** The shell this toggle drives, if it found one. */\n  public get appShell(): NileAppShell | null {\n    if (this.shell) {\n      const root = this.getRootNode() as Document | ShadowRoot;\n      return (root.querySelector(`#${this.shell}`) as NileAppShell) ?? null;\n    }\n    return this.closest('nile-app-shell') ?? null;\n  }\n\n  private _attach(): void {\n    const shell = this.appShell;\n    if (!shell || shell === this._observed) return;\n    this._observed?.removeEventListener('nile-nav-toggle', this._onShellToggle);\n    this._observed = shell;\n    shell.addEventListener('nile-nav-toggle', this._onShellToggle);\n    this._sync();\n  }\n\n  private _onShellToggle = (): void => {\n    this._sync();\n  };\n\n  private _sync(): void {\n    const shell = this._observed;\n    if (!shell) return;\n    this._rail = shell.rail;\n    this._locked = shell.navLocked;\n  }\n\n  public render(): TemplateResult {\n    const expanded = !this._rail;\n    return html`\n      <nile-button\n        class=\"toggle\"\n        part=\"button\"\n        variant=\"ghost\"\n        circle\n        aria-expanded=${expanded ? 'true' : 'false'}\n        ?disabled=${this._locked}\n        title=${this._locked\n          ? 'The navigation stays collapsed at this window width'\n          : expanded\n          ? 'Collapse navigation'\n          : 'Expand navigation'}\n        aria-label=${expanded ? 'Collapse navigation' : 'Expand navigation'}\n        @click=${this._onClick}\n      >\n        ${renderGlyph(\n          expanded ? 'ng-panel-left-close' : 'ng-panel-left-open',\n          24,\n          'currentColor'\n        )}\n      </nile-button>\n      <span class=\"rule\" part=\"rule\"></span>\n    `;\n  }\n\n  private _onClick = (): void => {\n    this._attach();\n    this._observed?.toggleNav();\n    this._sync();\n  };\n}\n\nexport default NileAppShellNavToggle;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-app-shell-nav-toggle': NileAppShellNavToggle;\n  }\n}\n"]}

package/dist/src/nile-app-shell-panel/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+export * from './nile-app-shell-panel';

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

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+export * from './nile-app-shell-panel';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-app-shell-panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-app-shell-panel/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,cAAc,wBAAwB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nexport * from './nile-app-shell-panel';\n"]}

package/dist/src/nile-app-shell-panel/nile-app-shell-panel.css.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

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

@@ -0,0 +1,112 @@
+/**
+ * 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 { css } from 'lit';
+export const styles = css `
+  :host {
+    box-sizing: border-box;
+    /* A flex item of the shell's panel region, filling it. */
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .header {
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    height: var(--nile-app-shell-top-bar-height, 56px);
+    padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid
+      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+  }
+
+  :host([no-header]) .header {
+    display: none;
+  }
+
+  .heading {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    min-width: 0;
+  }
+
+  .mark {
+    display: inline-flex;
+    color: var(
+      --nile-colors-primary-600,
+      var(--ng-colors-fg-brand-primary-600)
+    );
+  }
+
+  .mark nile-glyph {
+    --nile-svg-fill: currentColor;
+    --nile-svg-stroke-width: var(--ng-svg-stroke-width);
+    width: 20px;
+    height: 20px;
+  }
+
+  .title {
+    margin: 0;
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(
+      --nile-font-weight-semi-bold,
+      var(--ng-font-weight-semibold)
+    );
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    margin-inline-start: auto;
+  }
+
+  :host([no-close]) .close {
+    display: none;
+  }
+
+  .body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
+  }
+
+  :host([no-padding]) .body {
+    padding: 0;
+  }
+
+  .footer {
+    flex: 0 0 auto;
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    border-top: var(--nile-border-width-1, var(--ng-border-width-1)) solid
+      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+  }
+
+  :host(:not([has-footer])) .footer {
+    display: none;
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-app-shell-panel.css.js.map

package/dist/src/nile-app-shell-panel/nile-app-shell-panel.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-app-shell-panel.css.js","sourceRoot":"","sources":["../../../src/nile-app-shell-panel/nile-app-shell-panel.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    /* A flex item of the shell's panel region, filling it. */\n    flex: 1 1 auto;\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    height: 100%;\n    overflow: hidden;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  .header {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    height: var(--nile-app-shell-top-bar-height, 56px);\n    padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  :host([no-header]) .header {\n    display: none;\n  }\n\n  .heading {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    min-width: 0;\n  }\n\n  .mark {\n    display: inline-flex;\n    color: var(\n      --nile-colors-primary-600,\n      var(--ng-colors-fg-brand-primary-600)\n    );\n  }\n\n  .mark nile-glyph {\n    --nile-svg-fill: currentColor;\n    --nile-svg-stroke-width: var(--ng-svg-stroke-width);\n    width: 20px;\n    height: 20px;\n  }\n\n  .title {\n    margin: 0;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .actions {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    margin-inline-start: auto;\n  }\n\n  :host([no-close]) .close {\n    display: none;\n  }\n\n  .body {\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow-y: auto;\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  :host([no-padding]) .body {\n    padding: 0;\n  }\n\n  .footer {\n    flex: 0 0 auto;\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    border-top: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  :host(:not([has-footer])) .footer {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-app-shell-panel/nile-app-shell-panel.d.ts

@@ -0,0 +1,73 @@
+/**
+ * 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 { CSSResultArray, TemplateResult } from 'lit';
+import '../nile-button/nile-button';
+import NileElement from '../internal/nile-element';
+import type { NileAppShellPanelMode } from '../nile-app-shell/nile-app-shell';
+/**
+ * @summary The shell's right region — the AI assistant panel. Assigns itself to
+ * the shell's `panel` slot and takes over the panel chrome: heading, actions,
+ * close button, scroll region and composer footer. The shell keeps the geometry
+ * — 480px docked, an overlay drawer when narrow — and the open/closed state.
+ *
+ * @status stable
+ * @since 2.0
+ *
+ * @tag nile-app-shell-panel
+ *
+ * @dependency nile-app-shell
+ * @dependency nile-glyph
+ *
+ * @slot - The panel body. Scrolls.
+ * @slot header - Replaces the default heading (mark plus label).
+ * @slot actions - Controls added before the close button.
+ * @slot footer - A composer, docked below the scroll region.
+ *
+ * @event nile-close - Emitted when the close button is pressed, after the shell
+ *   has been told to close. Cancelable is not honoured; listen to it to react,
+ *   and use `no-close` to own the control yourself.
+ *
+ * @csspart header - The header bar.
+ * @csspart title - The default heading text.
+ * @csspart actions - The header action group.
+ * @csspart close - The close button.
+ * @csspart body - The scrolling body.
+ * @csspart footer - The footer.
+ */
+export declare class NileAppShellPanel extends NileElement {
+    static get styles(): CSSResultArray;
+    private shellLink;
+    /** The heading, and the accessible name of the region. */
+    label: string;
+    /** Drops the header bar entirely. */
+    noHeader: boolean;
+    /** Drops the close button — for a panel the page closes its own way. */
+    noClose: boolean;
+    /** Removes the body's padding, for a full-bleed transcript. */
+    noPadding: boolean;
+    /** Id of the shell to follow. Defaults to the nearest ancestor. */
+    shell?: string;
+    /**
+     * Mirrors the shell's panel mode. Set by the shell; treat it as read-only and
+     * style against it (`nile-app-shell-panel[mode='overlay']`).
+     */
+    mode: NileAppShellPanelMode;
+    private _hasFooter;
+    connectedCallback(): void;
+    protected willUpdate(): void;
+    protected updated(): void;
+    /** Close the panel through the shell. */
+    close(): void;
+    private handleFooterSlotChange;
+    render(): TemplateResult;
+}
+export default NileAppShellPanel;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-app-shell-panel': NileAppShellPanel;
+    }
+}

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

@@ -0,0 +1,158 @@
+/**
+ * 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, state } from 'lit/decorators.js';
+import { styles } from './nile-app-shell-panel.css';
+import { renderGlyph } from '../internal/glyph';
+import { AppShellController } from '../nile-app-shell/shell-controller';
+import '../nile-button/nile-button';
+import NileElement from '../internal/nile-element';
+/**
+ * @summary The shell's right region — the AI assistant panel. Assigns itself to
+ * the shell's `panel` slot and takes over the panel chrome: heading, actions,
+ * close button, scroll region and composer footer. The shell keeps the geometry
+ * — 480px docked, an overlay drawer when narrow — and the open/closed state.
+ *
+ * @status stable
+ * @since 2.0
+ *
+ * @tag nile-app-shell-panel
+ *
+ * @dependency nile-app-shell
+ * @dependency nile-glyph
+ *
+ * @slot - The panel body. Scrolls.
+ * @slot header - Replaces the default heading (mark plus label).
+ * @slot actions - Controls added before the close button.
+ * @slot footer - A composer, docked below the scroll region.
+ *
+ * @event nile-close - Emitted when the close button is pressed, after the shell
+ *   has been told to close. Cancelable is not honoured; listen to it to react,
+ *   and use `no-close` to own the control yourself.
+ *
+ * @csspart header - The header bar.
+ * @csspart title - The default heading text.
+ * @csspart actions - The header action group.
+ * @csspart close - The close button.
+ * @csspart body - The scrolling body.
+ * @csspart footer - The footer.
+ */
+let NileAppShellPanel = class NileAppShellPanel extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.shellLink = new AppShellController(this);
+        /** The heading, and the accessible name of the region. */
+        this.label = 'Ask Aquera';
+        /** Drops the header bar entirely. */
+        this.noHeader = false;
+        /** Drops the close button — for a panel the page closes its own way. */
+        this.noClose = false;
+        /** Removes the body's padding, for a full-bleed transcript. */
+        this.noPadding = false;
+        /**
+         * Mirrors the shell's panel mode. Set by the shell; treat it as read-only and
+         * style against it (`nile-app-shell-panel[mode='overlay']`).
+         */
+        this.mode = 'docked';
+        this._hasFooter = false;
+    }
+    static get styles() {
+        return [styles];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Claim the shell's right region unless the author placed it elsewhere.
+        if (!this.hasAttribute('slot'))
+            this.setAttribute('slot', 'panel');
+        if (!this.hasAttribute('role'))
+            this.setAttribute('role', 'complementary');
+    }
+    willUpdate() {
+        this.shellLink.shellId = this.shell;
+        const shell = this.shellLink.shell;
+        if (shell)
+            this.mode = shell.panelMode;
+    }
+    updated() {
+        this.toggleAttribute('has-footer', this._hasFooter);
+        this.setAttribute('aria-label', this.label);
+    }
+    /** Close the panel through the shell. */
+    close() {
+        this.shellLink.shell?.closePanel();
+        this.emit('nile-close');
+    }
+    handleFooterSlotChange(event) {
+        this._hasFooter = event.target
+            .assignedNodes({ flatten: true })
+            .some(node => node.nodeType === Node.ELEMENT_NODE ||
+            (node.textContent ?? '').trim() !== '');
+    }
+    render() {
+        return html `
+      <header class="header" part="header">
+        <slot name="header">
+          <span class="heading">
+            <span class="mark">${renderGlyph('ng-sparkles', 20, 'currentColor')}</span>
+            <h2 class="title" part="title">${this.label}</h2>
+          </span>
+        </slot>
+        <div class="actions" part="actions">
+          <slot name="actions"></slot>
+          <nile-button
+            class="close"
+            part="close"
+            variant="ghost"
+            circle
+            title="Close ${this.label}"
+            aria-label="Close ${this.label}"
+            @click=${() => this.close()}
+          >
+            ${renderGlyph('ng-x-close', 24, 'currentColor')}
+          </nile-button>
+        </div>
+      </header>
+
+      <div class="body" part="body"><slot></slot></div>
+
+      <div class="footer" part="footer">
+        <slot
+          name="footer"
+          @slotchange=${(e) => this.handleFooterSlotChange(e)}
+        ></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], NileAppShellPanel.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'no-header' })
+], NileAppShellPanel.prototype, "noHeader", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'no-close' })
+], NileAppShellPanel.prototype, "noClose", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'no-padding' })
+], NileAppShellPanel.prototype, "noPadding", void 0);
+__decorate([
+    property({ type: String })
+], NileAppShellPanel.prototype, "shell", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileAppShellPanel.prototype, "mode", void 0);
+__decorate([
+    state()
+], NileAppShellPanel.prototype, "_hasFooter", void 0);
+NileAppShellPanel = __decorate([
+    customElement('nile-app-shell-panel')
+], NileAppShellPanel);
+export { NileAppShellPanel };
+export default NileAppShellPanel;
+//# sourceMappingURL=nile-app-shell-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-app-shell-panel.js","sourceRoot":"","sources":["../../../src/nile-app-shell-panel/nile-app-shell-panel.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styles } from './nile-app-shell-panel.css';\nimport { renderGlyph } from '../internal/glyph';\nimport { AppShellController } from '../nile-app-shell/shell-controller';\nimport '../nile-button/nile-button';\nimport NileElement from '../internal/nile-element';\nimport type { NileAppShellPanelMode } from '../nile-app-shell/nile-app-shell';\n\n/**\n * @summary The shell's right region — the AI assistant panel. Assigns itself to\n * the shell's `panel` slot and takes over the panel chrome: heading, actions,\n * close button, scroll region and composer footer. The shell keeps the geometry\n * — 480px docked, an overlay drawer when narrow — and the open/closed state.\n *\n * @status stable\n * @since 2.0\n *\n * @tag nile-app-shell-panel\n *\n * @dependency nile-app-shell\n * @dependency nile-glyph\n *\n * @slot - The panel body. Scrolls.\n * @slot header - Replaces the default heading (mark plus label).\n * @slot actions - Controls added before the close button.\n * @slot footer - A composer, docked below the scroll region.\n *\n * @event nile-close - Emitted when the close button is pressed, after the shell\n *   has been told to close. Cancelable is not honoured; listen to it to react,\n *   and use `no-close` to own the control yourself.\n *\n * @csspart header - The header bar.\n * @csspart title - The default heading text.\n * @csspart actions - The header action group.\n * @csspart close - The close button.\n * @csspart body - The scrolling body.\n * @csspart footer - The footer.\n */\n@customElement('nile-app-shell-panel')\nexport class NileAppShellPanel extends NileElement {\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  private shellLink = new AppShellController(this);\n\n  /** The heading, and the accessible name of the region. */\n  @property({ type: String })\n  label: string = 'Ask Aquera';\n\n  /** Drops the header bar entirely. */\n  @property({ type: Boolean, reflect: true, attribute: 'no-header' })\n  noHeader: boolean = false;\n\n  /** Drops the close button — for a panel the page closes its own way. */\n  @property({ type: Boolean, reflect: true, attribute: 'no-close' })\n  noClose: boolean = false;\n\n  /** Removes the body's padding, for a full-bleed transcript. */\n  @property({ type: Boolean, reflect: true, attribute: 'no-padding' })\n  noPadding: boolean = false;\n\n  /** Id of the shell to follow. Defaults to the nearest ancestor. */\n  @property({ type: String })\n  shell?: string;\n\n  /**\n   * Mirrors the shell's panel mode. Set by the shell; treat it as read-only and\n   * style against it (`nile-app-shell-panel[mode='overlay']`).\n   */\n  @property({ type: String, reflect: true })\n  mode: NileAppShellPanelMode = 'docked';\n\n  @state() private _hasFooter: boolean = false;\n\n  public connectedCallback(): void {\n    super.connectedCallback();\n    // Claim the shell's right region unless the author placed it elsewhere.\n    if (!this.hasAttribute('slot')) this.setAttribute('slot', 'panel');\n    if (!this.hasAttribute('role')) this.setAttribute('role', 'complementary');\n  }\n\n  protected willUpdate(): void {\n    this.shellLink.shellId = this.shell;\n    const shell = this.shellLink.shell;\n    if (shell) this.mode = shell.panelMode;\n  }\n\n  protected updated(): void {\n    this.toggleAttribute('has-footer', this._hasFooter);\n    this.setAttribute('aria-label', this.label);\n  }\n\n  /** Close the panel through the shell. */\n  public close(): void {\n    this.shellLink.shell?.closePanel();\n    this.emit('nile-close');\n  }\n\n  private handleFooterSlotChange(event: Event): void {\n    this._hasFooter = (event.target as HTMLSlotElement)\n      .assignedNodes({ flatten: true })\n      .some(\n        node =>\n          node.nodeType === Node.ELEMENT_NODE ||\n          (node.textContent ?? '').trim() !== ''\n      );\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <header class=\"header\" part=\"header\">\n        <slot name=\"header\">\n          <span class=\"heading\">\n            <span class=\"mark\">${renderGlyph('ng-sparkles', 20, 'currentColor')}</span>\n            <h2 class=\"title\" part=\"title\">${this.label}</h2>\n          </span>\n        </slot>\n        <div class=\"actions\" part=\"actions\">\n          <slot name=\"actions\"></slot>\n          <nile-button\n            class=\"close\"\n            part=\"close\"\n            variant=\"ghost\"\n            circle\n            title=\"Close ${this.label}\"\n            aria-label=\"Close ${this.label}\"\n            @click=${() => this.close()}\n          >\n            ${renderGlyph('ng-x-close', 24, 'currentColor')}\n          </nile-button>\n        </div>\n      </header>\n\n      <div class=\"body\" part=\"body\"><slot></slot></div>\n\n      <div class=\"footer\" part=\"footer\">\n        <slot\n          name=\"footer\"\n          @slotchange=${(e: Event) => this.handleFooterSlotChange(e)}\n        ></slot>\n      </div>\n    `;\n  }\n}\n\nexport default NileAppShellPanel;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-app-shell-panel': NileAppShellPanel;\n  }\n}\n"]}

package/dist/src/nile-app-shell-side-nav/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+export * from './nile-app-shell-side-nav';

package/dist/src/nile-app-shell-side-nav/index.js

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+export * from './nile-app-shell-side-nav';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-app-shell-side-nav/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-app-shell-side-nav/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,cAAc,2BAA2B,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nexport * from './nile-app-shell-side-nav';\n"]}

package/dist/src/nile-app-shell-side-nav/nile-app-shell-side-nav.css.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+/**
+ * AppShellSideNav CSS. The shell owns the track width; this owns what happens
+ * inside it — a pinned header, a scrolling body, a pinned footer.
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/src/nile-app-shell-side-nav/nile-app-shell-side-nav.css.js

@@ -0,0 +1,68 @@
+/**
+ * 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 { css } from 'lit';
+/**
+ * AppShellSideNav CSS. The shell owns the track width; this owns what happens
+ * inside it — a pinned header, a scrolling body, a pinned footer.
+ */
+export const styles = css `
+  :host {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    /* The nav and the page share one surface. */
+    background: var(--nile-app-shell-side-nav-bg, transparent);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .header,
+  .footer {
+    flex: 0 0 auto;
+    display: block;
+  }
+
+  .body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: var(
+      --nile-app-shell-side-nav-padding,
+      var(--nile-spacing-lg, var(--ng-spacing-lg))
+    );
+    scrollbar-width: thin;
+  }
+
+  .body::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .body::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .body::-webkit-scrollbar-thumb {
+    background-color: var(
+      --nile-colors-neutral-500,
+      var(--ng-colors-border-primary)
+    );
+    border-radius: 10px;
+  }
+
+  /* A rail has no room for a horizontal scrollbar or for wide children. */
+  :host([collapsed]) .body {
+    overflow-x: hidden;
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-app-shell-side-nav.css.js.map

package/dist/src/nile-app-shell-side-nav/nile-app-shell-side-nav.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-app-shell-side-nav.css.js","sourceRoot":"","sources":["../../../src/nile-app-shell-side-nav/nile-app-shell-side-nav.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * AppShellSideNav CSS. The shell owns the track width; this owns what happens\n * inside it — a pinned header, a scrolling body, a pinned footer.\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    /* The nav and the page share one surface. */\n    background: var(--nile-app-shell-side-nav-bg, transparent);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  .header,\n  .footer {\n    flex: 0 0 auto;\n    display: block;\n  }\n\n  .body {\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    padding: var(\n      --nile-app-shell-side-nav-padding,\n      var(--nile-spacing-lg, var(--ng-spacing-lg))\n    );\n    scrollbar-width: thin;\n  }\n\n  .body::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  .body::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  .body::-webkit-scrollbar-thumb {\n    background-color: var(\n      --nile-colors-neutral-500,\n      var(--ng-colors-border-primary)\n    );\n    border-radius: 10px;\n  }\n\n  /* A rail has no room for a horizontal scrollbar or for wide children. */\n  :host([collapsed]) .body {\n    overflow-x: hidden;\n  }\n`;\n\nexport default [styles];\n"]}