@aquera/nile-elements 2.0.5 → 2.0.7

package/dist/nile-app-shell/nile-app-shell.cjs.js.map

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

package/dist/nile-app-shell/nile-app-shell.css.cjs.js

@@ -0,0 +1,2 @@
+System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){e=_lit.css;}],execute:function execute(){_export("s",n=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    /* Geometry. Values come from design tokens wherever one exists; the bare\n       pixels are shell geometry with no matching token. */\n    --nile-app-shell-side-nav-width: 260px;\n    --nile-app-shell-side-nav-rail-width: 64px;\n    --nile-app-shell-gutter: var(--nile-spacing-md, var(--ng-spacing-md));\n    --nile-app-shell-content-padding: var(\n      --nile-spacing-3xl,\n      var(--ng-spacing-3xl)\n    );\n    --nile-app-shell-top-bar-height: 56px;\n    --nile-app-shell-tabs-height: 48px;\n    --nile-app-shell-panel-width: 480px;\n    --nile-app-shell-panel-min-width: 360px;\n    --nile-app-shell-aside-width: 320px;\n    --nile-app-shell-aside-min-width: 240px;\n    --nile-app-shell-content-min-width: 640px;\n    --nile-app-shell-min-width: 768px;\n    --nile-app-shell-centered-width: 824px;\n    --nile-app-shell-utility-size: var(\n      --nile-spacing-4xl,\n      var(--ng-spacing-4xl)\n    );\n    --nile-app-shell-radius: var(--nile-radius-xl, var(--ng-radius-2xl));\n    --nile-app-shell-duration: var(\n      --nile-transition-duration-default,\n      var(--ng-transition-duration-default)\n    );\n    /* NxtGen ships no easing tokens, so the shell names its own. */\n    --nile-app-shell-ease: cubic-bezier(0.2, 0, 0, 1);\n\n    --_side-nav-track: var(--nile-app-shell-side-nav-width);\n\n    position: relative;\n    box-sizing: border-box;\n    display: grid;\n    grid-template-areas:\n      'banner banner'\n      'top-bar top-bar'\n      'side-nav content';\n    grid-template-columns: var(--_side-nav-track) minmax(0, 1fr);\n    grid-template-rows: auto auto minmax(0, 1fr);\n    /* Below this the window scrolls rather than the shell compressing. */\n    min-width: var(--nile-app-shell-min-width);\n    height: 100%;\n    overflow: hidden;\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    transition: grid-template-columns var(--nile-app-shell-duration)\n      var(--nile-app-shell-ease);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([full-height]) {\n    height: 100dvh;\n  }\n\n  /* Effective rail state, set by the component: the user's preference, or a\n     forced rail at narrow widths. */\n  :host([rail]) {\n    --_side-nav-track: var(--nile-app-shell-side-nav-rail-width);\n  }\n\n  :host(:not([has-side-nav])) {\n    --_side-nav-track: 0px;\n  }\n\n  /* The top bar compresses before the content does. */\n  @media (max-height: 600px) {\n    :host {\n      --nile-app-shell-top-bar-height: 48px;\n    }\n  }\n\n  /* ---------------------------------------------------------------- banner */\n\n  .banner {\n    grid-area: banner;\n    min-width: 0;\n  }\n\n  :host(:not([has-banner])) .banner {\n    display: none;\n  }\n\n  /* ------------------------------------------------------------- side nav */\n\n  .side-nav {\n    grid-area: side-nav;\n    display: flex;\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  :host(:not([has-side-nav])) .side-nav {\n    display: none;\n  }\n\n  /*\n   * The nav and the page share one surface, and the shell owns the track\n   * width, so a slotted sidebar fills the track and drops its own background\n   * and edge. Set --nile-app-shell-side-nav-bg to put a surface back.\n   */\n  ::slotted([slot='side-nav']) {\n    width: 100% !important;\n    height: 100%;\n    background: var(--nile-app-shell-side-nav-bg, transparent) !important;\n    border-right: var(--nile-app-shell-side-nav-border, 0) !important;\n  }\n\n  /* -------------------------------------------------------- content column */\n\n  .content-section {\n    grid-area: content;\n    position: relative;\n    display: flex;\n    min-width: 0;\n    gap: var(--nile-app-shell-gutter);\n    padding: var(--nile-app-shell-gutter);\n    box-sizing: border-box;\n  }\n\n  .container {\n    box-sizing: border-box;\n    /*\n     * The floor is the flex basis, not a min-width: a hard min-width cannot\n     * yield, so the row overflows and :host's overflow:hidden clips the\n     * regions after it. As a basis the container holds the floor while there\n     * is room and gives way when there is not. The shell keeps a docked panel\n     * off the row until it fits (see _dockRequirement), so the give-way path\n     * is the last resort, not the usual one.\n     */\n    flex: 1 1 var(--nile-app-shell-content-min-width);\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    overflow: hidden;\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    border-radius: var(--nile-app-shell-radius);\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-none));\n    /*\n     * The container \u2014 not the viewport \u2014 is the sizing context for page\n     * content. See the content-container note below for querying it.\n     */\n    container-type: inline-size;\n    container-name: nile-content;\n  }\n\n  /*\n   * Container queries cannot cross a shadow boundary: a rule in the page's\n   * stylesheet cannot see a container declared in here. The\n   * content-container attribute moves the context onto the slotted page root instead, so page CSS can\n   * write an @container nile-content query. It brings layout containment with\n   * it, so it is opt-in.\n   */\n  :host([content-container]) slot:not([name])::slotted(*) {\n    container-type: inline-size;\n    container-name: nile-content;\n  }\n\n  :host([flat]) .container {\n    background: transparent;\n    border-color: transparent;\n    border-radius: 0;\n  }\n\n  /* ---------------------------------------------------------------- top bar */\n\n  .top-bar {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    height: var(--nile-app-shell-top-bar-height);\n    padding-inline: var(--nile-app-shell-content-padding);\n  }\n\n  /* Inside the container the bar carries the rule that separates it from the\n     page body; spanning the shell it carries the container's edge instead. */\n  .container > .top-bar {\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  .shell-top-bar {\n    grid-area: top-bar;\n    min-width: 0;\n    padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));\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  /* No slotted bar content and no nav toggle means no bar at all. */\n  :host(:not([has-top-bar])) .top-bar {\n    display: none;\n  }\n\n  .top-bar-content {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    min-width: 0;\n    flex: 1 1 auto;\n  }\n\n  .top-bar-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    margin-inline-start: auto;\n  }\n\n  /*\n   * An empty flex item still takes the row's gap before it, which pulls the\n   * bar's content 16px short of the padding edge and leaves a sliver of bare\n   * container at the end of the header. Nothing in the group, no box.\n   */\n  :host(:not([has-top-bar-actions]):not([has-ask])) .top-bar-actions {\n    display: none;\n  }\n\n  /*\n   * The Ask button. The one control in the bar the shell renders itself: it\n   * turns on the panel being mounted and it calls openPanel(), neither of\n   * which slotted markup can reach.\n   *\n   * It is a stock <nile-button variant=\"primary\">: the shell sets no surface,\n   * radius, height or type of its own, so the button's appearance \u2014 and its\n   * focus ring, hover, disabled and loading states \u2014 stays the component's.\n   * The only rule here is the flex behaviour it needs as a top-bar item.\n   */\n  .ask {\n    flex: 0 0 auto;\n  }\n\n  .ask-mark {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .ask-mark nile-glyph {\n    --nile-svg-fill: currentColor;\n    --nile-svg-stroke-width: var(--ng-svg-stroke-width);\n    width: 16px;\n    height: 16px;\n  }\n\n  .nav-toggle-group {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  /*\n   * Lands the 24px glyph box, not nile-button's 38px circle, on the\n   * container's 24px origin: (38 - 24) / 2 = 7.\n   */\n  .nav-toggle {\n    margin-inline-start: -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  /* --------------------------------------------------------------- tab strip */\n\n  /*\n   * Hoisted out of the scroller so it never scrolls away. It sits flush under\n   * the top bar \u2014 the header carries no bottom rule of its own, so the two read\n   * as one block of chrome, with the single rule living at the strip's bottom.\n   */\n  .tabs {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    display: flex;\n    align-items: stretch;\n    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    min-width: 0;\n    min-height: var(--nile-app-shell-tabs-height);\n    padding-inline: var(--nile-app-shell-content-padding);\n    /* The strip carries the rule for the whole header block. */\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    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  .tabs::-webkit-scrollbar {\n    display: none;\n  }\n\n  :host(:not([has-tabs])) .tabs {\n    display: none;\n  }\n\n  /* ------------------------------------------------------------------- main */\n\n  .main {\n    box-sizing: border-box;\n    flex: 1 1 auto;\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: auto;\n    padding: var(--nile-app-shell-content-padding);\n  }\n\n  .main:focus {\n    outline: none;\n  }\n\n  :host([no-padding]) .main {\n    padding: 0;\n  }\n\n  .main-inner {\n    width: 100%;\n    min-height: 0;\n  }\n\n  /* Centred when short, scrolls from the top when tall. */\n  :host([content-align='centered']) .main-inner {\n    /*\n     * width:100% + max-width leaves free space for the auto inline margins to\n     * split; dropping the width would let the auto margins cancel the flex\n     * stretch and shrink-wrap the column to its widest child. The block margins\n     * centre it while it is short and compute to 0 once it is taller, so a tall\n     * page scrolls from the top rather than clipping.\n     */\n    width: 100%;\n    max-width: var(--nile-app-shell-centered-width);\n    margin: auto;\n  }\n\n  /* ------------------------------------------------------------------ aside */\n\n  .aside {\n    box-sizing: border-box;\n    /* Gives before the page does, down to its own floor, for the same reason\n       the panel does: the page is the last region to be asked for room. */\n    flex: 0 1 var(--nile-app-shell-aside-width);\n    min-width: var(--nile-app-shell-aside-min-width);\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: auto;\n    padding: var(--nile-app-shell-content-padding);\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    border-radius: var(--nile-app-shell-radius);\n  }\n\n  :host(:not([has-aside])) .aside {\n    display: none;\n  }\n\n  /* -------------------------------------------------------------- AI panel */\n\n  .panel {\n    box-sizing: border-box;\n    /*\n     * The panel pushes the page, it never covers it, so it has to be able to\n     * give a little: full width while the row can afford it, then shrinking to\n     * its min. Here the floor can be a real min-width \u2014 the container's floor\n     * is a flex basis that yields all the way, so the row still cannot\n     * overflow into :host's clip once the panel stops giving.\n     */\n    flex: 0 1 var(--nile-app-shell-panel-width);\n    width: var(--nile-app-shell-panel-width);\n    min-width: var(--nile-app-shell-panel-min-width);\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));\n    /* The panel is elevated, so its edge sits a rung above the container's. */\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    border-radius: var(--nile-app-shell-radius);\n    box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));\n  }\n\n  /* Docked: a flex sibling. It squeezes the content, it does not cover it. */\n  :host(:not([panel-open])) .panel {\n    display: none;\n  }\n\n  /* Overlay: contained to the content column, above it, and animated in. */\n  :host([panel-mode='overlay']) .panel {\n    position: absolute;\n    z-index: 1001;\n    inset-block: var(--nile-app-shell-gutter);\n    inset-inline-end: var(--nile-app-shell-gutter);\n    flex: none;\n    display: flex;\n    width: min(var(--nile-app-shell-panel-width), 92%);\n    visibility: hidden;\n    transform: translateX(calc(100% + var(--nile-app-shell-gutter)));\n    transition: transform var(--nile-app-shell-duration)\n        var(--nile-app-shell-ease),\n      visibility 0s linear var(--nile-app-shell-duration);\n  }\n\n  :host([panel-mode='overlay'][panel-open]) .panel {\n    visibility: visible;\n    transform: none;\n    transition: transform var(--nile-app-shell-duration)\n      var(--nile-app-shell-ease);\n  }\n\n  /* An unavailable panel is unmounted in either mode. */\n  :host(:not([has-panel])) .panel {\n    display: none;\n  }\n\n  .panel-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);\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  .panel-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  .panel-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  .panel-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  .panel-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  .panel-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  .panel-body {\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow: auto;\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .panel-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-panel-footer])) .panel-footer {\n    display: none;\n  }\n\n  /* ---------------------------------------------------------- skip link */\n\n  .skip-link {\n    position: absolute;\n    z-index: 1002;\n    inset-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));\n    inset-block-start: var(--nile-spacing-md, var(--ng-spacing-md));\n    display: inline-flex;\n    align-items: center;\n    padding: var(--nile-spacing-md, var(--ng-spacing-md))\n      var(--nile-spacing-lg, var(--ng-spacing-lg));\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    border-radius: var(--nile-radius-md, var(--ng-radius-md));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font: inherit;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));\n    cursor: pointer;\n    transform: translateY(-200%);\n    transition: transform\n      var(--nile-transition-duration-short, var(--ng-transition-duration-fast))\n      var(--nile-app-shell-ease);\n  }\n\n  .skip-link:focus-visible {\n    outline: none;\n    transform: none;\n    box-shadow: 0 0 0 2px\n        var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary)),\n      0 0 0 4px\n        var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));\n  }\n\n  :host([no-skip-link]) .skip-link {\n    display: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    :host,\n    .panel,\n    .skip-link {\n      transition: none;\n    }\n  }\n"]))));}};});
+//# sourceMappingURL=nile-app-shell.css.cjs.js.map

package/dist/nile-app-shell/nile-app-shell.css.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-app-shell.css.cjs.js","sources":["../../../src/nile-app-shell/nile-app-shell.css.ts"],"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 * AppShell CSS.\n *\n * One grid, two columns, one flex row. The grid owns the banner row, the\n * optional shell-wide top bar, the side-nav track and the content column. The\n * content column is a flex row holding the content container, the optional\n * aside and — when docked — the AI panel. Nothing else in an app sets these\n * boxes.\n */\nexport const styles = css`\n  :host {\n    /* Geometry. Values come from design tokens wherever one exists; the bare\n       pixels are shell geometry with no matching token. */\n    --nile-app-shell-side-nav-width: 260px;\n    --nile-app-shell-side-nav-rail-width: 64px;\n    --nile-app-shell-gutter: var(--nile-spacing-md, var(--ng-spacing-md));\n    --nile-app-shell-content-padding: var(\n      --nile-spacing-3xl,\n      var(--ng-spacing-3xl)\n    );\n    --nile-app-shell-top-bar-height: 56px;\n    --nile-app-shell-tabs-height: 48px;\n    --nile-app-shell-panel-width: 480px;\n    --nile-app-shell-panel-min-width: 360px;\n    --nile-app-shell-aside-width: 320px;\n    --nile-app-shell-aside-min-width: 240px;\n    --nile-app-shell-content-min-width: 640px;\n    --nile-app-shell-min-width: 768px;\n    --nile-app-shell-centered-width: 824px;\n    --nile-app-shell-utility-size: var(\n      --nile-spacing-4xl,\n      var(--ng-spacing-4xl)\n    );\n    --nile-app-shell-radius: var(--nile-radius-xl, var(--ng-radius-2xl));\n    --nile-app-shell-duration: var(\n      --nile-transition-duration-default,\n      var(--ng-transition-duration-default)\n    );\n    /* NxtGen ships no easing tokens, so the shell names its own. */\n    --nile-app-shell-ease: cubic-bezier(0.2, 0, 0, 1);\n\n    --_side-nav-track: var(--nile-app-shell-side-nav-width);\n\n    position: relative;\n    box-sizing: border-box;\n    display: grid;\n    grid-template-areas:\n      'banner banner'\n      'top-bar top-bar'\n      'side-nav content';\n    grid-template-columns: var(--_side-nav-track) minmax(0, 1fr);\n    grid-template-rows: auto auto minmax(0, 1fr);\n    /* Below this the window scrolls rather than the shell compressing. */\n    min-width: var(--nile-app-shell-min-width);\n    height: 100%;\n    overflow: hidden;\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    transition: grid-template-columns var(--nile-app-shell-duration)\n      var(--nile-app-shell-ease);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([full-height]) {\n    height: 100dvh;\n  }\n\n  /* Effective rail state, set by the component: the user's preference, or a\n     forced rail at narrow widths. */\n  :host([rail]) {\n    --_side-nav-track: var(--nile-app-shell-side-nav-rail-width);\n  }\n\n  :host(:not([has-side-nav])) {\n    --_side-nav-track: 0px;\n  }\n\n  /* The top bar compresses before the content does. */\n  @media (max-height: 600px) {\n    :host {\n      --nile-app-shell-top-bar-height: 48px;\n    }\n  }\n\n  /* ---------------------------------------------------------------- banner */\n\n  .banner {\n    grid-area: banner;\n    min-width: 0;\n  }\n\n  :host(:not([has-banner])) .banner {\n    display: none;\n  }\n\n  /* ------------------------------------------------------------- side nav */\n\n  .side-nav {\n    grid-area: side-nav;\n    display: flex;\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  :host(:not([has-side-nav])) .side-nav {\n    display: none;\n  }\n\n  /*\n   * The nav and the page share one surface, and the shell owns the track\n   * width, so a slotted sidebar fills the track and drops its own background\n   * and edge. Set --nile-app-shell-side-nav-bg to put a surface back.\n   */\n  ::slotted([slot='side-nav']) {\n    width: 100% !important;\n    height: 100%;\n    background: var(--nile-app-shell-side-nav-bg, transparent) !important;\n    border-right: var(--nile-app-shell-side-nav-border, 0) !important;\n  }\n\n  /* -------------------------------------------------------- content column */\n\n  .content-section {\n    grid-area: content;\n    position: relative;\n    display: flex;\n    min-width: 0;\n    gap: var(--nile-app-shell-gutter);\n    padding: var(--nile-app-shell-gutter);\n    box-sizing: border-box;\n  }\n\n  .container {\n    box-sizing: border-box;\n    /*\n     * The floor is the flex basis, not a min-width: a hard min-width cannot\n     * yield, so the row overflows and :host's overflow:hidden clips the\n     * regions after it. As a basis the container holds the floor while there\n     * is room and gives way when there is not. The shell keeps a docked panel\n     * off the row until it fits (see _dockRequirement), so the give-way path\n     * is the last resort, not the usual one.\n     */\n    flex: 1 1 var(--nile-app-shell-content-min-width);\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    overflow: hidden;\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    border-radius: var(--nile-app-shell-radius);\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-none));\n    /*\n     * The container — not the viewport — is the sizing context for page\n     * content. See the content-container note below for querying it.\n     */\n    container-type: inline-size;\n    container-name: nile-content;\n  }\n\n  /*\n   * Container queries cannot cross a shadow boundary: a rule in the page's\n   * stylesheet cannot see a container declared in here. The\n   * content-container attribute moves the context onto the slotted page root instead, so page CSS can\n   * write an @container nile-content query. It brings layout containment with\n   * it, so it is opt-in.\n   */\n  :host([content-container]) slot:not([name])::slotted(*) {\n    container-type: inline-size;\n    container-name: nile-content;\n  }\n\n  :host([flat]) .container {\n    background: transparent;\n    border-color: transparent;\n    border-radius: 0;\n  }\n\n  /* ---------------------------------------------------------------- top bar */\n\n  .top-bar {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    height: var(--nile-app-shell-top-bar-height);\n    padding-inline: var(--nile-app-shell-content-padding);\n  }\n\n  /* Inside the container the bar carries the rule that separates it from the\n     page body; spanning the shell it carries the container's edge instead. */\n  .container > .top-bar {\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  .shell-top-bar {\n    grid-area: top-bar;\n    min-width: 0;\n    padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));\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  /* No slotted bar content and no nav toggle means no bar at all. */\n  :host(:not([has-top-bar])) .top-bar {\n    display: none;\n  }\n\n  .top-bar-content {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    min-width: 0;\n    flex: 1 1 auto;\n  }\n\n  .top-bar-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    margin-inline-start: auto;\n  }\n\n  /*\n   * An empty flex item still takes the row's gap before it, which pulls the\n   * bar's content 16px short of the padding edge and leaves a sliver of bare\n   * container at the end of the header. Nothing in the group, no box.\n   */\n  :host(:not([has-top-bar-actions]):not([has-ask])) .top-bar-actions {\n    display: none;\n  }\n\n  /*\n   * The Ask button. The one control in the bar the shell renders itself: it\n   * turns on the panel being mounted and it calls openPanel(), neither of\n   * which slotted markup can reach.\n   *\n   * It is a stock <nile-button variant=\"primary\">: the shell sets no surface,\n   * radius, height or type of its own, so the button's appearance — and its\n   * focus ring, hover, disabled and loading states — stays the component's.\n   * The only rule here is the flex behaviour it needs as a top-bar item.\n   */\n  .ask {\n    flex: 0 0 auto;\n  }\n\n  .ask-mark {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .ask-mark nile-glyph {\n    --nile-svg-fill: currentColor;\n    --nile-svg-stroke-width: var(--ng-svg-stroke-width);\n    width: 16px;\n    height: 16px;\n  }\n\n  .nav-toggle-group {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  /*\n   * Lands the 24px glyph box, not nile-button's 38px circle, on the\n   * container's 24px origin: (38 - 24) / 2 = 7.\n   */\n  .nav-toggle {\n    margin-inline-start: -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  /* --------------------------------------------------------------- tab strip */\n\n  /*\n   * Hoisted out of the scroller so it never scrolls away. It sits flush under\n   * the top bar — the header carries no bottom rule of its own, so the two read\n   * as one block of chrome, with the single rule living at the strip's bottom.\n   */\n  .tabs {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    display: flex;\n    align-items: stretch;\n    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    min-width: 0;\n    min-height: var(--nile-app-shell-tabs-height);\n    padding-inline: var(--nile-app-shell-content-padding);\n    /* The strip carries the rule for the whole header block. */\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    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  .tabs::-webkit-scrollbar {\n    display: none;\n  }\n\n  :host(:not([has-tabs])) .tabs {\n    display: none;\n  }\n\n  /* ------------------------------------------------------------------- main */\n\n  .main {\n    box-sizing: border-box;\n    flex: 1 1 auto;\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: auto;\n    padding: var(--nile-app-shell-content-padding);\n  }\n\n  .main:focus {\n    outline: none;\n  }\n\n  :host([no-padding]) .main {\n    padding: 0;\n  }\n\n  .main-inner {\n    width: 100%;\n    min-height: 0;\n  }\n\n  /* Centred when short, scrolls from the top when tall. */\n  :host([content-align='centered']) .main-inner {\n    /*\n     * width:100% + max-width leaves free space for the auto inline margins to\n     * split; dropping the width would let the auto margins cancel the flex\n     * stretch and shrink-wrap the column to its widest child. The block margins\n     * centre it while it is short and compute to 0 once it is taller, so a tall\n     * page scrolls from the top rather than clipping.\n     */\n    width: 100%;\n    max-width: var(--nile-app-shell-centered-width);\n    margin: auto;\n  }\n\n  /* ------------------------------------------------------------------ aside */\n\n  .aside {\n    box-sizing: border-box;\n    /* Gives before the page does, down to its own floor, for the same reason\n       the panel does: the page is the last region to be asked for room. */\n    flex: 0 1 var(--nile-app-shell-aside-width);\n    min-width: var(--nile-app-shell-aside-min-width);\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: auto;\n    padding: var(--nile-app-shell-content-padding);\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    border-radius: var(--nile-app-shell-radius);\n  }\n\n  :host(:not([has-aside])) .aside {\n    display: none;\n  }\n\n  /* -------------------------------------------------------------- AI panel */\n\n  .panel {\n    box-sizing: border-box;\n    /*\n     * The panel pushes the page, it never covers it, so it has to be able to\n     * give a little: full width while the row can afford it, then shrinking to\n     * its min. Here the floor can be a real min-width — the container's floor\n     * is a flex basis that yields all the way, so the row still cannot\n     * overflow into :host's clip once the panel stops giving.\n     */\n    flex: 0 1 var(--nile-app-shell-panel-width);\n    width: var(--nile-app-shell-panel-width);\n    min-width: var(--nile-app-shell-panel-min-width);\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));\n    /* The panel is elevated, so its edge sits a rung above the container's. */\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    border-radius: var(--nile-app-shell-radius);\n    box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));\n  }\n\n  /* Docked: a flex sibling. It squeezes the content, it does not cover it. */\n  :host(:not([panel-open])) .panel {\n    display: none;\n  }\n\n  /* Overlay: contained to the content column, above it, and animated in. */\n  :host([panel-mode='overlay']) .panel {\n    position: absolute;\n    z-index: 1001;\n    inset-block: var(--nile-app-shell-gutter);\n    inset-inline-end: var(--nile-app-shell-gutter);\n    flex: none;\n    display: flex;\n    width: min(var(--nile-app-shell-panel-width), 92%);\n    visibility: hidden;\n    transform: translateX(calc(100% + var(--nile-app-shell-gutter)));\n    transition: transform var(--nile-app-shell-duration)\n        var(--nile-app-shell-ease),\n      visibility 0s linear var(--nile-app-shell-duration);\n  }\n\n  :host([panel-mode='overlay'][panel-open]) .panel {\n    visibility: visible;\n    transform: none;\n    transition: transform var(--nile-app-shell-duration)\n      var(--nile-app-shell-ease);\n  }\n\n  /* An unavailable panel is unmounted in either mode. */\n  :host(:not([has-panel])) .panel {\n    display: none;\n  }\n\n  .panel-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);\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  .panel-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  .panel-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  .panel-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  .panel-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  .panel-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  .panel-body {\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow: auto;\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .panel-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-panel-footer])) .panel-footer {\n    display: none;\n  }\n\n  /* ---------------------------------------------------------- skip link */\n\n  .skip-link {\n    position: absolute;\n    z-index: 1002;\n    inset-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));\n    inset-block-start: var(--nile-spacing-md, var(--ng-spacing-md));\n    display: inline-flex;\n    align-items: center;\n    padding: var(--nile-spacing-md, var(--ng-spacing-md))\n      var(--nile-spacing-lg, var(--ng-spacing-lg));\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    border-radius: var(--nile-radius-md, var(--ng-radius-md));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font: inherit;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));\n    cursor: pointer;\n    transform: translateY(-200%);\n    transition: transform\n      var(--nile-transition-duration-short, var(--ng-transition-duration-fast))\n      var(--nile-app-shell-ease);\n  }\n\n  .skip-link:focus-visible {\n    outline: none;\n    transform: none;\n    box-shadow: 0 0 0 2px\n        var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary)),\n      0 0 0 4px\n        var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));\n  }\n\n  :host([no-skip-link]) .skip-link {\n    display: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    :host,\n    .panel,\n    .skip-link {\n      transition: none;\n    }\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAkBaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}