@aquera/nile-elements 2.0.10 → 2.0.12

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

@@ -1 +1 @@
-{"version":3,"file":"nile-app-shell-main.js","sourceRoot":"","sources":["../../../src/nile-app-shell-main/nile-app-shell-main.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;;;;;;;;;;;;;GAiBG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,WAAW;IAA1C;;QAKL,sCAAsC;QAEtC,gBAAW,GAAY,KAAK,CAAC;IAK/B,CAAC;IAXQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAMM,MAAM;QACX,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AALC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;qDACzC;AAPlB,gBAAgB;IAD5B,aAAa,CAAC,qBAAqB,CAAC;GACxB,gBAAgB,CAY5B;;AAED,eAAe,gBAAgB,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 { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-app-shell-main.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * @summary The shell's centre region — the page body. Goes in the shell's\n * default slot and declares the size query container that page CSS sizes\n * against, which the shell itself cannot do across its shadow boundary.\n *\n * @status stable\n * @since 2.0\n *\n * @tag nile-app-shell-main\n *\n * @dependency nile-app-shell\n *\n * @slot - The page body.\n *\n * @attr no-container - Drops the query container. Size containment makes this a\n *   containing block for absolutely and fixed-positioned descendants; set this\n *   when page content needs to escape to the viewport instead.\n */\n@customElement('nile-app-shell-main')\nexport class NileAppShellMain extends NileElement {\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /** Drops the size query container. */\n  @property({ type: Boolean, reflect: true, attribute: 'no-container' })\n  noContainer: boolean = false;\n\n  public render(): TemplateResult {\n    return html`<slot></slot>`;\n  }\n}\n\nexport default NileAppShellMain;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-app-shell-main': NileAppShellMain;\n  }\n}\n"]}
+{"version":3,"file":"nile-app-shell-main.js","sourceRoot":"","sources":["../../../src/nile-app-shell-main/nile-app-shell-main.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;;;;;;;;;GAaG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,WAAW;IAA1C;;QAKL,sCAAsC;QAEtC,gBAAW,GAAY,KAAK,CAAC;IAK/B,CAAC;IAXQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAMM,MAAM;QACX,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AALC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;qDACzC;AAPlB,gBAAgB;IAD5B,aAAa,CAAC,qBAAqB,CAAC;GACxB,gBAAgB,CAY5B;;AAED,eAAe,gBAAgB,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 { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-app-shell-main.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * @summary The shell's centre region — the page body; declares the size query container that page CSS sizes against.\n *\n * @status stable\n * @since 2.0\n *\n * @tag nile-app-shell-main\n *\n * @dependency nile-app-shell\n *\n * @slot - The page body.\n *\n * @attr no-container - Drops the query container, so page content can escape to the viewport.\n */\n@customElement('nile-app-shell-main')\nexport class NileAppShellMain extends NileElement {\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /** Drops the size query container. */\n  @property({ type: Boolean, reflect: true, attribute: 'no-container' })\n  noContainer: boolean = false;\n\n  public render(): TemplateResult {\n    return html`<slot></slot>`;\n  }\n}\n\nexport default NileAppShellMain;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-app-shell-main': NileAppShellMain;\n  }\n}\n"]}

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

@@ -4,10 +4,7 @@
  * This source code is licensed under the BSD-3-Clause license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/**
- * AppShellNavToggle CSS. The button itself is the shared utility recipe; this
- * file only handles the host box and the rule.
- */
+/** AppShellNavToggle CSS: the host box, the rule, and the utility-control recipe, since this element also mounts outside a shell. */
 export declare const styles: import("lit").CSSResult;
 declare const _default: import("lit").CSSResult[];
 export default _default;

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

@@ -5,10 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { css } from 'lit';
-/**
- * AppShellNavToggle CSS. The button itself is the shared utility recipe; this
- * file only handles the host box and the rule.
- */
+import { utilityControlStyles } from '../internal/app-shell-utility-control-styles';
+/** AppShellNavToggle CSS: the host box, the rule, and the utility-control recipe, since this element also mounts outside a shell. */
 export const styles = css `
   :host {
     display: inline-flex;
@@ -20,10 +18,14 @@ export const styles = css `
     display: none;
   }
 
+  /* Lands the 20px glyph box, not the 32px utility circle, on the 24px origin: (32 - 20) / 2 = 6. */
   .toggle {
-    margin-inline-start: var(--nile-app-shell-nav-toggle-offset, -7px);
+    margin-inline-start: var(--nile-app-shell-nav-toggle-offset, -6px);
   }
 
+  /* The toggle itself: the shared utility-control recipe. */
+  ${utilityControlStyles}
+
   .rule {
     flex: 0 0 auto;
     width: var(--nile-border-width-1, var(--ng-border-width-1));

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

@@ -1 +1 @@
-{"version":3,"file":"nile-app-shell-nav-toggle.css.js","sourceRoot":"","sources":["../../../src/nile-app-shell-nav-toggle/nile-app-shell-nav-toggle.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BxB,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 * AppShellNavToggle CSS. The button itself is the shared utility recipe; this\n * file only handles the host box and the rule.\n */\nexport const styles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  .toggle {\n    margin-inline-start: var(--nile-app-shell-nav-toggle-offset, -7px);\n  }\n\n  .rule {\n    flex: 0 0 auto;\n    width: var(--nile-border-width-1, var(--ng-border-width-1));\n    height: 24px;\n    background: var(\n      --nile-colors-neutral-400,\n      var(--ng-colors-border-secondary)\n    );\n  }\n\n  :host(:not([with-rule])) .rule {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-app-shell-nav-toggle.css.js","sourceRoot":"","sources":["../../../src/nile-app-shell-nav-toggle/nile-app-shell-nav-toggle.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,8CAA8C,CAAC;AAEpF,qIAAqI;AACrI,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;IAiBrB,oBAAoB;;;;;;;;;;;;;;;CAevB,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';\nimport { utilityControlStyles } from '../internal/app-shell-utility-control-styles';\n\n/** AppShellNavToggle CSS: the host box, the rule, and the utility-control recipe, since this element also mounts outside a shell. */\nexport const styles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* Lands the 20px glyph box, not the 32px utility circle, on the 24px origin: (32 - 20) / 2 = 6. */\n  .toggle {\n    margin-inline-start: var(--nile-app-shell-nav-toggle-offset, -6px);\n  }\n\n  /* The toggle itself: the shared utility-control recipe. */\n  ${utilityControlStyles}\n\n  .rule {\n    flex: 0 0 auto;\n    width: var(--nile-border-width-1, var(--ng-border-width-1));\n    height: 24px;\n    background: var(\n      --nile-colors-neutral-400,\n      var(--ng-colors-border-secondary)\n    );\n  }\n\n  :host(:not([with-rule])) .rule {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -9,9 +9,7 @@ import '../nile-button/nile-button';
 import NileElement from '../internal/nile-element';
 import type { NileAppShell } from '../nile-app-shell/nile-app-shell';
 /**
- * @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.
+ * @summary The side-nav toggle as a standalone control, for a header you build yourself.
  *
  * @status stable
  * @since 2.0
@@ -24,16 +22,14 @@ import type { NileAppShell } from '../nile-app-shell/nile-app-shell';
  * @csspart button - The toggle button.
  * @csspart rule - The trailing vertical rule.
  *
- * @cssproperty [--nile-app-shell-nav-toggle-offset=-4px] - Optical start offset.
+ * @cssproperty [--nile-app-shell-nav-toggle-offset=-6px] - Optical start offset, so the glyph lands on the bar's text origin.
+ * @cssproperty [--nile-app-shell-utility-size=32px] - Box the toggle sits in; the hit area and hover surface, not a visible chip.
  */
 export declare class NileAppShellNavToggle extends NileElement {
     static get styles(): CSSResultArray;
     /** Draws the vertical rule the shell's own bar puts after the toggle. */
     withRule: boolean;
-    /**
-     * The shell to drive. Defaults to the nearest `nile-app-shell` ancestor, or
-     * the element with this id.
-     */
+    /** The shell to drive. Defaults to the nearest `nile-app-shell` ancestor, or the element with this id. */
     shell?: string;
     private _rail;
     private _locked;

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

@@ -12,9 +12,7 @@ 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.
+ * @summary The side-nav toggle as a standalone control, for a header you build yourself.
  *
  * @status stable
  * @since 2.0
@@ -27,7 +25,8 @@ import NileElement from '../internal/nile-element';
  * @csspart button - The toggle button.
  * @csspart rule - The trailing vertical rule.
  *
- * @cssproperty [--nile-app-shell-nav-toggle-offset=-4px] - Optical start offset.
+ * @cssproperty [--nile-app-shell-nav-toggle-offset=-6px] - Optical start offset, so the glyph lands on the bar's text origin.
+ * @cssproperty [--nile-app-shell-utility-size=32px] - Box the toggle sits in; the hit area and hover surface, not a visible chip.
  */
 let NileAppShellNavToggle = class NileAppShellNavToggle extends NileElement {
     constructor() {
@@ -86,7 +85,7 @@ let NileAppShellNavToggle = class NileAppShellNavToggle extends NileElement {
         const expanded = !this._rail;
         return html `
       <nile-button
-        class="toggle"
+        class="toggle utility-control"
         part="button"
         variant="ghost"
         circle
@@ -100,7 +99,7 @@ let NileAppShellNavToggle = class NileAppShellNavToggle extends NileElement {
         aria-label=${expanded ? 'Collapse navigation' : 'Expand navigation'}
         @click=${this._onClick}
       >
-        ${renderGlyph(expanded ? 'ng-panel-left-close' : 'ng-panel-left-open', 24, 'currentColor')}
+        ${renderGlyph(expanded ? 'ng-panel-left' : 'ng-panel-right', 20, 'currentColor')}
       </nile-button>
       <span class="rule" part="rule"></span>
     `;

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

@@ -1 +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"]}
+{"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, for a header you build yourself.\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=-6px] - Optical start offset, so the glyph lands on the bar's text origin.\n * @cssproperty [--nile-app-shell-utility-size=32px] - Box the toggle sits in; the hit area and hover surface, not a visible chip.\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  /** The shell to drive. Defaults to the nearest `nile-app-shell` ancestor, or the element with this id. */\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 utility-control\"\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' : 'ng-panel-right',\n          20,\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/nile-app-shell-panel.css.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { css } from 'lit';
+import { utilityControlStyles } from '../internal/app-shell-utility-control-styles';
 export const styles = css `
   :host {
     box-sizing: border-box;
@@ -21,14 +22,15 @@ export const styles = css `
     display: none;
   }
 
+  /* The panel header keeps its own height, never the page header's; the literal is the floor for a panel mounted outside a shell. */
   .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));
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    height: var(--nile-app-shell-panel-header-height, 56px);
+    padding-inline: var(--nile-spacing-3xl, var(--ng-spacing-3xl));
     border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid
       var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
   }
@@ -37,6 +39,21 @@ export const styles = css `
     display: none;
   }
 
+  /* The back control for a sub-view; stands where the brand mark does in the root view. */
+  .back {
+    flex: 0 0 auto;
+    margin-inline-start: -6px;
+  }
+
+  /* Mirrors the back control's offset on the end edge: the 20px glyph, not the 32px circle, lands on the padding line. */
+  .close {
+    margin-inline-end: -6px;
+  }
+
+  :host([back]) .mark {
+    display: none;
+  }
+
   .heading {
     display: flex;
     align-items: center;
@@ -61,7 +78,9 @@ export const styles = css `
 
   .title {
     margin: 0;
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    /* Figma's Assistant Title: Text lg/Semibold, 18/28 on NxtGen. Enterprise keeps --nile-type-scale-3, and it defines no --ng-* tokens, so the line-height declaration is invalid there and the title inherits its line height exactly as before. */
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-lg));
+    line-height: var(--ng-line-height-text-lg);
     font-weight: var(
       --nile-font-weight-semi-bold,
       var(--ng-font-weight-semibold)
@@ -83,6 +102,11 @@ export const styles = css `
     display: none;
   }
 
+  /* ------------------------------------------------------- utility controls */
+
+  /* The header's own icon controls (back and close): the shared utility-control recipe. */
+  ${utilityControlStyles}
+
   .body {
     flex: 1 1 auto;
     min-height: 0;
@@ -90,7 +114,8 @@ export const styles = css `
     display: flex;
     flex-direction: column;
     gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
-    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    /* 16 under the header, 24 on the sides and bottom. */
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl));
   }
 
   :host([no-padding]) .body {
@@ -99,7 +124,7 @@ export const styles = css `
 
   .footer {
     flex: 0 0 auto;
-    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl));
     border-top: var(--nile-border-width-1, var(--ng-border-width-1)) solid
       var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
   }

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

@@ -1 +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"]}
+{"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;AAC1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,8CAA8C,CAAC;AAEpF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmGrB,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BvB,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';\nimport { utilityControlStyles } from '../internal/app-shell-utility-control-styles';\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  /* The panel header keeps its own height, never the page header's; the literal is the floor for a panel mounted outside a shell. */\n  .header {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    height: var(--nile-app-shell-panel-header-height, 56px);\n    padding-inline: var(--nile-spacing-3xl, var(--ng-spacing-3xl));\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  /* The back control for a sub-view; stands where the brand mark does in the root view. */\n  .back {\n    flex: 0 0 auto;\n    margin-inline-start: -6px;\n  }\n\n  /* Mirrors the back control's offset on the end edge: the 20px glyph, not the 32px circle, lands on the padding line. */\n  .close {\n    margin-inline-end: -6px;\n  }\n\n  :host([back]) .mark {\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    /* Figma's Assistant Title: Text lg/Semibold, 18/28 on NxtGen. Enterprise keeps --nile-type-scale-3, and it defines no --ng-* tokens, so the line-height declaration is invalid there and the title inherits its line height exactly as before. */\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-lg));\n    line-height: var(--ng-line-height-text-lg);\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  /* ------------------------------------------------------- utility controls */\n\n  /* The header's own icon controls (back and close): the shared utility-control recipe. */\n  ${utilityControlStyles}\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    /* 16 under the header, 24 on the sides and bottom. */\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl));\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)) var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl));\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

@@ -9,10 +9,7 @@ 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.
+ * @summary The shell's right region — the AI assistant panel; takes over the panel chrome while the shell keeps the geometry and open state.
  *
  * @status stable
  * @since 2.0
@@ -23,20 +20,25 @@ import type { NileAppShellPanelMode } from '../nile-app-shell/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 header - Replaces the default heading (mark plus label); the back control renders before it.
+ * @slot actions - Controls added before the close button; size and clear their `base` part from page CSS to match the header's bare glyphs.
  * @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.
+ * @event nile-close - Emitted when the close button is pressed, after the shell has been told to close.
+ * @event nile-back - Emitted when the back control is pressed; the page swaps its own content back.
+ * @event nile-panel-back - Emitted right after `nile-back` for the same press, matching the shell's built-in panel chrome, so a page listening on the shell keeps working when it slots this component. Listen for one of the two, not both, or one press is handled twice.
  *
  * @csspart header - The header bar.
+ * @csspart back - The back control, shown by `back`.
  * @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.
+ *
+ * @cssproperty [--nile-app-shell-utility-size=32px] - Box the header's back and close controls sit in.
+ *
+ * @method goBack() - Emit `nile-back` then `nile-panel-back`, as the back control does.
  */
 export declare class NileAppShellPanel extends NileElement {
     static get styles(): CSSResultArray;
@@ -45,21 +47,24 @@ export declare class NileAppShellPanel extends NileElement {
     label: string;
     /** Drops the header bar entirely. */
     noHeader: boolean;
+    /** Shows a back control at the start of the header for a sub-view; the panel keeps no view stack and only emits `nile-back`. */
+    back: boolean;
+    /** Accessible name of the back control. */
+    backLabel: string;
     /** 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']`).
-     */
+    /** 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;
+    /** Announce that the back control was pressed, as the page owns which view it goes back to: `nile-back`, then `nile-panel-back` for pages written against the shell's built-in panel chrome. */
+    goBack(): void;
     /** Close the panel through the shell. */
     close(): void;
     private handleFooterSlotChange;

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

@@ -13,10 +13,7 @@ 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.
+ * @summary The shell's right region — the AI assistant panel; takes over the panel chrome while the shell keeps the geometry and open state.
  *
  * @status stable
  * @since 2.0
@@ -27,20 +24,25 @@ import NileElement from '../internal/nile-element';
  * @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 header - Replaces the default heading (mark plus label); the back control renders before it.
+ * @slot actions - Controls added before the close button; size and clear their `base` part from page CSS to match the header's bare glyphs.
  * @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.
+ * @event nile-close - Emitted when the close button is pressed, after the shell has been told to close.
+ * @event nile-back - Emitted when the back control is pressed; the page swaps its own content back.
+ * @event nile-panel-back - Emitted right after `nile-back` for the same press, matching the shell's built-in panel chrome, so a page listening on the shell keeps working when it slots this component. Listen for one of the two, not both, or one press is handled twice.
  *
  * @csspart header - The header bar.
+ * @csspart back - The back control, shown by `back`.
  * @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.
+ *
+ * @cssproperty [--nile-app-shell-utility-size=32px] - Box the header's back and close controls sit in.
+ *
+ * @method goBack() - Emit `nile-back` then `nile-panel-back`, as the back control does.
  */
 let NileAppShellPanel = class NileAppShellPanel extends NileElement {
     constructor() {
@@ -50,14 +52,15 @@ let NileAppShellPanel = class NileAppShellPanel extends NileElement {
         this.label = 'Ask Aquera';
         /** Drops the header bar entirely. */
         this.noHeader = false;
+        /** Shows a back control at the start of the header for a sub-view; the panel keeps no view stack and only emits `nile-back`. */
+        this.back = false;
+        /** Accessible name of the back control. */
+        this.backLabel = 'Back';
         /** 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']`).
-         */
+        /** 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;
     }
@@ -82,6 +85,11 @@ let NileAppShellPanel = class NileAppShellPanel extends NileElement {
         this.toggleAttribute('has-footer', this._hasFooter);
         this.setAttribute('aria-label', this.label);
     }
+    /** Announce that the back control was pressed, as the page owns which view it goes back to: `nile-back`, then `nile-panel-back` for pages written against the shell's built-in panel chrome. */
+    goBack() {
+        this.emit('nile-back');
+        this.emit('nile-panel-back');
+    }
     /** Close the panel through the shell. */
     close() {
         this.shellLink.shell?.closePanel();
@@ -96,16 +104,31 @@ let NileAppShellPanel = class NileAppShellPanel extends NileElement {
     render() {
         return html `
       <header class="header" part="header">
+        ${this.back
+            ? html `<nile-button
+              class="back utility-control"
+              part="back"
+              variant="ghost"
+              circle
+              title=${this.backLabel}
+              aria-label=${this.backLabel}
+              @click=${() => this.goBack()}
+            >
+              ${renderGlyph('ng-arrow-left', 20, 'currentColor')}
+            </nile-button>`
+            : ''}
         <slot name="header">
           <span class="heading">
-            <span class="mark">${renderGlyph('ng-sparkles', 20, 'currentColor')}</span>
+            <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"
+            class="close utility-control"
             part="close"
             variant="ghost"
             circle
@@ -113,7 +136,7 @@ let NileAppShellPanel = class NileAppShellPanel extends NileElement {
             aria-label="Close ${this.label}"
             @click=${() => this.close()}
           >
-            ${renderGlyph('ng-x-close', 24, 'currentColor')}
+            ${renderGlyph('ng-x-close', 20, 'currentColor')}
           </nile-button>
         </div>
       </header>
@@ -135,6 +158,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'no-header' })
 ], NileAppShellPanel.prototype, "noHeader", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileAppShellPanel.prototype, "back", void 0);
+__decorate([
+    property({ type: String })
+], NileAppShellPanel.prototype, "backLabel", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'no-close' })
 ], NileAppShellPanel.prototype, "noClose", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"nile-app-shell-panel.js","sourceRoot":"","sources":["../../../src/nile-app-shell-panel/nile-app-shell-panel.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,4BAA4B,CAAC;AACpC,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IAA3C;;QAKG,cAAS,GAAG,IAAI,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAEjD,0DAA0D;QAE1D,UAAK,GAAW,YAAY,CAAC;QAE7B,qCAAqC;QAErC,aAAQ,GAAY,KAAK,CAAC;QAE1B,wEAAwE;QAExE,YAAO,GAAY,KAAK,CAAC;QAEzB,+DAA+D;QAE/D,cAAS,GAAY,KAAK,CAAC;QAM3B;;;WAGG;QAEH,SAAI,GAA0B,QAAQ,CAAC;QAEtB,eAAU,GAAY,KAAK,CAAC;IAuE/C,CAAC;IAxGQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAiCM,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,wEAAwE;QACxE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;YAAE,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACnE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;YAAE,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IAC7E,CAAC;IAES,UAAU;QAClB,IAAI,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC;QACpC,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;QACnC,IAAI,KAAK;YAAE,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC;IACzC,CAAC;IAES,OAAO;QACf,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACpD,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,CAAC;IAED,yCAAyC;IAClC,KAAK;QACV,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,UAAU,EAAE,CAAC;QACnC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC1B,CAAC;IAEO,sBAAsB,CAAC,KAAY;QACzC,IAAI,CAAC,UAAU,GAAI,KAAK,CAAC,MAA0B;aAChD,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;aAChC,IAAI,CACH,IAAI,CAAC,EAAE,CACL,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;YACnC,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,CACzC,CAAC;IACN,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;;iCAIkB,WAAW,CAAC,aAAa,EAAE,EAAE,EAAE,cAAc,CAAC;6CAClC,IAAI,CAAC,KAAK;;;;;;;;;;2BAU5B,IAAI,CAAC,KAAK;gCACL,IAAI,CAAC,KAAK;qBACrB,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE;;cAEzB,WAAW,CAAC,YAAY,EAAE,EAAE,EAAE,cAAc,CAAC;;;;;;;;;;wBAUnC,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC;;;KAG/D,CAAC;IACJ,CAAC;CACF,CAAA;AAhGC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACE;AAI7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;mDACzC;AAI1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;kDACzC;AAIzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;oDACzC;AAI3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACZ;AAOf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACH;AAEtB;IAAhB,KAAK,EAAE;qDAAqC;AAlClC,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAyG7B;;AAED,eAAe,iBAAiB,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 { 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"]}
+{"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; takes over the panel chrome while the shell keeps the geometry and open 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); the back control renders before it.\n * @slot actions - Controls added before the close button; size and clear their `base` part from page CSS to match the header's bare glyphs.\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 has been told to close.\n * @event nile-back - Emitted when the back control is pressed; the page swaps its own content back.\n * @event nile-panel-back - Emitted right after `nile-back` for the same press, matching the shell's built-in panel chrome, so a page listening on the shell keeps working when it slots this component. Listen for one of the two, not both, or one press is handled twice.\n *\n * @csspart header - The header bar.\n * @csspart back - The back control, shown by `back`.\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 * @cssproperty [--nile-app-shell-utility-size=32px] - Box the header's back and close controls sit in.\n *\n * @method goBack() - Emit `nile-back` then `nile-panel-back`, as the back control does.\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  /** Shows a back control at the start of the header for a sub-view; the panel keeps no view stack and only emits `nile-back`. */\n  @property({ type: Boolean, reflect: true })\n  back: boolean = false;\n\n  /** Accessible name of the back control. */\n  @property({ type: String })\n  backLabel: string = 'Back';\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  /** 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']`). */\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  /** Announce that the back control was pressed, as the page owns which view it goes back to: `nile-back`, then `nile-panel-back` for pages written against the shell's built-in panel chrome. */\n  public goBack(): void {\n    this.emit('nile-back');\n    this.emit('nile-panel-back');\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        ${this.back\n          ? html`<nile-button\n              class=\"back utility-control\"\n              part=\"back\"\n              variant=\"ghost\"\n              circle\n              title=${this.backLabel}\n              aria-label=${this.backLabel}\n              @click=${() => this.goBack()}\n            >\n              ${renderGlyph('ng-arrow-left', 20, 'currentColor')}\n            </nile-button>`\n          : ''}\n        <slot name=\"header\">\n          <span class=\"heading\">\n            <span class=\"mark\"\n              >${renderGlyph('ng-sparkles', 20, 'currentColor')}</span\n            >\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 utility-control\"\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', 20, '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/nile-app-shell-side-nav.css.d.ts

@@ -4,10 +4,7 @@
  * 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.
- */
+/** 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

@@ -5,10 +5,7 @@
  * 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.
- */
+/** 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;

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

@@ -1 +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"]}
+{"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,kJAAkJ;AAClJ,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/** AppShellSideNav CSS: the shell owns the track width, this owns what happens inside it — a pinned header, a scrolling body, a pinned footer. */\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"]}

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

@@ -7,9 +7,7 @@
 import { CSSResultArray, TemplateResult } from 'lit';
 import NileElement from '../internal/nile-element';
 /**
- * @summary The shell's left region — the navigation track. Assigns itself to the
- * shell's `side-nav` slot and mirrors the shell's rail state, so nav content can
- * style against it.
+ * @summary The shell's left region — the navigation track; mirrors the shell's rail state so nav content can style against it.
  *
  * @status stable
  * @since 2.0
@@ -26,19 +24,13 @@ import NileElement from '../internal/nile-element';
  * @csspart body - The scrolling nav body.
  * @csspart footer - The pinned footer.
  *
- * @cssproperty [--nile-app-shell-side-nav-padding=12px] - Body inset. 12 + 40 +
- *   12 is what makes a 64px rail.
- * @cssproperty [--nile-app-shell-side-nav-bg=transparent] - Surface behind the
- *   nav. Transparent by default: the nav and the page share one.
+ * @cssproperty [--nile-app-shell-side-nav-padding=12px] - Body inset.
+ * @cssproperty [--nile-app-shell-side-nav-bg=transparent] - Surface behind the nav; transparent so the nav and page share one.
  */
 export declare class NileAppShellSideNav extends NileElement {
     static get styles(): CSSResultArray;
     private shellLink;
-    /**
-     * Mirrors the shell's effective rail state — the user's preference, or a rail
-     * forced by the shell's width. Set by the shell; treat it as read-only and
-     * style against it (`nile-app-shell-side-nav[collapsed] .label`).
-     */
+    /** Mirrors the shell's effective rail state. Set by the shell; treat it as read-only and style against it (`nile-app-shell-side-nav[collapsed] .label`). */
     collapsed: boolean;
     /** Id of the shell to follow. Defaults to the nearest ancestor. */
     shell?: string;