@aquera/nile-elements 2.0.5 → 2.0.6

package/dist/src/nile-app-shell/nile-app-shell-regions.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-app-shell-regions.test.js","sourceRoot":"","sources":["../../../src/nile-app-shell/nile-app-shell-regions.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';\nimport './nile-app-shell';\nimport '../nile-app-shell-side-nav/nile-app-shell-side-nav';\nimport '../nile-app-shell-main/nile-app-shell-main';\nimport '../nile-app-shell-panel/nile-app-shell-panel';\nimport type { NileAppShell } from './nile-app-shell';\nimport type { NileAppShellSideNav } from '../nile-app-shell-side-nav/nile-app-shell-side-nav';\nimport type { NileAppShellMain } from '../nile-app-shell-main/nile-app-shell-main';\nimport type { NileAppShellPanel } from '../nile-app-shell-panel/nile-app-shell-panel';\n\n/** The compositional form: one child element per region, no slot names. */\nconst composed = async (width = 1440, overlayBreakpoint = 0) => {\n  const el = await fixture<NileAppShell>(html`\n    <nile-app-shell\n      style=\"width: ${width}px; height: 600px;\"\n      overlay-breakpoint=${overlayBreakpoint}\n    >\n      <nile-app-shell-side-nav>\n        <span slot=\"header\">Aquera</span>\n        <nav>nav</nav>\n        <span slot=\"footer\">account</span>\n      </nile-app-shell-side-nav>\n\n      <span slot=\"top-bar\">Title</span>\n\n      <nile-app-shell-main>\n        <div class=\"page\">page</div>\n      </nile-app-shell-main>\n\n      <nile-app-shell-panel label=\"Ask Aquera\">\n        <div>answer</div>\n        <div slot=\"footer\">composer</div>\n      </nile-app-shell-panel>\n    </nile-app-shell>\n  `);\n  await waitUntil(() => el.hasAttribute('has-panel'));\n  return el;\n};\n\nconst region = <T extends Element>(el: NileAppShell, tag: string) =>\n  el.querySelector<T>(tag)!;\n\ndescribe('Region components — slot assignment', () => {\n  it('1. each region claims the shell slot it belongs to', async () => {\n    const el = await composed();\n    expect(region(el, 'nile-app-shell-side-nav').getAttribute('slot')).to.equal(\n      'side-nav'\n    );\n    expect(region(el, 'nile-app-shell-panel').getAttribute('slot')).to.equal(\n      'panel'\n    );\n    // Main belongs to the default slot, so it must claim no slot at all.\n    expect(region(el, 'nile-app-shell-main').hasAttribute('slot')).to.be.false;\n  });\n\n  it('2. the shell sees all three regions as filled', async () => {\n    const el = await composed();\n    expect(el.hasAttribute('has-side-nav')).to.be.true;\n    expect(el.hasAttribute('has-panel')).to.be.true;\n    expect(el.panelAvailable).to.be.true;\n  });\n\n  it('3. an explicit slot placement is respected, not overwritten', async () => {\n    const el = await fixture<NileAppShell>(html`\n      <nile-app-shell style=\"width: 1440px; height: 600px;\">\n        <nile-app-shell-panel slot=\"aside\">detail</nile-app-shell-panel>\n        <nile-app-shell-main>page</nile-app-shell-main>\n      </nile-app-shell>\n    `);\n    await el.updateComplete;\n    expect(\n      el.querySelector('nile-app-shell-panel')!.getAttribute('slot')\n    ).to.equal('aside');\n    await waitUntil(() => el.hasAttribute('has-aside'));\n    expect(el.hasAttribute('has-panel')).to.be.false;\n  });\n});\n\ndescribe('nile-app-shell-side-nav', () => {\n  it('4. mirrors the shell rail state onto its own collapsed attribute', async () => {\n    const el = await composed();\n    const nav = region<NileAppShellSideNav>(el, 'nile-app-shell-side-nav');\n    expect(nav.collapsed).to.be.false;\n\n    el.collapseNav();\n    await el.updateComplete;\n    await nav.updateComplete;\n    expect(nav.hasAttribute('collapsed')).to.be.true;\n\n    el.expandNav();\n    await el.updateComplete;\n    await nav.updateComplete;\n    expect(nav.hasAttribute('collapsed')).to.be.false;\n  });\n\n  it('5. follows a rail the shell forces at narrow widths', async () => {\n    const el = await composed(1000);\n    const nav = region<NileAppShellSideNav>(el, 'nile-app-shell-side-nav');\n    el.openPanel();\n    await waitUntil(() => el.navLocked);\n    await nav.updateComplete;\n    expect(nav.hasAttribute('collapsed')).to.be.true;\n    expect(el.navCollapsed).to.be.false; // the lock, not a preference\n  });\n\n  it('6. renders header, body and footer regions', async () => {\n    const el = await composed();\n    const nav = region<NileAppShellSideNav>(el, 'nile-app-shell-side-nav');\n    ['header', 'body', 'footer'].forEach(part => {\n      expect(nav.shadowRoot!.querySelector(`[part~=\"${part}\"]`)).to.exist;\n    });\n  });\n});\n\ndescribe('nile-app-shell-main', () => {\n  it('7. is the size query container page CSS sizes against', async () => {\n    const el = await composed();\n    const main = region<NileAppShellMain>(el, 'nile-app-shell-main');\n    expect(getComputedStyle(main).containerType).to.equal('inline-size');\n  });\n\n  it('8. no-container drops the containment', async () => {\n    const el = await composed();\n    const main = region<NileAppShellMain>(el, 'nile-app-shell-main');\n    main.noContainer = true;\n    await main.updateComplete;\n    expect(getComputedStyle(main).containerType).to.equal('normal');\n  });\n});\n\ndescribe('nile-app-shell-panel', () => {\n  it('9. takes over the panel chrome from the shell', async () => {\n    const el = await composed();\n    expect(el.getAttribute('panel-chrome')).to.equal('external');\n    // The shell's own header must not also render.\n    expect(el.shadowRoot!.querySelector('[part~=\"panel-header\"]')).to.not.exist;\n\n    const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');\n    expect(panel.shadowRoot!.querySelector('[part~=\"header\"]')).to.exist;\n    expect(\n      panel.shadowRoot!.querySelector('[part~=\"title\"]')!.textContent!.trim()\n    ).to.equal('Ask Aquera');\n  });\n\n  it('10. the shell keeps its own chrome for plain slotted content', async () => {\n    const el = await fixture<NileAppShell>(html`\n      <nile-app-shell style=\"width: 1440px; height: 600px;\">\n        <div slot=\"panel\">answer</div>\n      </nile-app-shell>\n    `);\n    await waitUntil(() => el.hasAttribute('has-panel'));\n    expect(el.getAttribute('panel-chrome')).to.equal('internal');\n    expect(el.shadowRoot!.querySelector('[part~=\"panel-header\"]')).to.exist;\n  });\n\n  it('11. mirrors the shell panel mode', async () => {\n    const el = await composed(1000, 1280);\n    const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');\n    await waitUntil(() => el.panelMode === 'overlay');\n    await panel.updateComplete;\n    expect(panel.getAttribute('mode')).to.equal('overlay');\n  });\n\n  it('12. its close button closes the panel through the shell', async () => {\n    const el = await composed();\n    el.openPanel();\n    await el.updateComplete;\n\n    const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');\n    const close =\n      panel.shadowRoot!.querySelector<HTMLButtonElement>('[part~=\"close\"]')!;\n    const closed = oneEvent(panel, 'nile-close');\n    close.click();\n    const event = await closed;\n    expect(event).to.exist;\n    await el.updateComplete;\n    expect(el.panelOpen).to.be.false;\n  });\n\n  it('13. no-close and no-header drop those controls', async () => {\n    const el = await composed();\n    const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');\n    panel.noClose = true;\n    panel.noHeader = true;\n    await panel.updateComplete;\n    const close = panel.shadowRoot!.querySelector('[part~=\"close\"]')!;\n    const header = panel.shadowRoot!.querySelector('[part~=\"header\"]')!;\n    expect(getComputedStyle(close).display).to.equal('none');\n    expect(getComputedStyle(header).display).to.equal('none');\n  });\n\n  it('14. shows the footer only when something is slotted into it', async () => {\n    const el = await composed();\n    const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');\n    expect(panel.hasAttribute('has-footer')).to.be.true;\n\n    panel.querySelector('[slot=\"footer\"]')!.remove();\n    await waitUntil(() => !panel.hasAttribute('has-footer'));\n    expect(\n      getComputedStyle(panel.shadowRoot!.querySelector('[part~=\"footer\"]')!)\n        .display\n    ).to.equal('none');\n  });\n\n  it('15. names the region for assistive tech from its label', async () => {\n    const el = await composed();\n    const panel = region<NileAppShellPanel>(el, 'nile-app-shell-panel');\n    expect(panel.getAttribute('role')).to.equal('complementary');\n    expect(panel.getAttribute('aria-label')).to.equal('Ask Aquera');\n\n    panel.label = 'Ask Nile';\n    await panel.updateComplete;\n    expect(panel.getAttribute('aria-label')).to.equal('Ask Nile');\n  });\n});\n"]}

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

@@ -0,0 +1,18 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * AppShell CSS.
+ *
+ * One grid, two columns, one flex row. The grid owns the banner row, the
+ * optional shell-wide top bar, the side-nav track and the content column. The
+ * content column is a flex row holding the content container, the optional
+ * aside and — when docked — the AI panel. Nothing else in an app sets these
+ * boxes.
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-app-shell.css.js","sourceRoot":"","sources":["../../../src/nile-app-shell/nile-app-shell.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyiBxB,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 * 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"]}