@aquera/nile-elements 2.0.11 → 2.0.12

package/README.md

@@ -91,6 +91,9 @@ To run a local development server that serves the basic demo located in `demo/in
 
 In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
 
+#### Version 2.0.12 (September 30, 2026)
+- App Shell: Header matches the Nile NG design; added `headerBack`, `headerBackLabel` and back `nile-click` `{ value: 'back' }`, replacing `leading`, `backLabel` and `nile-header-back` (UIF-1371)
+
 #### Version 2.0.11 (September 29, 2026)
 - App Shell: Added header variants: a title with an optional `description` and `badge`, a `leading` back breadcrumb or app icon, and optional tabs, at 68px, 76px (description), 101px (tabs) and 109px (both) (UIF-1369)
 

package/demo/app-shell.html

@@ -159,7 +159,7 @@
       /* ----------------------------------------------- header variant gallery
        *
        * The AC-7 comparison surface: the header's three Figma axes crossed out
-       * in full, twelve cards that differ ONLY by those axes, grouped under
+       * in full, sixteen cards (the arrow and the app icon are independent) that differ ONLY by those axes, grouped under
        * the height each pair of axes is meant to produce. Everything here is
        * prefixed vg- so it cannot collide with the reference demo above.
        */
@@ -342,7 +342,7 @@
     <!--
       Two views, switched by ?view= and the pill bottom-right:
         (default)       the reference shell, one realistic page
-        ?view=variants  the AC-7 comparison surface, all 12 header variants
+        ?view=variants  the AC-7 comparison surface, all 16 header variants
     -->
     <div id="vgShellView" style="height: 100%">
       <nile-app-shell id="shell" full-height persist-key="demo-shell">
@@ -488,7 +488,7 @@
 
     <!--
       The header variant gallery. The cards are generated from the axis matrix
-      rather than written out twelve times, so the only thing that can differ
+      rather than written out sixteen times, so the only thing that can differ
       between them is the axes themselves — which is the whole point of a
       parity comparison.
     -->
@@ -618,10 +618,12 @@
         { tabs: true, description: true, height: 109 },
       ];
 
+      /* headerBack and the app-icon slot are independent (Amendment A), so each section shows all four combinations. */
       const LEADINGS = [
-        { value: 'none', label: 'Leading=None' },
-        { value: 'back', label: 'Leading=Back' },
-        { value: 'app-icon', label: 'Leading=AppIcon' },
+        { value: 'none', back: false, icon: false, label: 'Title only' },
+        { value: 'back', back: true, icon: false, label: 'headerBack' },
+        { value: 'app-icon', back: false, icon: true, label: 'app-icon slot' },
+        { value: 'back+app-icon', back: true, icon: true, label: 'headerBack + app-icon' },
       ];
 
       const DESCRIPTION = 'Manage the applications connected to this tenant';
@@ -638,7 +640,9 @@
       const card = (n, section, leading) => {
         const axes = `tabs=${section.tabs ? 'on' : 'off'} · description=${
           section.description ? 'on' : 'off'
-        } · leading=${leading.value}`;
+        } · headerBack=${leading.back ? 'on' : 'off'} · app-icon=${
+          leading.icon ? 'slotted' : 'empty'
+        }`;
 
         return `
           <div class="vg-card">
@@ -662,9 +666,8 @@
               <nile-app-shell
                 pageTitle="Connected applications"
                 badge="94 apps"
-                leading="${leading.value}"
+                ${leading.back ? 'headerBack' : ''}
                 ${section.description ? `description="${DESCRIPTION}"` : ''}
-                ${leading.value === 'back' ? 'backLabel="Integrations"' : ''}
                 no-panel-shortcut
               >
                 <nav slot="side-nav" class="vg-nav">
@@ -672,7 +675,7 @@
                   <span>Requests</span>
                 </nav>
                 ${
-                  leading.value === 'app-icon'
+                  leading.icon
                     ? `<nile-glyph
                          slot="app-icon"
                          name="ng-layers-2"
@@ -775,22 +778,19 @@
           }
 
           /*
-           * The leading element belongs to the title's row, so it sits 2px
-           * below the title's top edge — (24px line box - 20px control) / 2 —
-           * whether or not there is a description under it. The app icon is
-           * 20px, its own size rather than the 32px utility control box.
+           * The back arrow and the app icon both belong to the title's row, so
+           * each sits 2px below the title's top edge — (24px line box - 20px) / 2 —
+           * whether or not there is a description under it. With both, the
+           * chip measures the icon; the arrow shares its row.
            */
           if (entry.leadChip) {
             const title = root
               .querySelector('[part~="page-title"]')
               .getBoundingClientRect();
-            const icon = root.querySelector('[part~="app-icon"]');
-            /*
-             * For leading=back the 20px element is the ARROW, not the control:
-             * the control is the title's own 24px line box, so its label sits
-             * level with the page title (+0) while the arrow centres in it
-             * (+2). Measuring the control box would report +0 and look wrong.
-             */
+            /* The app-icon box is always in the shadow tree (hidden when empty), so only count it when the slot is filled. */
+            const icon = entry.shell.hasAttribute('has-app-icon')
+              ? root.querySelector('[part~="app-icon"]')
+              : null;
             const measured = icon
               ? icon
               : root.querySelector('[part~="back"]').querySelector('nile-glyph');

package/dist/index.js

@@ -19639,7 +19639,7 @@ nile-rich-text-editor[disabled] .editor figure.rte-image {
           ${this._renderTrigger()}
           ${e}
         </nile-popover>
-      `:e}};e([de({type:String,attribute:!0,reflect:!0})],NS.prototype,"type",void 0),e([de({type:String,attribute:!0,reflect:!0})],NS.prototype,"value",void 0),e([de({type:String,reflect:!0})],NS.prototype,"swatchTooltip",void 0),e([de({type:Number,reflect:!0})],NS.prototype,"recentColorsCount",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"noFill",void 0),e([de({type:String,reflect:!0})],NS.prototype,"mode",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showCanvas",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showHue",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showInputs",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showActions",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],NS.prototype,"open",void 0),e([de({attribute:"palette",converter:{fromAttribute:e=>{try{const t=JSON.parse(e);return Array.isArray(t)?t.map((e=>"string"==typeof e?{color:e,name:e}:e&&"string"==typeof e.color?{color:e.color,name:e.name||e.color}:null)).filter(Boolean):[]}catch{return[]}},toAttribute:e=>JSON.stringify(e)}})],NS.prototype,"palette",void 0),e([he()],NS.prototype,"_view",void 0),e([he()],NS.prototype,"_recentColors",void 0),e([he()],NS.prototype,"_hue",void 0),e([he()],NS.prototype,"_sat",void 0),e([he()],NS.prototype,"_val",void 0),e([he()],NS.prototype,"_colorMode",void 0),e([he()],NS.prototype,"_hexInput",void 0),e([he()],NS.prototype,"_r",void 0),e([he()],NS.prototype,"_g",void 0),e([he()],NS.prototype,"_b",void 0),NS=e([ce("nile-color-picker")],NS);function pS(){return function(){if("undefined"==typeof window||"function"!=typeof getComputedStyle)return null;try{return getComputedStyle(document.documentElement).getPropertyValue("--nile-version").trim().replace(/^["']|["']$/g,"")||null}catch{return null}}()??"1.3.4"}if("undefined"!=typeof window){window.nileElementsVersion='"2.0.11"';let e=null;Object.defineProperty(window,"nileVersion",{configurable:!0,get:()=>e??pS(),set:t=>{e=t}}),window.process=window.process||{env:{NODE_ENV:"production"}}}const DS=s`
+      `:e}};e([de({type:String,attribute:!0,reflect:!0})],NS.prototype,"type",void 0),e([de({type:String,attribute:!0,reflect:!0})],NS.prototype,"value",void 0),e([de({type:String,reflect:!0})],NS.prototype,"swatchTooltip",void 0),e([de({type:Number,reflect:!0})],NS.prototype,"recentColorsCount",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"noFill",void 0),e([de({type:String,reflect:!0})],NS.prototype,"mode",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showCanvas",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showHue",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showInputs",void 0),e([de({type:Boolean,reflect:!0})],NS.prototype,"showActions",void 0),e([de({type:Boolean,reflect:!0,attribute:!0})],NS.prototype,"open",void 0),e([de({attribute:"palette",converter:{fromAttribute:e=>{try{const t=JSON.parse(e);return Array.isArray(t)?t.map((e=>"string"==typeof e?{color:e,name:e}:e&&"string"==typeof e.color?{color:e.color,name:e.name||e.color}:null)).filter(Boolean):[]}catch{return[]}},toAttribute:e=>JSON.stringify(e)}})],NS.prototype,"palette",void 0),e([he()],NS.prototype,"_view",void 0),e([he()],NS.prototype,"_recentColors",void 0),e([he()],NS.prototype,"_hue",void 0),e([he()],NS.prototype,"_sat",void 0),e([he()],NS.prototype,"_val",void 0),e([he()],NS.prototype,"_colorMode",void 0),e([he()],NS.prototype,"_hexInput",void 0),e([he()],NS.prototype,"_r",void 0),e([he()],NS.prototype,"_g",void 0),e([he()],NS.prototype,"_b",void 0),NS=e([ce("nile-color-picker")],NS);function pS(){return function(){if("undefined"==typeof window||"function"!=typeof getComputedStyle)return null;try{return getComputedStyle(document.documentElement).getPropertyValue("--nile-version").trim().replace(/^["']|["']$/g,"")||null}catch{return null}}()??"1.3.4"}if("undefined"!=typeof window){window.nileElementsVersion='"2.0.12"';let e=null;Object.defineProperty(window,"nileVersion",{configurable:!0,get:()=>e??pS(),set:t=>{e=t}}),window.process=window.process||{env:{NODE_ENV:"production"}}}const DS=s`
   .utility-control::part(base) {
     width: var(--nile-app-shell-utility-size, 32px);
     height: var(--nile-app-shell-utility-size, 32px);
@@ -19872,21 +19872,21 @@ nile-rich-text-editor[disabled] .editor figure.rte-image {
     flex: 1 1 auto;
   }
 
-  /* The title block: the header's own heading, the Leading axis and the badge; renders before the top-bar slot. */
+  /* The title block: the back arrow, then the stack (app icon, heading and badge, with the description under them); renders before the top-bar slot. */
   .title-area {
     display: flex;
-    /* Top-aligned, not centred: the leading element belongs to the title's row, not the title-plus-description stack. */
+    /* Top-aligned, not centred: the back arrow belongs to the title's row, not the title-plus-description stack. */
     align-items: flex-start;
-    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    /* Figma's Title Area gap: 16px from the arrow to the stack. */
+    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
     min-width: 0;
   }
 
-  /* The leading line box: exactly the page title's line height, centring whatever leading control sits in it. */
-  .leading {
+  /* The back arrow's line box: exactly the page title's line height, centring the arrow on the title row. */
+  .back-line {
     flex: 0 0 auto;
     display: inline-flex;
     align-items: center;
-    gap: var(--nile-spacing-md, var(--ng-spacing-md));
     min-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));
   }
 
@@ -19925,7 +19925,7 @@ nile-rich-text-editor[disabled] .editor figure.rte-image {
     font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
     line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
-    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -19959,36 +19959,24 @@ nile-rich-text-editor[disabled] .editor figure.rte-image {
     white-space: nowrap;
   }
 
-  /* Leading=Back: drawn as a breadcrumb label; the shell owns no history, so pressing it only emits nile-header-back. */
+  /* headerBack: an icon-only native button, so the aria-label names it directly; the shell owns no history, so pressing it only emits nile-click { value: 'back' }. */
   .back {
     flex: 0 0 auto;
     display: inline-flex;
     align-items: center;
-    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
     margin: 0;
     padding: 0;
     border: 0;
     background: none;
     cursor: pointer;
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
-    line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));
-    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
-    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+    color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));
   }
 
   .back:hover {
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
 
-  .crumb-divider {
-    flex: 0 0 auto;
-    display: inline-flex;
-    align-items: center;
-    color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));
-  }
-
-  /* Leading=AppIcon: a 20px block before the title; the page slots the mark, the shell owns the box, surface and radius. */
+  /* App icon: a 20px block at the start of the title row, so the description lines up under it; shown whenever the app-icon slot has content. */
   .app-icon {
     position: relative;
     flex: 0 0 auto;
@@ -20031,16 +20019,15 @@ nile-rich-text-editor[disabled] .editor figure.rte-image {
     padding: 1.4px;
   }
 
-  :host(:not([leading='app-icon'])) .app-icon,
-  :host(:not([leading='back'])) .back,
-  :host(:not([leading='back'])) .crumb-divider {
+  :host(:not([has-app-icon])) .app-icon {
     display: none;
   }
 
+  /* Figma's Header Bar gap: 16px between every header action, the divider and Ask. */
   .top-bar-actions {
     display: flex;
     align-items: center;
-    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
     margin-inline-start: auto;
   }
 
@@ -20049,7 +20036,7 @@ nile-rich-text-editor[disabled] .editor figure.rte-image {
     display: none;
   }
 
-  /* The Ask button: a stock <nile-button variant="primary"> the shell renders itself; the only rule here is its flex behaviour as a top-bar item. */
+  /* The Ask button: a stock <nile-button variant="secondary"> the shell renders itself; the only rule here is its flex behaviour as a top-bar item. */
   .ask {
     flex: 0 0 auto;
   }
@@ -20066,10 +20053,11 @@ nile-rich-text-editor[disabled] .editor figure.rte-image {
     height: 16px;
   }
 
+  /* 10px after the 32px circle is 16px after the 20px glyph (6px overhang + 10), Figma's toggle-to-divider gap. */
   .nav-toggle-group {
     display: flex;
     align-items: center;
-    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    gap: var(--nile-spacing-md-alt, var(--ng-spacing-md-alt));
   }
 
   /* Lands the 20px glyph box, not the 32px utility circle, on the 24px origin: (32 - 20) / 2 = 6. */
@@ -20077,10 +20065,12 @@ nile-rich-text-editor[disabled] .editor figure.rte-image {
     margin-inline-start: -6px;
   }
 
+  /* Figma's Divider Line: a 16px 1px stroke that takes no layout width, so the items on both sides sit a clean 16px from it. Used after the nav toggle and, as ask-rule, before Ask. */
   .rule {
     flex: 0 0 auto;
     width: var(--nile-border-width-1, var(--ng-border-width-1));
-    height: 24px;
+    margin-inline-end: calc(-1 * var(--nile-border-width-1, var(--ng-border-width-1)));
+    height: 16px;
     background: var(
       --nile-colors-neutral-400,
       var(--ng-colors-border-secondary)
@@ -20133,6 +20123,17 @@ nile-rich-text-editor[disabled] .editor figure.rte-image {
   /* Scoped to the group, not the slot, so bare tab controls are not stretched to an equal share of the strip. */
   ::slotted(nile-nav-tab-group[slot='tabs']) {
     --track-width: 0px;
+    /*
+     * The active indicator (Figma: fg-brand-primary-alt) is NOT set here: the top placement hard-codes
+     * var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700)) inside nile-nav-tab-group's shadow tree, and
+     * remapping either token from here would also recolour nile-nav-tab's focus ring and focus label. Known limitation (spec A-7).
+     */
+    /*
+     * The inactive label: nile-nav-tab paints it var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700)), so the strip
+     * points the NxtGen fallback at text-quaternary-500. Enterprise defines --nile-colors-dark-500 and is untouched. Inside an
+     * underline group nothing else reads text-secondary-700 (only the group's other variants and side placements do).
+     */
+    --ng-colors-text-secondary-700: var(--ng-colors-text-quaternary-500);
     flex: 1 1 auto;
     min-width: 0;
     align-self: flex-end;
@@ -20299,7 +20300,9 @@ nile-rich-text-editor[disabled] .editor figure.rte-image {
 
   .panel-title {
     margin: 0;
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    /* Figma's Assistant Title: Text lg/Semibold, 18/28 on NxtGen. Enterprise keeps --nile-type-scale-3, and it defines no --ng-* tokens, so the line-height declaration is invalid there and the title inherits its line height exactly as before. */
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-lg));
+    line-height: var(--ng-line-height-text-lg);
     font-weight: var(
       --nile-font-weight-semi-bold,
       var(--ng-font-weight-semibold)
@@ -20390,7 +20393,7 @@ nile-rich-text-editor[disabled] .editor figure.rte-image {
     size=${t}
     method=${e.startsWith("ng-")?"stroke":"fill"}
     color=${Pe(i)}
-  ></nile-glyph>`}let jS=class extends Fe{constructor(){super(...arguments),this.navCollapsed=!1,this.panelOpen=!1,this.noPanel=!1,this.panelLabel="Ask Aquera",this.headingLevel=1,this.leading="none",this.backLabel="Back",this.noNavToggle=!1,this.noPanelShortcut=!1,this.noSkipLink=!1,this.skipLinkLabel="Skip to main content",this.topBarPlacement="content",this.contentAlign="fluid",this.contentContainer=!1,this.flat=!1,this.noPadding=!1,this.askLabel="Ask",this.noAsk=!1,this.panelBack=!1,this.panelBackLabel="Back",this.noTabs=!1,this.fullHeight=!1,this.overlayBreakpoint=0,this.dockedRailBreakpoint=1440,this._panelMode="docked",this._navLocked=!1,this._hasBanner=!1,this._hasSideNav=!1,this._hasTopBar=!1,this._hasTopBarActions=!1,this._hasTabs=!1,this._hasPanel=!1,this._hasPanelFooter=!1,this._panelOwnsChrome=!1,this._hasAside=!1,this._width=0,this._restoredPanelOpen=null,this._onSideNavToggle=e=>{const t=e.detail;t&&"boolean"==typeof t.collapsed&&this._setNavCollapsed(t.collapsed)},this._onKeyDown=e=>{if(this.noPanelShortcut||!this.panelAvailable)return;const t=e.key??"";if((e.metaKey||e.ctrlKey)&&"j"===t.toLowerCase())return e.preventDefault(),void this.togglePanel();"Escape"===t&&this.panelOpen&&"overlay"===this._panelMode&&this.closePanel()}}static get styles(){return[yS]}get panelMode(){return this._panelMode}get navLocked(){return this._navLocked}get panelAvailable(){return this._hasPanel&&!this.noPanel}get tabsVisible(){return this._hasTabs&&!this.noTabs}get askVisible(){return this.panelAvailable&&!this.noAsk}get rail(){return this.navCollapsed||this._navLocked}connectedCallback(){super.connectedCallback(),this._restore(),this._resizeObserver=new ResizeObserver((e=>{const t=e[e.length-1];this._measure(t.contentRect.width)})),this._resizeObserver.observe(this),document.addEventListener("keydown",this._onKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver?.disconnect(),this._resizeObserver=void 0,document.removeEventListener("keydown",this._onKeyDown)}willUpdate(e){(e.has("panelOpen")||e.has("noPanel")||e.has("overlayBreakpoint")||e.has("dockedRailBreakpoint")||e.has("_hasAside")||e.has("_hasSideNav"))&&this._recompute()}updated(e){super.updated(e),this.toggleAttribute("rail",this.rail),this.toggleAttribute("nav-locked",this._navLocked),this.toggleAttribute("has-banner",this._hasBanner),this.toggleAttribute("has-side-nav",this._hasSideNav),this.toggleAttribute("has-top-bar",this._hasTopBar||this._hasTitleBlock||!this.noNavToggle&&this._hasSideNav),this.toggleAttribute("has-description",!!this.description&&!!this.pageTitle),this.toggleAttribute("has-top-bar-actions",this._hasTopBarActions),this.toggleAttribute("has-ask",this.askVisible),this.toggleAttribute("has-tabs",this.tabsVisible),this.toggleAttribute("has-aside",this._hasAside),this.toggleAttribute("has-panel",this.panelAvailable),this.toggleAttribute("has-panel-footer",this._hasPanelFooter),this.setAttribute("panel-mode",this._panelMode),this.setAttribute("panel-chrome",this._panelOwnsChrome?"external":"internal"),this._syncSideNav()}openPanel(){this.panelAvailable&&this._setPanelOpen(!0)}closePanel(){this._setPanelOpen(!1)}togglePanel(e){e??!this.panelOpen?this.openPanel():this.closePanel()}goBackHeader(){this.emit("nile-header-back")}goBackPanel(){this.emit("nile-panel-back")}goBackPage(){this.goBackHeader()}goBack(){this.goBackPanel()}expandNav(){this._setNavCollapsed(!1)}collapseNav(){this._setNavCollapsed(!0)}toggleNav(e){this._setNavCollapsed(e??!this.navCollapsed)}focusMain(){this._main?.focus()}_setPanelOpen(e){this.panelOpen!==e&&(this.panelOpen=e,this._persist(),this.emit("nile-panel-toggle",{open:e,mode:this._panelMode}))}_setNavCollapsed(e){this.navCollapsed!==e&&(this.navCollapsed=e,this._persist(),this.emit("nile-nav-toggle",{collapsed:e,locked:this._navLocked}))}_measure(e){if(e===this._width)return;const t=0===this._width;if(this._width=e,this._recompute(),t&&null!==this._restoredPanelOpen){const e=this._restoredPanelOpen;this._restoredPanelOpen=null,e&&"docked"===this._panelMode&&this.openPanel()}}_geometry(){const e=getComputedStyle(this),t=(t,i)=>{const n=parseFloat(e.getPropertyValue(t));return Number.isFinite(n)?n:i};return{nav:t("--nile-app-shell-side-nav-width",240),rail:t("--nile-app-shell-side-nav-rail-width",70),gutter:t("--nile-app-shell-gutter",4),content:t("--nile-app-shell-content-min-width",640),aside:t("--nile-app-shell-aside-width",320),panel:t("--nile-app-shell-panel-width",480)}}_dockRequirement(e,t){const i=this._hasSideNav?t:0,n=this._hasAside?e.aside+e.gutter:0,o=this._hasSideNav?2:3;return i+e.content+n+e.panel+e.gutter*o}_recompute(){const e=this._width,t=this._geometry(),i=this.overlayBreakpoint>0&&e>0&&e<this.overlayBreakpoint,n=i?"overlay":"docked",o=Math.max(this.dockedRailBreakpoint,this._dockRequirement(t,t.nav)),r=!i&&this.panelOpen&&this.panelAvailable&&e>0&&e<o,s=i||r;n!==this._panelMode&&(this._panelMode=n,this.emit("nile-panel-mode-change",{mode:n})),s!==this._navLocked&&(this._navLocked=s,this.emit("nile-nav-toggle",{collapsed:this.navCollapsed,locked:s}))}_syncSideNav(){this.querySelectorAll('[slot="side-nav"]').forEach((e=>{"NILE-SIDE-BAR"===e.tagName&&e.toggleAttribute("collapsed",this.rail)}))}_storageKey(e){return`nile-app-shell:${this.persistKey}:${e}`}_restore(){if(this.persistKey)try{const e=localStorage.getItem(this._storageKey("nav-collapsed"));null!==e&&(this.navCollapsed="true"===e);const t=localStorage.getItem(this._storageKey("panel-open"));null!==t&&(this._restoredPanelOpen="true"===t)}catch{}}_persist(){if(this.persistKey)try{localStorage.setItem(this._storageKey("nav-collapsed"),String(this.navCollapsed)),"docked"===this._panelMode&&localStorage.setItem(this._storageKey("panel-open"),String(this.panelOpen))}catch{}}_onSlotChange(e,t){const i=t.target.assignedNodes({flatten:!0}),n=i.some((e=>e.nodeType===Node.ELEMENT_NODE||""!==(e.textContent??"").trim()));switch(e){case"banner":this._hasBanner=n;break;case"side-nav":this._hasSideNav=n,this._syncSideNav();break;case"top-bar":this._hasTopBar=n;break;case"top-bar-actions":this._hasTopBarActions=n;break;case"tabs":this._hasTabs=n;break;case"aside":this._hasAside=n;break;case"panel":this._hasPanel=n,this._panelOwnsChrome=i.some((e=>e.nodeType===Node.ELEMENT_NODE&&"NILE-APP-SHELL-PANEL"===e.tagName)),this._recompute();break;case"panel-footer":this._hasPanelFooter=n}}_renderNavToggle(){if(this.noNavToggle||!this._hasSideNav)return"";const e=!this.rail;return R`
+  ></nile-glyph>`}let jS=class extends Fe{constructor(){super(...arguments),this.navCollapsed=!1,this.panelOpen=!1,this.noPanel=!1,this.panelLabel="Ask Aquera",this.headingLevel=1,this.headerBack=!1,this.headerBackLabel="Back",this.noNavToggle=!1,this.noPanelShortcut=!1,this.noSkipLink=!1,this.skipLinkLabel="Skip to main content",this.topBarPlacement="content",this.contentAlign="fluid",this.contentContainer=!1,this.flat=!1,this.noPadding=!1,this.askLabel="Ask",this.noAsk=!1,this.panelBack=!1,this.panelBackLabel="Back",this.noTabs=!1,this.fullHeight=!1,this.overlayBreakpoint=0,this.dockedRailBreakpoint=1440,this._panelMode="docked",this._navLocked=!1,this._hasBanner=!1,this._hasSideNav=!1,this._hasTopBar=!1,this._hasTopBarActions=!1,this._hasTabs=!1,this._hasAppIcon=!1,this._hasPanel=!1,this._hasPanelFooter=!1,this._panelOwnsChrome=!1,this._hasAside=!1,this._width=0,this._restoredPanelOpen=null,this._onSideNavToggle=e=>{const t=e.detail;t&&"boolean"==typeof t.collapsed&&this._setNavCollapsed(t.collapsed)},this._onKeyDown=e=>{if(this.noPanelShortcut||!this.panelAvailable)return;const t=e.key??"";if((e.metaKey||e.ctrlKey)&&"j"===t.toLowerCase())return e.preventDefault(),void this.togglePanel();"Escape"===t&&this.panelOpen&&"overlay"===this._panelMode&&this.closePanel()}}static get styles(){return[yS]}get panelMode(){return this._panelMode}get navLocked(){return this._navLocked}get panelAvailable(){return this._hasPanel&&!this.noPanel}get tabsVisible(){return this._hasTabs&&!this.noTabs}get askVisible(){return this.panelAvailable&&!this.noAsk}get rail(){return this.navCollapsed||this._navLocked}connectedCallback(){super.connectedCallback(),this._restore(),this._resizeObserver=new ResizeObserver((e=>{const t=e[e.length-1];this._measure(t.contentRect.width)})),this._resizeObserver.observe(this),document.addEventListener("keydown",this._onKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver?.disconnect(),this._resizeObserver=void 0,document.removeEventListener("keydown",this._onKeyDown)}willUpdate(e){(e.has("panelOpen")||e.has("noPanel")||e.has("overlayBreakpoint")||e.has("dockedRailBreakpoint")||e.has("_hasAside")||e.has("_hasSideNav"))&&this._recompute()}updated(e){super.updated(e),this.toggleAttribute("rail",this.rail),this.toggleAttribute("nav-locked",this._navLocked),this.toggleAttribute("has-banner",this._hasBanner),this.toggleAttribute("has-side-nav",this._hasSideNav),this.toggleAttribute("has-top-bar",this._hasTopBar||this._hasTitleBlock||!this.noNavToggle&&this._hasSideNav),this.toggleAttribute("has-description",!!this.description&&!!this.pageTitle),this.toggleAttribute("has-top-bar-actions",this._hasTopBarActions),this.toggleAttribute("has-app-icon",this._hasAppIcon),this.toggleAttribute("has-ask",this.askVisible),this.toggleAttribute("has-tabs",this.tabsVisible),this.toggleAttribute("has-aside",this._hasAside),this.toggleAttribute("has-panel",this.panelAvailable),this.toggleAttribute("has-panel-footer",this._hasPanelFooter),this.setAttribute("panel-mode",this._panelMode),this.setAttribute("panel-chrome",this._panelOwnsChrome?"external":"internal"),this._syncSideNav()}openPanel(){this.panelAvailable&&this._setPanelOpen(!0)}closePanel(){this._setPanelOpen(!1)}togglePanel(e){e??!this.panelOpen?this.openPanel():this.closePanel()}goBackHeader(){this.emit("nile-click",{value:"back"})}goBackPanel(){this.emit("nile-panel-back")}goBack(){this.goBackPanel()}expandNav(){this._setNavCollapsed(!1)}collapseNav(){this._setNavCollapsed(!0)}toggleNav(e){this._setNavCollapsed(e??!this.navCollapsed)}focusMain(){this._main?.focus()}_setPanelOpen(e){this.panelOpen!==e&&(this.panelOpen=e,this._persist(),this.emit("nile-panel-toggle",{open:e,mode:this._panelMode}))}_setNavCollapsed(e){this.navCollapsed!==e&&(this.navCollapsed=e,this._persist(),this.emit("nile-nav-toggle",{collapsed:e,locked:this._navLocked}))}_measure(e){if(e===this._width)return;const t=0===this._width;if(this._width=e,this._recompute(),t&&null!==this._restoredPanelOpen){const e=this._restoredPanelOpen;this._restoredPanelOpen=null,e&&"docked"===this._panelMode&&this.openPanel()}}_geometry(){const e=getComputedStyle(this),t=(t,i)=>{const n=parseFloat(e.getPropertyValue(t));return Number.isFinite(n)?n:i};return{nav:t("--nile-app-shell-side-nav-width",240),rail:t("--nile-app-shell-side-nav-rail-width",70),gutter:t("--nile-app-shell-gutter",4),content:t("--nile-app-shell-content-min-width",640),aside:t("--nile-app-shell-aside-width",320),panel:t("--nile-app-shell-panel-width",480)}}_dockRequirement(e,t){const i=this._hasSideNav?t:0,n=this._hasAside?e.aside+e.gutter:0,o=this._hasSideNav?2:3;return i+e.content+n+e.panel+e.gutter*o}_recompute(){const e=this._width,t=this._geometry(),i=this.overlayBreakpoint>0&&e>0&&e<this.overlayBreakpoint,n=i?"overlay":"docked",o=Math.max(this.dockedRailBreakpoint,this._dockRequirement(t,t.nav)),r=!i&&this.panelOpen&&this.panelAvailable&&e>0&&e<o,s=i||r;n!==this._panelMode&&(this._panelMode=n,this.emit("nile-panel-mode-change",{mode:n})),s!==this._navLocked&&(this._navLocked=s,this.emit("nile-nav-toggle",{collapsed:this.navCollapsed,locked:s}))}_syncSideNav(){this.querySelectorAll('[slot="side-nav"]').forEach((e=>{"NILE-SIDE-BAR"===e.tagName&&e.toggleAttribute("collapsed",this.rail)}))}_storageKey(e){return`nile-app-shell:${this.persistKey}:${e}`}_restore(){if(this.persistKey)try{const e=localStorage.getItem(this._storageKey("nav-collapsed"));null!==e&&(this.navCollapsed="true"===e);const t=localStorage.getItem(this._storageKey("panel-open"));null!==t&&(this._restoredPanelOpen="true"===t)}catch{}}_persist(){if(this.persistKey)try{localStorage.setItem(this._storageKey("nav-collapsed"),String(this.navCollapsed)),"docked"===this._panelMode&&localStorage.setItem(this._storageKey("panel-open"),String(this.panelOpen))}catch{}}_onSlotChange(e,t){const i=t.target.assignedNodes({flatten:!0}),n=i.some((e=>e.nodeType===Node.ELEMENT_NODE||""!==(e.textContent??"").trim()));switch(e){case"banner":this._hasBanner=n;break;case"side-nav":this._hasSideNav=n,this._syncSideNav();break;case"top-bar":this._hasTopBar=n;break;case"top-bar-actions":this._hasTopBarActions=n;break;case"tabs":this._hasTabs=n;break;case"app-icon":this._hasAppIcon=n;break;case"aside":this._hasAside=n;break;case"panel":this._hasPanel=n,this._panelOwnsChrome=i.some((e=>e.nodeType===Node.ELEMENT_NODE&&"NILE-APP-SHELL-PANEL"===e.tagName)),this._recompute();break;case"panel-footer":this._hasPanelFooter=n}}_renderNavToggle(){if(this.noNavToggle||!this._hasSideNav)return"";const e=!this.rail;return R`
       <div class="nav-toggle-group">
         <nile-button
           class="nav-toggle utility-control"
@@ -20408,46 +20411,50 @@ nile-rich-text-editor[disabled] .editor figure.rte-image {
         </nile-button>
         ${this._hasTopBar||this._hasTitleBlock?R`<span class="rule" part="rule"></span>`:""}
       </div>
-    `}get _hasTitleBlock(){return!!this.pageTitle||this._hasLeading}get _hasLeading(){return"back"===this.leading||"app-icon"===this.leading}get _headingLevel(){const e=Math.trunc(Number(this.headingLevel));return Number.isFinite(e)?Math.min(6,Math.max(1,e)):1}_renderLeading(){return"app-icon"===this.leading?R`
-        <span class="app-icon" part="app-icon">
-          <slot name="app-icon"></slot>
-        </span>
-      `:"back"===this.leading?R`
+    `}get _hasTitleBlock(){return!!this.pageTitle||this.headerBack||this._hasAppIcon}get _headingLevel(){const e=Math.trunc(Number(this.headingLevel));return Number.isFinite(e)?Math.min(6,Math.max(1,e)):1}_renderBack(){return this.headerBack?R`
+      <span class="back-line">
         <button
           class="back"
           part="back"
           type="button"
+          aria-label=${this.headerBackLabel}
+          title=${this.headerBackLabel}
           @click=${()=>this.goBackHeader()}
         >
-          ${IS("ng-chevron-left",20,"currentColor")}
-          <span>${this.backLabel}</span>
+          ${IS("ng-arrow-narrow-left",20,"currentColor")}
         </button>
-        ${this.pageTitle?R`<span class="crumb-divider" aria-hidden="true">
-              ${IS("ng-slash",16,"currentColor")}
-            </span>`:""}
-      `:""}_renderTitleBlock(){return this._hasTitleBlock?R`
+      </span>
+    `:""}_renderAppIconSlot(){return R`<slot
+      name="app-icon"
+      @slotchange=${e=>this._onSlotChange("app-icon",e)}
+    ></slot>`}_renderAppIconProbe(){return R`<span class="app-icon-probe" hidden
+      >${this._renderAppIconSlot()}</span
+    >`}_renderTitleBlock(){return this._hasTitleBlock?this.pageTitle||this._hasAppIcon?R`
       <div class="title-area" part="title-area">
-        ${this._hasLeading?R`<span class="leading" part="leading"
-              >${this._renderLeading()}</span
-            >`:""}
-        ${this.pageTitle?R`
-              <div class="title-stack">
-                <div class="title-row">
-                  <div
-                    class="page-title"
-                    part="page-title"
-                    role="heading"
-                    aria-level=${this._headingLevel}
-                  >${this.pageTitle}</div>
-                  ${this.badge?R`<span class="badge" part="badge">${this.badge}</span>`:""}
-                </div>
-                ${this.description?R`<p class="description" part="description">
-                      ${this.description}
-                    </p>`:""}
-              </div>
-            `:""}
+        ${this._renderBack()}
+        <div class="title-stack">
+          <div class="title-row">
+            <span class="app-icon" part="app-icon"
+              >${this._renderAppIconSlot()}</span
+            >
+            ${this.pageTitle?R`<div
+                  class="page-title"
+                  part="page-title"
+                  role="heading"
+                  aria-level=${this._headingLevel}
+                >${this.pageTitle}</div>`:""}
+            ${this.pageTitle&&this.badge?R`<span class="badge" part="badge">${this.badge}</span>`:""}
+          </div>
+          ${this.pageTitle&&this.description?R`<p class="description" part="description">
+                ${this.description}
+              </p>`:""}
+        </div>
       </div>
-    `:""}_renderTopBar(e){return R`
+    `:R`
+        <div class="title-area" part="title-area">
+          ${this._renderBack()} ${this._renderAppIconProbe()}
+        </div>
+      `:this._renderAppIconProbe()}_renderTopBar(e){return R`
       <div
         class=${"shell"===e?"top-bar shell-top-bar":"top-bar"}
         part=${"shell"===e?"top-bar shell-top-bar":"top-bar"}
@@ -20465,12 +20472,13 @@ nile-rich-text-editor[disabled] .editor figure.rte-image {
             name="top-bar-actions"
             @slotchange=${e=>this._onSlotChange("top-bar-actions",e)}
           ></slot>
+          ${this.askVisible&&this._hasTopBarActions?R`<span class="rule ask-rule" part="ask-rule"></span>`:""}
           ${this.askVisible?R`
                 <nile-button
                   class="ask"
                   part="ask"
                   exportparts="base: ask__base, label: ask__label"
-                  variant="primary"
+                  variant="secondary"
                   @click=${()=>this.openPanel()}
                 >
                   <span slot="prefix" class="ask-mark">
@@ -20595,7 +20603,7 @@ nile-rich-text-editor[disabled] .editor figure.rte-image {
               `}
         </aside>
       </div>
-    `}};e([de({type:Boolean,reflect:!0,attribute:"nav-collapsed"})],jS.prototype,"navCollapsed",void 0),e([de({type:Boolean,reflect:!0,attribute:"panel-open"})],jS.prototype,"panelOpen",void 0),e([de({type:Boolean,reflect:!0,attribute:"no-panel"})],jS.prototype,"noPanel",void 0),e([de({type:String,attribute:"panel-label"})],jS.prototype,"panelLabel",void 0),e([de({type:String,attribute:!0,reflect:!0})],jS.prototype,"pageTitle",void 0),e([de({type:Number,attribute:!0,reflect:!0})],jS.prototype,"headingLevel",void 0),e([de({type:String,attribute:!0,reflect:!0})],jS.prototype,"description",void 0),e([de({type:String,attribute:!0,reflect:!0})],jS.prototype,"badge",void 0),e([de({type:String,attribute:!0,reflect:!0})],jS.prototype,"leading",void 0),e([de({type:String,attribute:!0,reflect:!0})],jS.prototype,"backLabel",void 0),e([de({type:Boolean,reflect:!0,attribute:"no-nav-toggle"})],jS.prototype,"noNavToggle",void 0),e([de({type:Boolean,attribute:"no-panel-shortcut"})],jS.prototype,"noPanelShortcut",void 0),e([de({type:Boolean,reflect:!0,attribute:"no-skip-link"})],jS.prototype,"noSkipLink",void 0),e([de({type:String,attribute:"skip-link-label"})],jS.prototype,"skipLinkLabel",void 0),e([de({type:String,reflect:!0,attribute:"top-bar-placement"})],jS.prototype,"topBarPlacement",void 0),e([de({type:String,reflect:!0,attribute:"content-align"})],jS.prototype,"contentAlign",void 0),e([de({type:Boolean,reflect:!0,attribute:"content-container"})],jS.prototype,"contentContainer",void 0),e([de({type:Boolean,reflect:!0})],jS.prototype,"flat",void 0),e([de({type:Boolean,reflect:!0,attribute:"no-padding"})],jS.prototype,"noPadding",void 0),e([de({type:String,attribute:"ask-label"})],jS.prototype,"askLabel",void 0),e([de({type:Boolean,reflect:!0,attribute:"no-ask"})],jS.prototype,"noAsk",void 0),e([de({type:Boolean,reflect:!0})],jS.prototype,"panelBack",void 0),e([de({type:String})],jS.prototype,"panelBackLabel",void 0),e([de({type:Boolean,reflect:!0})],jS.prototype,"noTabs",void 0),e([de({type:Boolean,reflect:!0,attribute:"full-height"})],jS.prototype,"fullHeight",void 0),e([de({type:Number,attribute:"overlay-breakpoint"})],jS.prototype,"overlayBreakpoint",void 0),e([de({type:Number,attribute:"docked-rail-breakpoint"})],jS.prototype,"dockedRailBreakpoint",void 0),e([de({type:String,attribute:"persist-key"})],jS.prototype,"persistKey",void 0),e([he()],jS.prototype,"_panelMode",void 0),e([he()],jS.prototype,"_navLocked",void 0),e([he()],jS.prototype,"_hasBanner",void 0),e([he()],jS.prototype,"_hasSideNav",void 0),e([he()],jS.prototype,"_hasTopBar",void 0),e([he()],jS.prototype,"_hasTopBarActions",void 0),e([he()],jS.prototype,"_hasTabs",void 0),e([he()],jS.prototype,"_hasPanel",void 0),e([he()],jS.prototype,"_hasPanelFooter",void 0),e([he()],jS.prototype,"_panelOwnsChrome",void 0),e([he()],jS.prototype,"_hasAside",void 0),e([pe(".main")],jS.prototype,"_main",void 0),jS=e([ce("nile-app-shell")],jS);const zS=s`
+    `}};e([de({type:Boolean,reflect:!0,attribute:"nav-collapsed"})],jS.prototype,"navCollapsed",void 0),e([de({type:Boolean,reflect:!0,attribute:"panel-open"})],jS.prototype,"panelOpen",void 0),e([de({type:Boolean,reflect:!0,attribute:"no-panel"})],jS.prototype,"noPanel",void 0),e([de({type:String,attribute:"panel-label"})],jS.prototype,"panelLabel",void 0),e([de({type:String,attribute:!0,reflect:!0})],jS.prototype,"pageTitle",void 0),e([de({type:Number,attribute:!0,reflect:!0})],jS.prototype,"headingLevel",void 0),e([de({type:String,attribute:!0,reflect:!0})],jS.prototype,"description",void 0),e([de({type:String,attribute:!0,reflect:!0})],jS.prototype,"badge",void 0),e([de({type:Boolean,attribute:!0,reflect:!0})],jS.prototype,"headerBack",void 0),e([de({type:String,attribute:!0,reflect:!0})],jS.prototype,"headerBackLabel",void 0),e([de({type:Boolean,reflect:!0,attribute:"no-nav-toggle"})],jS.prototype,"noNavToggle",void 0),e([de({type:Boolean,attribute:"no-panel-shortcut"})],jS.prototype,"noPanelShortcut",void 0),e([de({type:Boolean,reflect:!0,attribute:"no-skip-link"})],jS.prototype,"noSkipLink",void 0),e([de({type:String,attribute:"skip-link-label"})],jS.prototype,"skipLinkLabel",void 0),e([de({type:String,reflect:!0,attribute:"top-bar-placement"})],jS.prototype,"topBarPlacement",void 0),e([de({type:String,reflect:!0,attribute:"content-align"})],jS.prototype,"contentAlign",void 0),e([de({type:Boolean,reflect:!0,attribute:"content-container"})],jS.prototype,"contentContainer",void 0),e([de({type:Boolean,reflect:!0})],jS.prototype,"flat",void 0),e([de({type:Boolean,reflect:!0,attribute:"no-padding"})],jS.prototype,"noPadding",void 0),e([de({type:String,attribute:"ask-label"})],jS.prototype,"askLabel",void 0),e([de({type:Boolean,reflect:!0,attribute:"no-ask"})],jS.prototype,"noAsk",void 0),e([de({type:Boolean,reflect:!0})],jS.prototype,"panelBack",void 0),e([de({type:String})],jS.prototype,"panelBackLabel",void 0),e([de({type:Boolean,reflect:!0})],jS.prototype,"noTabs",void 0),e([de({type:Boolean,reflect:!0,attribute:"full-height"})],jS.prototype,"fullHeight",void 0),e([de({type:Number,attribute:"overlay-breakpoint"})],jS.prototype,"overlayBreakpoint",void 0),e([de({type:Number,attribute:"docked-rail-breakpoint"})],jS.prototype,"dockedRailBreakpoint",void 0),e([de({type:String,attribute:"persist-key"})],jS.prototype,"persistKey",void 0),e([he()],jS.prototype,"_panelMode",void 0),e([he()],jS.prototype,"_navLocked",void 0),e([he()],jS.prototype,"_hasBanner",void 0),e([he()],jS.prototype,"_hasSideNav",void 0),e([he()],jS.prototype,"_hasTopBar",void 0),e([he()],jS.prototype,"_hasTopBarActions",void 0),e([he()],jS.prototype,"_hasTabs",void 0),e([he()],jS.prototype,"_hasAppIcon",void 0),e([he()],jS.prototype,"_hasPanel",void 0),e([he()],jS.prototype,"_hasPanelFooter",void 0),e([he()],jS.prototype,"_panelOwnsChrome",void 0),e([he()],jS.prototype,"_hasAside",void 0),e([pe(".main")],jS.prototype,"_main",void 0),jS=e([ce("nile-app-shell")],jS);const zS=s`
   :host {
     display: inline-flex;
     align-items: center;
@@ -20789,7 +20797,9 @@ nile-rich-text-editor[disabled] .editor figure.rte-image {
 
   .title {
     margin: 0;
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    /* Figma's Assistant Title: Text lg/Semibold, 18/28 on NxtGen. Enterprise keeps --nile-type-scale-3, and it defines no --ng-* tokens, so the line-height declaration is invalid there and the title inherits its line height exactly as before. */
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-lg));
+    line-height: var(--ng-line-height-text-lg);
     font-weight: var(
       --nile-font-weight-semi-bold,
       var(--ng-font-weight-semibold)