@aquera/nile-elements 2.0.4 → 2.0.6

package/src/nile-floating-panel/nile-floating-panel.css.ts

@@ -81,26 +81,24 @@ export const styles = css`
     display: none;
   }
 
+  /* Offset arrow by 0.5px so its outline aligns with the panel border and its fill fully covers it. */
   .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-svg-arrow { bottom: 0; }
-  .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-svg-arrow:after,
   .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-svg-arrow > svg {
-    top: 16px;
+    top: 15.5px;
     transform: rotate(180deg);
   }
   .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-svg-arrow { top: 0; }
-  .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-svg-arrow > svg { bottom: 16px; }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-svg-arrow > svg { bottom: 15.5px; }
   .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-svg-arrow { right: 0; }
-  .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-svg-arrow:after,
   .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-svg-arrow > svg {
     transform: rotate(90deg);
-    top: calc(50% - 3px);
+    top: calc(50% - 3.5px);
     left: 11px;
   }
   .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-svg-arrow { left: 0; }
-  .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-svg-arrow:after,
   .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-svg-arrow > svg {
     transform: rotate(-90deg);
-    top: calc(50% - 3px);
+    top: calc(50% - 3.5px);
     right: 11px;
   }
 
@@ -113,6 +111,14 @@ export const styles = css`
 
   .tippy-box[data-theme~='floating-panel'] > .tippy-svg-arrow > svg {
     position: absolute;
+    overflow: visible;
+  }
+
+  .tippy-box[data-theme~='floating-panel'] > .tippy-svg-arrow > svg > .nile-floating-panel__arrow-outline {
+    fill: none;
+    stroke: var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));
+    stroke-width: 1;
+    vector-effect: non-scaling-stroke;
   }
 
   .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-arrow {
@@ -123,6 +129,13 @@ export const styles = css`
     border-width: 8px 8px 0;
     border-top-color: initial;
   }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-arrow:after {
+    bottom: -8px;
+    left: -1px;
+    border-width: 9px 9px 0;
+    border-top-color: var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));
+    clip-path: inset(2px 0 0 0);
+  }
   .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-arrow {
     top: 0;
   }
@@ -131,6 +144,13 @@ export const styles = css`
     border-width: 0 8px 8px;
     border-bottom-color: initial;
   }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-arrow:after {
+    top: -8px;
+    left: -1px;
+    border-width: 0 9px 9px;
+    border-bottom-color: var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));
+    clip-path: inset(0 0 2px 0);
+  }
   .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-arrow {
     right: 0;
   }
@@ -139,6 +159,13 @@ export const styles = css`
     border-width: 8px 0 8px 8px;
     border-left-color: initial;
   }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-arrow:after {
+    right: -8px;
+    top: -1px;
+    border-width: 9px 0 9px 9px;
+    border-left-color: var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));
+    clip-path: inset(0 0 0 2px);
+  }
   .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-arrow {
     left: 0;
   }
@@ -147,18 +174,29 @@ export const styles = css`
     border-width: 8px 8px 8px 0;
     border-right-color: initial;
   }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-arrow:after {
+    left: -8px;
+    top: -1px;
+    border-width: 9px 9px 9px 0;
+    border-right-color: var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));
+    clip-path: inset(0 2px 0 0);
+  }
 
   .tippy-box[data-theme~='floating-panel'] > .tippy-arrow {
     width: 16px;
     height: 16px;
     color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }
-  .tippy-box[data-theme~='floating-panel'] > .tippy-arrow:before {
+  /* :after is a 1px-larger triangle in the border colour, stacked behind :before, so the border continues around the arrow. */
+  .tippy-box[data-theme~='floating-panel'] > .tippy-arrow:before,
+  .tippy-box[data-theme~='floating-panel'] > .tippy-arrow:after {
     content: '';
     position: absolute;
     border-color: transparent;
     border-style: solid;
   }
+  .tippy-box[data-theme~='floating-panel'] > .tippy-arrow:before { z-index: 1; }
+  .tippy-box[data-theme~='floating-panel'] > .tippy-arrow:after { z-index: 0; }
 `;
 
 export function injectGlobalFloatingPanelStyles(): void {

package/src/nile-floating-panel/nile-floating-panel.ts

@@ -21,6 +21,24 @@ import {
 } from '../nile-lite-tooltip/utils';
 import { VisibilityManager } from '../utilities/visibility-manager.js';
 
+const TIPPY_ROUND_ARROW =
+  /^<svg width="(\d+)" height="(\d+)"[^>]*><path d="(.+?)H0z"/.exec(roundArrow);
+
+const NILE_ROUND_ARROW = ((): string => {
+  if (!TIPPY_ROUND_ARROW) return roundArrow;
+
+  const [, rawWidth, rawHeight, curve] = TIPPY_ROUND_ARROW;
+  const width = Number(rawWidth);
+  const height = Number(rawHeight) + 1; // + the skirt that covers the border
+
+  return (
+    `<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">` +
+    `<path d="${curve}V${height}H0Z"></path>` +
+    `<path class="nile-floating-panel__arrow-outline" d="${curve}"></path>` +
+    `</svg>`
+  );
+})();
+
 /**
  * Nile floating-panel component.
  *
@@ -482,7 +500,7 @@ export class NileFloatingPanel extends NileElement {
 
   private _resolveArrow() {
     switch (this.arrow) {
-      case 'round': return roundArrow;
+      case 'round': return NILE_ROUND_ARROW;
       case 'none': return false as const;
       default: return true as const;
     }

package/src/nile-popover/nile-popover.css.ts

@@ -40,10 +40,6 @@ export const styles = css`
     background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     border: solid 1px var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));
     box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));
-    --arrow-size: 18px;
-    --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);
-    --arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size));
-    --arrow-color: var(--nile-colors-white-base, var(--ng-colors-text-white));
   }
 
   .popover__action {
@@ -52,19 +48,38 @@ export const styles = css`
   }
 
   nile-popup {
-    --arrow-size: 18px;
-    --arrow-color: var(--nile-colors-white-base, var(--ng-colors-text-white));
+    --arrow-size: 10px;
+    --arrow-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    --arrow-border-color: var(
+      --nile-colors-dark-200,
+      var(--ng-colors-border-secondary-alt)
+    );
   }
 
-  .popup__arrow {
-    position: absolute;
-    width: calc(var(--arrow-size-diagonal) * 2);
-    height: calc(var(--arrow-size-diagonal) * 2);
-    rotate: 45deg;
-    background: var(--arrow-color);
-    z-index: -1;
-    border: solid 1px var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));
-    box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));
+  nile-popup::part(arrow) {
+    z-index: 1;
+    border: none;
+    box-shadow: none;
+  }
+
+  nile-popup[data-current-placement^='bottom']::part(arrow) {
+    border-top: solid 1px var(--arrow-border-color);
+    border-left: solid 1px var(--arrow-border-color);
+  }
+
+  nile-popup[data-current-placement^='top']::part(arrow) {
+    border-bottom: solid 1px var(--arrow-border-color);
+    border-right: solid 1px var(--arrow-border-color);
+  }
+
+  nile-popup[data-current-placement^='left']::part(arrow) {
+    border-top: solid 1px var(--arrow-border-color);
+    border-right: solid 1px var(--arrow-border-color);
+  }
+
+  nile-popup[data-current-placement^='right']::part(arrow) {
+    border-bottom: solid 1px var(--arrow-border-color);
+    border-left: solid 1px var(--arrow-border-color);
   }
 `;
 

package/src/nile-popover/nile-popover.test.ts

@@ -7,7 +7,7 @@ describe('NilePopover', () => {
   it('2. shadow root', async () => { const el = await fixture<NilePopover>(html`<nile-popover></nile-popover>`); expect(el.shadowRoot).to.not.be.null; });
   it('3. tag name', async () => { const el = await fixture<NilePopover>(html`<nile-popover></nile-popover>`); expect(el.tagName.toLowerCase()).to.equal('nile-popover'); });
   it('4. placement defaults top', async () => { const el = await fixture<NilePopover>(html`<nile-popover></nile-popover>`); expect(el.placement).to.equal('top'); });
-  it('5. distance defaults 18', async () => { const el = await fixture<NilePopover>(html`<nile-popover></nile-popover>`); expect(el.distance).to.equal(18); });
+  it('5. distance defaults 12', async () => { const el = await fixture<NilePopover>(html`<nile-popover></nile-popover>`); expect(el.distance).to.equal(12); });
   it('6. preventOverlayClose defaults false', async () => { const el = await fixture<NilePopover>(html`<nile-popover></nile-popover>`); expect(el.preventOverlayClose).to.equal(false); });
   it('7. arrow defaults true', async () => { const el = await fixture<NilePopover>(html`<nile-popover></nile-popover>`); expect(el.arrow).to.equal(true); });
   it('8. title defaults empty', async () => { const el = await fixture<NilePopover>(html`<nile-popover></nile-popover>`); expect(el.title).to.equal(''); });

package/src/nile-popover/nile-popover.ts

@@ -56,7 +56,7 @@ export class NilePopover extends NileElement {
     | 'left-end' = 'top';
 
   /** The distance in pixels from which to offset the popover away from its target. */
-  @property({ type: Number }) distance = 18;
+  @property({ type: Number }) distance = 12;
 
   @property({ type: Boolean, reflect: true }) preventOverlayClose = false;
 

package/src/version.ts

@@ -1,10 +1,67 @@
-// Version utility - placeholders will be replaced during build
+// Version utility.
+//
+// NILE_ELEMENTS_VERSION is this package's own version and is still substituted
+// at build time by scripts/replace-version.cjs.
+//
+// The tokens version is read from the loaded Nile stylesheet's --nile-version
+// custom property (stamped by @aquera/nile's scripts/stamp-css-version.mjs),
+// falling back to the @aquera/nile installed alongside this package.
+//
+// Reading the stylesheet is what makes a tokens-only release visible. The
+// imported constant alone is not enough: rollup.config.js bundles
+// @aquera/nile/lib/version.js into dist/index.js, so on the CDN build it is
+// frozen at this package's build time. The stylesheet is the live source.
+import { NILE_VERSION as BUILT_IN_NILE_VERSION } from '@aquera/nile/lib/version.js';
+
 export const NILE_ELEMENTS_VERSION = '__NILE_ELEMENTS_VERSION__';
-export const NILE_VERSION = '__NILE_VERSION__';
+
+function readStylesheetNileVersion(): string | null {
+  if (typeof window === 'undefined' || typeof getComputedStyle !== 'function') {
+    return null;
+  }
+
+  try {
+    const value = getComputedStyle(document.documentElement)
+      .getPropertyValue('--nile-version')
+      .trim()
+      .replace(/^["']|["']$/g, '');
+
+    return value || null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * The version of @aquera/nile (tokens/stylesheets) whose CSS is loaded in the
+ * page, falling back to the @aquera/nile bundled into this package when no
+ * stamped stylesheet is present.
+ *
+ * This is the canonical runtime API. It resolves on every call rather than
+ * caching, so it is correct even when the Nile stylesheet is added to the page
+ * after this module evaluates - which is the common case, and why no
+ * module-evaluation-time snapshot of it is exported.
+ */
+export function getNileVersion(): string {
+  return readStylesheetNileVersion() ?? BUILT_IN_NILE_VERSION;
+}
 
 // Set global versions for runtime access
 if (typeof window !== 'undefined') {
   (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;
-  (window as any).nileVersion = NILE_VERSION;
-  window.process = window.process || { env: { NODE_ENV: 'production' } };
+
+  // A getter rather than a value, so window.nileVersion reflects whichever
+  // stylesheet is loaded at read time regardless of script/style ordering.
+  let override: string | null = null;
+  Object.defineProperty(window, 'nileVersion', {
+    configurable: true,
+    get: () => override ?? getNileVersion(),
+    set: (value: string) => {
+      override = value;
+    },
+  });
+
+  (window as any).process = (window as any).process || {
+    env: { NODE_ENV: 'production' },
+  };
 }

package/vscode-html-custom-data.json

@@ -60,6 +60,217 @@
         }
       ]
     },
+    {
+      "name": "nile-app-shell-main",
+      "description": "Slots:\n\n  * ` ` {} - The page body.\n\nAttributes:\n\n  * `no-container` {`boolean`} - Drops the size query container.\n\nProperties:\n\n  * `noContainer` {`boolean`} - Drops the size query container.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "no-container",
+          "description": "`no-container` {`boolean`} - Drops the size query container.\n\nProperty: noContainer\n\nDefault: false",
+          "valueSet": "v"
+        }
+      ]
+    },
+    {
+      "name": "nile-app-shell-nav-toggle",
+      "description": "Attributes:\n\n  * `with-rule` {`boolean`} - Draws the vertical rule the shell's own bar puts after the toggle.\n\n  * `shell` {`string | undefined`} - The shell to drive. Defaults to the nearest `nile-app-shell` ancestor, or\nthe element with this id.\n\nProperties:\n\n  * `withRule` {`boolean`} - Draws the vertical rule the shell's own bar puts after the toggle.\n\n  * `shell` {`string | undefined`} - The shell to drive. Defaults to the nearest `nile-app-shell` ancestor, or\nthe element with this id.\n\n  * `_rail` {`boolean`} - \n\n  * `_locked` {`boolean`} - \n\n  * `_observed` - \n\n  * `appShell` - The shell this toggle drives, if it found one.\n\n  * `_onShellToggle` - \n\n  * `_onClick` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "with-rule",
+          "description": "`with-rule` {`boolean`} - Draws the vertical rule the shell's own bar puts after the toggle.\n\nProperty: withRule\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "shell",
+          "description": "`shell` {`string | undefined`} - The shell to drive. Defaults to the nearest `nile-app-shell` ancestor, or\nthe element with this id.\n\nProperty: shell",
+          "values": []
+        }
+      ]
+    },
+    {
+      "name": "nile-app-shell-panel",
+      "description": "Events:\n\n  * `nile-close` {} - Emitted when the close button is pressed, after the shell\nhas been told to close. Cancelable is not honoured; listen to it to react,\nand use `no-close` to own the control yourself.\n\nSlots:\n\n  * ` ` {} - The panel body. Scrolls.\n\n  * `header` {} - Replaces the default heading (mark plus label).\n\n  * `actions` {} - Controls added before the close button.\n\n  * `footer` {} - A composer, docked below the scroll region.\n\nAttributes:\n\n  * `label` {`string`} - The heading, and the accessible name of the region.\n\n  * `no-header` {`boolean`} - Drops the header bar entirely.\n\n  * `no-close` {`boolean`} - Drops the close button — for a panel the page closes its own way.\n\n  * `no-padding` {`boolean`} - Removes the body's padding, for a full-bleed transcript.\n\n  * `shell` {`string | undefined`} - Id of the shell to follow. Defaults to the nearest ancestor.\n\n  * `mode` {`NileAppShellPanelMode`} - Mirrors the shell's panel mode. Set by the shell; treat it as read-only and\nstyle against it (`nile-app-shell-panel[mode='overlay']`).\n\nProperties:\n\n  * `shellLink` - \n\n  * `label` {`string`} - The heading, and the accessible name of the region.\n\n  * `noHeader` {`boolean`} - Drops the header bar entirely.\n\n  * `noClose` {`boolean`} - Drops the close button — for a panel the page closes its own way.\n\n  * `noPadding` {`boolean`} - Removes the body's padding, for a full-bleed transcript.\n\n  * `shell` {`string | undefined`} - Id of the shell to follow. Defaults to the nearest ancestor.\n\n  * `mode` {`NileAppShellPanelMode`} - Mirrors the shell's panel mode. Set by the shell; treat it as read-only and\nstyle against it (`nile-app-shell-panel[mode='overlay']`).\n\n  * `_hasFooter` {`boolean`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "`label` {`string`} - The heading, and the accessible name of the region.\n\nProperty: label\n\nDefault: Ask Aquera"
+        },
+        {
+          "name": "no-header",
+          "description": "`no-header` {`boolean`} - Drops the header bar entirely.\n\nProperty: noHeader\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "no-close",
+          "description": "`no-close` {`boolean`} - Drops the close button — for a panel the page closes its own way.\n\nProperty: noClose\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "no-padding",
+          "description": "`no-padding` {`boolean`} - Removes the body's padding, for a full-bleed transcript.\n\nProperty: noPadding\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "shell",
+          "description": "`shell` {`string | undefined`} - Id of the shell to follow. Defaults to the nearest ancestor.\n\nProperty: shell",
+          "values": []
+        },
+        {
+          "name": "mode",
+          "description": "`mode` {`NileAppShellPanelMode`} - Mirrors the shell's panel mode. Set by the shell; treat it as read-only and\nstyle against it (`nile-app-shell-panel[mode='overlay']`).\n\nProperty: mode\n\nDefault: docked",
+          "values": [
+            {
+              "name": "docked"
+            },
+            {
+              "name": "overlay"
+            }
+          ]
+        },
+        {
+          "name": "onnile-close",
+          "description": "`nile-close` {} - Emitted when the close button is pressed, after the shell\nhas been told to close. Cancelable is not honoured; listen to it to react,\nand use `no-close` to own the control yourself."
+        }
+      ]
+    },
+    {
+      "name": "nile-app-shell-side-nav",
+      "description": "Slots:\n\n  * ` ` {} - The nav body. Scrolls.\n\n  * `header` {} - Pinned above the scroll region — a wordmark or product switcher.\n\n  * `footer` {} - Pinned below it — an account row or help link.\n\nAttributes:\n\n  * `collapsed` {`boolean`} - Mirrors the shell's effective rail state — the user's preference, or a rail\nforced by the shell's width. Set by the shell; treat it as read-only and\nstyle against it (`nile-app-shell-side-nav[collapsed] .label`).\n\n  * `shell` {`string | undefined`} - Id of the shell to follow. Defaults to the nearest ancestor.\n\nProperties:\n\n  * `shellLink` - \n\n  * `collapsed` {`boolean`} - Mirrors the shell's effective rail state — the user's preference, or a rail\nforced by the shell's width. Set by the shell; treat it as read-only and\nstyle against it (`nile-app-shell-side-nav[collapsed] .label`).\n\n  * `shell` {`string | undefined`} - Id of the shell to follow. Defaults to the nearest ancestor.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "collapsed",
+          "description": "`collapsed` {`boolean`} - Mirrors the shell's effective rail state — the user's preference, or a rail\nforced by the shell's width. Set by the shell; treat it as read-only and\nstyle against it (`nile-app-shell-side-nav[collapsed] .label`).\n\nProperty: collapsed\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "shell",
+          "description": "`shell` {`string | undefined`} - Id of the shell to follow. Defaults to the nearest ancestor.\n\nProperty: shell",
+          "values": []
+        }
+      ]
+    },
+    {
+      "name": "nile-app-shell",
+      "description": "Events:\n\n  * `nile-nav-toggle` {} - Emitted after the nav's collapsed state or its\nforced-rail lock changes. `detail: { collapsed, locked }`.\n\n  * `nile-panel-toggle` {} - Emitted after the panel opens or closes.\n`detail: { open, mode }`.\n\n  * `nile-panel-mode-change` {} - Emitted when the panel flips between docked\nand overlay. `detail: { mode }`.\n\nSlots:\n\n  * ` ` {} - The page body, inside the content container.\n\n  * `banner` {} - A full-width strip above every other region.\n\n  * `top-bar` {} - The page-title bar. Mounted inside the container by default,\nor spanning the shell when `top-bar-placement=\"shell\"`. The nav toggle is\nrendered before whatever is slotted here.\n\n  * `top-bar-actions` {} - Controls pinned to the end of the top bar.\n\n  * `tabs` {} - A hoisted second-level tab strip, flush under the top bar and\noutside `<main>`'s scroller, so it never scrolls away. The region carries\nthe strip's height, padding and rule, so slot a `<nile-tab-group>` or the\ntab controls themselves.\n\n  * `side-nav` {} - The navigation track. Works best with `<nile-side-bar>`.\n\n  * `aside` {} - A secondary column between the content container and the panel.\n\n  * `panel` {} - The AI panel's body. When nothing is slotted here the panel is\nunmounted and `openPanel()` is a no-op.\n\n  * `panel-header` {} - Replaces the default panel heading (mark plus title).\n\n  * `panel-actions` {} - Controls added before the panel's close button.\n\n  * `panel-footer` {} - A bar docked below the panel's scroll region, for a\ncomposer.\n\nAttributes:\n\n  * `nav-collapsed` {`boolean`} - The user's nav preference. The nav can still render as a rail while this is\nfalse — see `navLocked`.\n\n  * `panel-open` {`boolean`} - Whether the AI panel is open.\n\n  * `no-panel` {`boolean`} - Unmounts the AI panel for this route even when the `panel` slot is filled.\n`openPanel()` becomes a no-op.\n\n  * `panel-label` {`string`} - The default panel heading. Ignored when `panel-header` is slotted.\n\n  * `no-nav-toggle` {`boolean`} - Hides the built-in nav toggle. Mount `nile-app-shell-nav-toggle` yourself.\n\n  * `no-panel-shortcut` {`boolean`} - Drops the Cmd/Ctrl+J and Escape panel shortcuts.\n\n  * `no-skip-link` {`boolean`} - Hides the skip-to-content link.\n\n  * `skip-link-label` {`string`} - Label for the skip-to-content link.\n\n  * `top-bar-placement` {`NileAppShellTopBarPlacement`} - Where the top bar is mounted: inside the container, or spanning the shell.\n\n  * `content-align` {`NileAppShellContentAlign`} - `centered` caps the page body at `--nile-app-shell-centered-width`.\n\n  * `content-container` {`boolean`} - Makes the slotted page root a size query container, so page CSS can size\nagainst the content container instead of the viewport. Query it unnamed —\n`@container (min-width: 720px)` — because a container name declared inside\nthe shell's shadow tree is not visible to page CSS. Opt-in, because it\nalso applies layout containment to that element.\n\n  * `flat` {`boolean`} - Drops the container's card chrome for a full-bleed page.\n\n  * `no-padding` {`boolean`} - Removes the container's inner padding.\n\n  * `ask-label` {`string`} - The label on the built-in Ask button.\n\nThe button is the shell's, not the app's: it is the one control that has\nto know whether a panel is mounted for this route and how to open it, and\nslotted content can see neither. Everything else in the bar — the\nbreadcrumb, the page actions, the tab strip — is slotted markup.\n\n  * `no-ask` {`boolean`} - Drops the built-in Ask button, for a bar that renders its own.\n\n  * `full-height` {`boolean`} - Sizes the shell to the viewport instead of its parent.\n\n  * `overlay-breakpoint` {`number`} - Below this shell width the panel overlays the content instead of pushing\nit, and the nav is forced to a rail.\n\nZero — the default — means never: the panel is furniture that squeezes the\npage, at every width. It earns its room from the nav rail first and from\nits own width next (see `--nile-app-shell-panel-min-width`), so it does\nnot have to cover the page to fit. Set a width here to opt back into an\noverlay drawer below it.\n\n  * `docked-rail-breakpoint` {`number`} - Below this shell width an open docked panel forces the nav to a rail.\nA floor, not the whole rule: the nav also rails as soon as the expanded\ntrack is what stops the row from fitting. This is the first thing the\npanel takes room from, so it can push rather than cover.\n\n  * `persist-key` {`string | undefined`} - Persists the nav preference and the docked panel state under this key.\nOverlay panel state is never persisted — a reload opens closed.\n\nProperties:\n\n  * `navCollapsed` {`boolean`} - The user's nav preference. The nav can still render as a rail while this is\nfalse — see `navLocked`.\n\n  * `panelOpen` {`boolean`} - Whether the AI panel is open.\n\n  * `noPanel` {`boolean`} - Unmounts the AI panel for this route even when the `panel` slot is filled.\n`openPanel()` becomes a no-op.\n\n  * `panelLabel` {`string`} - The default panel heading. Ignored when `panel-header` is slotted.\n\n  * `noNavToggle` {`boolean`} - Hides the built-in nav toggle. Mount `nile-app-shell-nav-toggle` yourself.\n\n  * `noPanelShortcut` {`boolean`} - Drops the Cmd/Ctrl+J and Escape panel shortcuts.\n\n  * `noSkipLink` {`boolean`} - Hides the skip-to-content link.\n\n  * `skipLinkLabel` {`string`} - Label for the skip-to-content link.\n\n  * `topBarPlacement` {`NileAppShellTopBarPlacement`} - Where the top bar is mounted: inside the container, or spanning the shell.\n\n  * `contentAlign` {`NileAppShellContentAlign`} - `centered` caps the page body at `--nile-app-shell-centered-width`.\n\n  * `contentContainer` {`boolean`} - Makes the slotted page root a size query container, so page CSS can size\nagainst the content container instead of the viewport. Query it unnamed —\n`@container (min-width: 720px)` — because a container name declared inside\nthe shell's shadow tree is not visible to page CSS. Opt-in, because it\nalso applies layout containment to that element.\n\n  * `flat` {`boolean`} - Drops the container's card chrome for a full-bleed page.\n\n  * `noPadding` {`boolean`} - Removes the container's inner padding.\n\n  * `askLabel` {`string`} - The label on the built-in Ask button.\n\nThe button is the shell's, not the app's: it is the one control that has\nto know whether a panel is mounted for this route and how to open it, and\nslotted content can see neither. Everything else in the bar — the\nbreadcrumb, the page actions, the tab strip — is slotted markup.\n\n  * `noAsk` {`boolean`} - Drops the built-in Ask button, for a bar that renders its own.\n\n  * `fullHeight` {`boolean`} - Sizes the shell to the viewport instead of its parent.\n\n  * `overlayBreakpoint` {`number`} - Below this shell width the panel overlays the content instead of pushing\nit, and the nav is forced to a rail.\n\nZero — the default — means never: the panel is furniture that squeezes the\npage, at every width. It earns its room from the nav rail first and from\nits own width next (see `--nile-app-shell-panel-min-width`), so it does\nnot have to cover the page to fit. Set a width here to opt back into an\noverlay drawer below it.\n\n  * `dockedRailBreakpoint` {`number`} - Below this shell width an open docked panel forces the nav to a rail.\nA floor, not the whole rule: the nav also rails as soon as the expanded\ntrack is what stops the row from fitting. This is the first thing the\npanel takes room from, so it can push rather than cover.\n\n  * `persistKey` {`string | undefined`} - Persists the nav preference and the docked panel state under this key.\nOverlay panel state is never persisted — a reload opens closed.\n\n  * `_panelMode` {`NileAppShellPanelMode`} - The panel's current mode. Derived from the shell's width.\n\n  * `_navLocked` {`boolean`} - Whether the nav is held at a rail by the shell's width.\n\n  * `_hasBanner` {`boolean`} - \n\n  * `_hasSideNav` {`boolean`} - \n\n  * `_hasTopBar` {`boolean`} - \n\n  * `_hasTopBarActions` {`boolean`} - \n\n  * `_hasTabs` {`boolean`} - \n\n  * `_hasPanel` {`boolean`} - \n\n  * `_hasPanelFooter` {`boolean`} - \n\n  * `_panelOwnsChrome` {`boolean`} - True when a `nile-app-shell-panel` is slotted. That component owns the\npanel's heading, actions, close button and footer, so the shell renders a\nbare region and keeps only the geometry and the open state — the same\nhand-off as `no-nav-toggle` plus `nile-app-shell-nav-toggle`.\n\n  * `_hasAside` {`boolean`} - \n\n  * `_main` {`HTMLElement | undefined`} - \n\n  * `_width` {`number`} - \n\n  * `_resizeObserver` - \n\n  * `_restoredPanelOpen` {`boolean | null`} - \n\n  * `panelMode` {`NileAppShellPanelMode`} - The panel's current mode: `docked` or `overlay`.\n\n  * `navLocked` {`boolean`} - Whether the shell is holding the nav at a rail. The toggle is disabled.\n\n  * `panelAvailable` {`boolean`} - Whether a panel is mounted for this route.\n\n  * `askVisible` {`boolean`} - Whether the built-in Ask button is rendered.\n\n  * `rail` {`boolean`} - Whether the nav renders as a rail right now, preference or lock.\n\n  * `_onSideNavToggle` - A slotted sidebar's own expand button is the same toggle.\n\n  * `_onKeyDown` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "nav-collapsed",
+          "description": "`nav-collapsed` {`boolean`} - The user's nav preference. The nav can still render as a rail while this is\nfalse — see `navLocked`.\n\nProperty: navCollapsed\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "panel-open",
+          "description": "`panel-open` {`boolean`} - Whether the AI panel is open.\n\nProperty: panelOpen\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "no-panel",
+          "description": "`no-panel` {`boolean`} - Unmounts the AI panel for this route even when the `panel` slot is filled.\n`openPanel()` becomes a no-op.\n\nProperty: noPanel\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "panel-label",
+          "description": "`panel-label` {`string`} - The default panel heading. Ignored when `panel-header` is slotted.\n\nProperty: panelLabel\n\nDefault: Ask Aquera"
+        },
+        {
+          "name": "no-nav-toggle",
+          "description": "`no-nav-toggle` {`boolean`} - Hides the built-in nav toggle. Mount `nile-app-shell-nav-toggle` yourself.\n\nProperty: noNavToggle\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "no-panel-shortcut",
+          "description": "`no-panel-shortcut` {`boolean`} - Drops the Cmd/Ctrl+J and Escape panel shortcuts.\n\nProperty: noPanelShortcut\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "no-skip-link",
+          "description": "`no-skip-link` {`boolean`} - Hides the skip-to-content link.\n\nProperty: noSkipLink\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "skip-link-label",
+          "description": "`skip-link-label` {`string`} - Label for the skip-to-content link.\n\nProperty: skipLinkLabel\n\nDefault: Skip to main content"
+        },
+        {
+          "name": "top-bar-placement",
+          "description": "`top-bar-placement` {`NileAppShellTopBarPlacement`} - Where the top bar is mounted: inside the container, or spanning the shell.\n\nProperty: topBarPlacement\n\nDefault: content",
+          "values": [
+            {
+              "name": "content"
+            },
+            {
+              "name": "shell"
+            }
+          ]
+        },
+        {
+          "name": "content-align",
+          "description": "`content-align` {`NileAppShellContentAlign`} - `centered` caps the page body at `--nile-app-shell-centered-width`.\n\nProperty: contentAlign\n\nDefault: fluid",
+          "values": [
+            {
+              "name": "fluid"
+            },
+            {
+              "name": "centered"
+            }
+          ]
+        },
+        {
+          "name": "content-container",
+          "description": "`content-container` {`boolean`} - Makes the slotted page root a size query container, so page CSS can size\nagainst the content container instead of the viewport. Query it unnamed —\n`@container (min-width: 720px)` — because a container name declared inside\nthe shell's shadow tree is not visible to page CSS. Opt-in, because it\nalso applies layout containment to that element.\n\nProperty: contentContainer\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "flat",
+          "description": "`flat` {`boolean`} - Drops the container's card chrome for a full-bleed page.\n\nProperty: flat\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "no-padding",
+          "description": "`no-padding` {`boolean`} - Removes the container's inner padding.\n\nProperty: noPadding\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "ask-label",
+          "description": "`ask-label` {`string`} - The label on the built-in Ask button.\n\nThe button is the shell's, not the app's: it is the one control that has\nto know whether a panel is mounted for this route and how to open it, and\nslotted content can see neither. Everything else in the bar — the\nbreadcrumb, the page actions, the tab strip — is slotted markup.\n\nProperty: askLabel\n\nDefault: Ask"
+        },
+        {
+          "name": "no-ask",
+          "description": "`no-ask` {`boolean`} - Drops the built-in Ask button, for a bar that renders its own.\n\nProperty: noAsk\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "full-height",
+          "description": "`full-height` {`boolean`} - Sizes the shell to the viewport instead of its parent.\n\nProperty: fullHeight\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "overlay-breakpoint",
+          "description": "`overlay-breakpoint` {`number`} - Below this shell width the panel overlays the content instead of pushing\nit, and the nav is forced to a rail.\n\nZero — the default — means never: the panel is furniture that squeezes the\npage, at every width. It earns its room from the nav rail first and from\nits own width next (see `--nile-app-shell-panel-min-width`), so it does\nnot have to cover the page to fit. Set a width here to opt back into an\noverlay drawer below it.\n\nProperty: overlayBreakpoint\n\nDefault: 0"
+        },
+        {
+          "name": "docked-rail-breakpoint",
+          "description": "`docked-rail-breakpoint` {`number`} - Below this shell width an open docked panel forces the nav to a rail.\nA floor, not the whole rule: the nav also rails as soon as the expanded\ntrack is what stops the row from fitting. This is the first thing the\npanel takes room from, so it can push rather than cover.\n\nProperty: dockedRailBreakpoint\n\nDefault: 1440"
+        },
+        {
+          "name": "persist-key",
+          "description": "`persist-key` {`string | undefined`} - Persists the nav preference and the docked panel state under this key.\nOverlay panel state is never persisted — a reload opens closed.\n\nProperty: persistKey",
+          "values": []
+        },
+        {
+          "name": "onnile-nav-toggle",
+          "description": "`nile-nav-toggle` {} - Emitted after the nav's collapsed state or its\nforced-rail lock changes. `detail: { collapsed, locked }`."
+        },
+        {
+          "name": "onnile-panel-toggle",
+          "description": "`nile-panel-toggle` {} - Emitted after the panel opens or closes.\n`detail: { open, mode }`."
+        },
+        {
+          "name": "onnile-panel-mode-change",
+          "description": "`nile-panel-mode-change` {} - Emitted when the panel flips between docked\nand overlay. `detail: { mode }`."
+        }
+      ]
+    },
     {
       "name": "nile-auto-complete",
       "description": "Attributes:\n\n  * `disabled` {`boolean`} - \n\n  * `isDropdownOpen` {`boolean`} - \n\n  * `portal` {`boolean`} - When true, the dropdown menu will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `openOnFocus` {`boolean`} - \n\n  * `value` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `noBorder` {`boolean`} - \n\n  * `noOutline` {`boolean`} - \n\n  * `noPadding` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `allMenuItems` - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `noDropdownClose` {`boolean`} - \n\n  * `label` {`string`} - \n\nProperties:\n\n  * `styles` - \n\n  * `visibilityManager` - \n\n  * `dropdownElement` - \n\n  * `inputElement` - \n\n  * `disabled` {`boolean`} - \n\n  * `isDropdownOpen` {`boolean`} - \n\n  * `portal` {`boolean`} - When true, the dropdown menu will be appended to the document body instead of the parent container.\nThis is useful when the parent has overflow: hidden, clip-path, or transform applied.\n\n  * `portalManager` - \n\n  * `enableVirtualScroll` {`boolean`} - \n\n  * `openOnFocus` {`boolean`} - \n\n  * `value` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `noBorder` {`boolean`} - \n\n  * `noOutline` {`boolean`} - \n\n  * `noPadding` {`boolean`} - \n\n  * `loading` {`boolean`} - \n\n  * `filterFunction` - \n\n  * `renderItemFunction` - \n\n  * `allMenuItems` - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `noDropdownClose` {`boolean`} - \n\n  * `label` {`string`} - \n\n  * `menuItems` - \n\n  * `handleWindowResize` - \n\n  * `handleWindowScroll` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
@@ -2537,7 +2748,7 @@
     },
     {
       "name": "nile-empty-state",
-      "description": "Nile empty-state component.\n\nAttributes:\n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - \n\n  * `variant` {`\"flat\" | \"content\" | \"tonal\"`} - \n\n  * `status` {`\"error\" | \"empty\" | \"no-results\" | \"not-found\" | \"no-access\" | \"offline\" | undefined`} - \n\n  * `layout` {`NileEmptyStateLayout`} - \n\n  * `code` {`string | undefined`} - \n\n  * `bordered` {`boolean`} - \n\n  * `svgIconUrl` {`string`} - \n\n  * `svgIconSize` {`number | undefined`} - Overrides the layout-driven glyph size for a custom `svgIconUrl`. Left unset,\nthe SVG matches whatever size the current variant/layout draws at.\n\n  * `svgIconColor` {`string`} - \n\n  * `icon` {`string`} - \n\n  * `text` {`string`} - Headline. Resolves through the `status` preset to `DEFAULT_TEXT`.\n\n  * `sub-text` {`string`} - Supporting line. Resolves through the `status` preset to `DEFAULT_SUB_TEXT`.\n\n  * `tone` {`NileEmptyStateTone`} - \n\nProperties:\n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - \n\n  * `variant` {`\"flat\" | \"content\" | \"tonal\"`} - \n\n  * `status` {`\"error\" | \"empty\" | \"no-results\" | \"not-found\" | \"no-access\" | \"offline\" | undefined`} - \n\n  * `layout` {`NileEmptyStateLayout`} - \n\n  * `code` {`string | undefined`} - \n\n  * `bordered` {`boolean`} - \n\n  * `svgIconUrl` {`string`} - \n\n  * `svgIconSize` {`number | undefined`} - Overrides the layout-driven glyph size for a custom `svgIconUrl`. Left unset,\nthe SVG matches whatever size the current variant/layout draws at.\n\n  * `svgIconColor` {`string`} - \n\n  * `_icon` {`string | undefined`} - \n\n  * `_text` {`string | undefined`} - \n\n  * `_subText` {`string | undefined`} - \n\n  * `_tone` {`\"warning\" | \"error\" | \"info\" | \"neutral\" | undefined`} - \n\n  * `icon` {`string`} - \n\n  * `text` {`string`} - Headline. Resolves through the `status` preset to `DEFAULT_TEXT`.\n\n  * `subText` {`string`} - Supporting line. Resolves through the `status` preset to `DEFAULT_SUB_TEXT`.\n\n  * `tone` {`NileEmptyStateTone`} - \n\n  * `preset` {`StatusPreset | undefined`} - The preset backing the current `status`, or undefined when none is set.\n\n  * `glyphColor` {`string | undefined`} - \n\n  * `liveRegion` {`{ role: string; live: string; } | undefined`} - ARIA wiring\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile empty-state component.\n\nAttributes:\n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - \n\n  * `variant` {`\"content\" | \"flat\" | \"tonal\"`} - \n\n  * `status` {`\"error\" | \"empty\" | \"no-results\" | \"not-found\" | \"no-access\" | \"offline\" | undefined`} - \n\n  * `layout` {`NileEmptyStateLayout`} - \n\n  * `code` {`string | undefined`} - \n\n  * `bordered` {`boolean`} - \n\n  * `svgIconUrl` {`string`} - \n\n  * `svgIconSize` {`number | undefined`} - Overrides the layout-driven glyph size for a custom `svgIconUrl`. Left unset,\nthe SVG matches whatever size the current variant/layout draws at.\n\n  * `svgIconColor` {`string`} - \n\n  * `icon` {`string`} - \n\n  * `text` {`string`} - Headline. Resolves through the `status` preset to `DEFAULT_TEXT`.\n\n  * `sub-text` {`string`} - Supporting line. Resolves through the `status` preset to `DEFAULT_SUB_TEXT`.\n\n  * `tone` {`NileEmptyStateTone`} - \n\nProperties:\n\n  * `size` {`\"sm\" | \"md\" | \"lg\"`} - \n\n  * `variant` {`\"content\" | \"flat\" | \"tonal\"`} - \n\n  * `status` {`\"error\" | \"empty\" | \"no-results\" | \"not-found\" | \"no-access\" | \"offline\" | undefined`} - \n\n  * `layout` {`NileEmptyStateLayout`} - \n\n  * `code` {`string | undefined`} - \n\n  * `bordered` {`boolean`} - \n\n  * `svgIconUrl` {`string`} - \n\n  * `svgIconSize` {`number | undefined`} - Overrides the layout-driven glyph size for a custom `svgIconUrl`. Left unset,\nthe SVG matches whatever size the current variant/layout draws at.\n\n  * `svgIconColor` {`string`} - \n\n  * `_icon` {`string | undefined`} - \n\n  * `_text` {`string | undefined`} - \n\n  * `_subText` {`string | undefined`} - \n\n  * `_tone` {`\"warning\" | \"error\" | \"info\" | \"neutral\" | undefined`} - \n\n  * `icon` {`string`} - \n\n  * `text` {`string`} - Headline. Resolves through the `status` preset to `DEFAULT_TEXT`.\n\n  * `subText` {`string`} - Supporting line. Resolves through the `status` preset to `DEFAULT_SUB_TEXT`.\n\n  * `tone` {`NileEmptyStateTone`} - \n\n  * `preset` {`StatusPreset | undefined`} - The preset backing the current `status`, or undefined when none is set.\n\n  * `glyphColor` {`string | undefined`} - \n\n  * `liveRegion` {`{ role: string; live: string; } | undefined`} - ARIA wiring\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "size",
@@ -2556,13 +2767,13 @@
         },
         {
           "name": "variant",
-          "description": "`variant` {`\"flat\" | \"content\" | \"tonal\"`} - \n\nProperty: variant\n\nDefault: tonal",
+          "description": "`variant` {`\"content\" | \"flat\" | \"tonal\"`} - \n\nProperty: variant\n\nDefault: tonal",
           "values": [
             {
-              "name": "flat"
+              "name": "content"
             },
             {
-              "name": "content"
+              "name": "flat"
             },
             {
               "name": "tonal"
@@ -5221,7 +5432,7 @@
         },
         {
           "name": "distance",
-          "description": "`distance` {`number`} - The distance in pixels from which to offset the popover away from its target.\n\nProperty: distance\n\nDefault: 18"
+          "description": "`distance` {`number`} - The distance in pixels from which to offset the popover away from its target.\n\nProperty: distance\n\nDefault: 12"
         },
         {
           "name": "preventOverlayClose",