@aquera/nile-elements 2.0.11 → 2.0.13

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "2.0.11",
+  "version": "2.0.13",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-app-shell/nile-app-shell-regions.test.ts

@@ -405,8 +405,8 @@ describe('nile-side-bar in the shell track', () => {
 });
 
 /*
- * The HTML API, driven from markup. pageTitle, backLabel, noTabs, panelBack
- * and panelBackLabel deliberately declare no `attribute:` option, so Lit
+ * The HTML API, driven from markup. pageTitle, headerBack, headerBackLabel,
+ * noTabs, panelBack and panelBackLabel declare no kebab `attribute:` option, so Lit
  * observes the lowercased property name (pagetitle, notabs, ...) and markup
  * writes them camelCase — HTML lowercases `pageTitle=` to match.
  *
@@ -422,8 +422,8 @@ describe('nile-app-shell — the attributes the docs advertise', () => {
       <nile-app-shell
         style="width: 1440px; height: 600px;"
         pageTitle="Applications"
-        backLabel="Integrations"
-        leading="back"
+        headerBack
+        headerBackLabel="Integrations"
         noTabs
         panelBack
         panelBackLabel="Chat history"
@@ -440,7 +440,8 @@ describe('nile-app-shell — the attributes the docs advertise', () => {
 
     // Each attribute reached its property.
     expect(el.pageTitle, 'pageTitle').to.equal('Applications');
-    expect(el.backLabel, 'backLabel').to.equal('Integrations');
+    expect(el.headerBack, 'headerBack').to.be.true;
+    expect(el.headerBackLabel, 'headerBackLabel').to.equal('Integrations');
     expect(el.noTabs, 'noTabs').to.be.true;
     expect(el.panelBack, 'panelBack').to.be.true;
     expect(el.panelBackLabel, 'panelBackLabel').to.equal('Chat history');
@@ -453,7 +454,10 @@ describe('nile-app-shell — the attributes the docs advertise', () => {
     // The reflecting pair round-trip to the lowercased name, not to kebab.
     expect(el.hasAttribute('notabs')).to.be.true;
     expect(el.hasAttribute('panelback')).to.be.true;
+    expect(el.hasAttribute('headerback')).to.be.true;
+    expect(el.getAttribute('headerbacklabel')).to.equal('Integrations');
     expect(el.hasAttribute('no-tabs')).to.be.false;
+    expect(el.hasAttribute('header-back')).to.be.false;
     el.noTabs = false;
     el.panelBack = false;
     await el.updateComplete;

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

@@ -227,21 +227,21 @@ export const styles = css`
     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));
   }
 
@@ -280,7 +280,7 @@ export const styles = css`
     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;
@@ -314,36 +314,24 @@ export const styles = css`
     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;
@@ -386,16 +374,15 @@ export const styles = css`
     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;
   }
 
@@ -404,7 +391,7 @@ export const styles = css`
     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;
   }
@@ -421,10 +408,11 @@ export const styles = css`
     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. */
@@ -432,10 +420,12 @@ export const styles = css`
     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)
@@ -488,6 +478,17 @@ export const styles = css`
   /* 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;
@@ -654,7 +655,9 @@ export const styles = css`
 
   .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)