@aquera/nile-elements 2.0.11 → 2.0.13

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

@@ -22,8 +22,10 @@ export type NileAppShellTopBarPlacement = 'content' | 'shell';
 /** How the main region lays its content out. */
 export type NileAppShellContentAlign = 'fluid' | 'centered';
 
-/** What sits before the page title in the top bar. */
-export type NileAppShellLeading = 'none' | 'back' | 'app-icon';
+/** The `detail` of the `nile-click` the header back control emits. */
+export interface NileAppShellClickDetail {
+  value: 'back';
+}
 
 /** The shell's own track and region widths, in px. */
 interface ShellGeometry {
@@ -51,7 +53,7 @@ interface ShellGeometry {
  * @slot top-bar - The page-title bar, mounted inside the container by default or spanning the shell when `top-bar-placement="shell"`.
  * @slot top-bar-actions - Controls pinned to the end of the top bar.
  * @slot tabs - A hoisted second-level tab strip, flush under the top bar and outside `<main>`'s scroller.
- * @slot app-icon - The mark shown when `leading="app-icon"`, clipped to the shell's box.
+ * @slot app-icon - The mark shown before the page title whenever this slot has content, clipped to the shell's box.
  * @slot side-nav - The navigation track. Works best with `<nile-side-bar>`.
  * @slot aside - A secondary column between the content container and the panel.
  * @slot panel - The AI panel's body. When empty the panel is unmounted and `openPanel()` is a no-op.
@@ -62,7 +64,7 @@ interface ShellGeometry {
  * @event nile-nav-toggle - Emitted after the nav's collapsed state or forced-rail lock changes. `detail: { collapsed, locked }`.
  * @event nile-panel-toggle - Emitted after the panel opens or closes. `detail: { open, mode }`.
  * @event nile-panel-mode-change - Emitted when the panel flips between docked and overlay. `detail: { mode }`.
- * @event nile-header-back - Emitted when the header's back control is pressed.
+ * @event nile-click - Emitted when the header's back control is pressed, or `goBackHeader()` is called. `detail: { value: 'back' }`. Emitted on the shell itself, so check `event.target === shell` as well as the value: a `nile-click` from page content bubbles through the shell too.
  * @event nile-panel-back - Emitted when the panel's back control is pressed, whether the shell's built-in panel chrome or a slotted `nile-app-shell-panel` draws it.
  *
  * @csspart skip-link - The skip-to-content link.
@@ -71,15 +73,15 @@ interface ShellGeometry {
  * @csspart top-bar - The top bar, in either placement.
  * @csspart nav-toggle - The built-in nav toggle button.
  * @csspart rule - The vertical rule after the nav toggle.
+ * @csspart ask-rule - The vertical rule before the Ask button, drawn when `top-bar-actions` has content.
  * @csspart top-bar-actions - The end-aligned top bar action group.
  * @csspart ask - The built-in Ask button, the shell's single door to the panel.
- * @csspart title-area - The header's own title block: leading, title, badge and description.
+ * @csspart title-area - The header's own title block: back control, app icon, title, badge and description.
  * @csspart page-title - The title text, exposed as a heading whose level `headingLevel` sets.
  * @csspart description - The second line under the title.
  * @csspart badge - The pill after the title.
- * @csspart leading - The line box holding the leading control.
- * @csspart back - The back control shown by `leading="back"`.
- * @csspart app-icon - The block shown by `leading="app-icon"`, sized by `--nile-app-shell-app-icon-size`.
+ * @csspart back - The header back control, shown by `headerBack`.
+ * @csspart app-icon - The block holding the `app-icon` slot, shown when the slot has content and sized by `--nile-app-shell-app-icon-size`.
  * @csspart tabs - The hoisted tab-strip region, under the top bar.
  * @csspart side-nav - The navigation track.
  * @csspart content-section - The flex row holding container, aside and panel.
@@ -111,7 +113,7 @@ interface ShellGeometry {
  * @cssproperty [--nile-app-shell-content-min-width=640px] - Container floor.
  * @cssproperty [--nile-app-shell-min-width=768px] - Below this the window scrolls rather than the shell compressing.
  * @cssproperty [--nile-app-shell-centered-width=824px] - Column width under `content-align="centered"`.
- * @cssproperty [--nile-app-shell-app-icon-size=20px] - The leading app icon's box.
+ * @cssproperty [--nile-app-shell-app-icon-size=20px] - The app icon's box.
  * @cssproperty [--nile-app-shell-utility-size=32px] - Box the shell's own icon controls sit in.
  * @cssproperty [--nile-app-shell-radius=16px] - Container, aside and panel radius.
  * @cssproperty [--nile-app-shell-duration=250ms] - Track and panel motion.
@@ -123,9 +125,8 @@ interface ShellGeometry {
  * @method expandNav() - Expand the side nav.
  * @method collapseNav() - Collapse the side nav to a rail.
  * @method toggleNav(force?) - Toggle, or force a specific collapsed state.
- * @method goBackHeader() - Emit `nile-header-back`, as the header's back control does.
+ * @method goBackHeader() - Emit `nile-click` with `{ value: 'back' }`, as the header's back control does.
  * @method goBackPanel() - Emit `nile-panel-back`, as the panel's back control does.
- * @method goBackPage() - Deprecated alias of `goBackHeader()`.
  * @method goBack() - Deprecated alias of `goBackPanel()`.
  */
 @customElement('nile-app-shell')
@@ -166,13 +167,13 @@ export class NileAppShell extends NileElement {
   @property({ type: String, attribute: true, reflect: true })
   badge?: string;
 
-  /** What sits before the page title: `back` draws a breadcrumb and emits `nile-header-back`; `app-icon` draws a 20px block for the `app-icon` slot. */
-  @property({ type: String, attribute: true, reflect: true })
-  leading: NileAppShellLeading = 'none';
+  /** Shows the back arrow before the page title; pressing it emits `nile-click` with `{ value: 'back' }`. Independent of the `app-icon` slot. */
+  @property({ type: Boolean, attribute: true, reflect: true })
+  headerBack: boolean = false;
 
-  /** The previous-page label drawn by `leading="back"`. */
+  /** Accessible name of the header back control. Never rendered as visible text. */
   @property({ type: String, attribute: true, reflect: true })
-  backLabel: string = 'Back';
+  headerBackLabel: string = 'Back';
 
   /** Hides the built-in nav toggle. Mount `nile-app-shell-nav-toggle` yourself. */
   @property({ type: Boolean, reflect: true, attribute: 'no-nav-toggle' })
@@ -257,6 +258,7 @@ export class NileAppShell extends NileElement {
   @state() private _hasTopBar: boolean = false;
   @state() private _hasTopBarActions: boolean = false;
   @state() private _hasTabs: boolean = false;
+  @state() private _hasAppIcon: boolean = false;
   @state() private _hasPanel: boolean = false;
   @state() private _hasPanelFooter: boolean = false;
 
@@ -352,6 +354,7 @@ export class NileAppShell extends NileElement {
       !!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);
@@ -384,9 +387,10 @@ export class NileAppShell extends NileElement {
     else this.closePanel();
   }
 
-  /** Emit `nile-header-back`, as the header's back control does; the page owns the history. */
+  /** Emit `nile-click` with `{ value: 'back' }`, as the header's back control does; the page owns the history. */
   public goBackHeader(): void {
-    this.emit('nile-header-back');
+    const detail: NileAppShellClickDetail = { value: 'back' };
+    this.emit('nile-click', detail);
   }
 
   /** Emit `nile-panel-back`, as the panel's back control does; the page owns the view stack. */
@@ -394,11 +398,6 @@ export class NileAppShell extends NileElement {
     this.emit('nile-panel-back');
   }
 
-  /** @deprecated Use `goBackHeader()`; kept as an alias that emits `nile-header-back`. */
-  public goBackPage(): void {
-    this.goBackHeader();
-  }
-
   /** @deprecated Use `goBackPanel()`; kept as an alias that emits `nile-panel-back`. */
   public goBack(): void {
     this.goBackPanel();
@@ -613,6 +612,9 @@ export class NileAppShell extends NileElement {
       case 'tabs':
         this._hasTabs = filled;
         break;
+      case 'app-icon':
+        this._hasAppIcon = filled;
+        break;
       case 'aside':
         this._hasAside = filled;
         break;
@@ -667,14 +669,9 @@ export class NileAppShell extends NileElement {
     `;
   }
 
-  /** Whether the header has a title block of its own to draw: only a title or a leading control mounts it. */
+  /** Whether the header has a title block of its own to draw: a title, the back arrow or a slotted app icon mounts it. */
   private get _hasTitleBlock(): boolean {
-    return !!this.pageTitle || this._hasLeading;
-  }
-
-  /** Whether `leading` names a control that renders; an empty or unknown value draws nothing, like `none`. */
-  private get _hasLeading(): boolean {
-    return this.leading === 'back' || this.leading === 'app-icon';
+    return !!this.pageTitle || this.headerBack || this._hasAppIcon;
   }
 
   /** `headingLevel` as a safe `aria-level`: a whole number clamped to 1–6, and 1 for anything non-numeric. */
@@ -683,70 +680,77 @@ export class NileAppShell extends NileElement {
     return Number.isFinite(level) ? Math.min(6, Math.max(1, level)) : 1;
   }
 
-  private _renderLeading(): TemplateResult | string {
-    if (this.leading === 'app-icon') {
-      return html`
-        <span class="app-icon" part="app-icon">
-          <slot name="app-icon"></slot>
-        </span>
-      `;
-    }
-
-    if (this.leading === 'back') {
-      return html`
+  private _renderBack(): TemplateResult | string {
+    if (!this.headerBack) return '';
+    return html`
+      <span class="back-line">
         <button
           class="back"
           part="back"
           type="button"
+          aria-label=${this.headerBackLabel}
+          title=${this.headerBackLabel}
           @click=${() => this.goBackHeader()}
         >
-          ${renderGlyph('ng-chevron-left', 20, 'currentColor')}
-          <span>${this.backLabel}</span>
+          ${renderGlyph('ng-arrow-narrow-left', 20, 'currentColor')}
         </button>
-        ${this.pageTitle
-          ? html`<span class="crumb-divider" aria-hidden="true">
-              ${renderGlyph('ng-slash', 16, 'currentColor')}
-            </span>`
-          : ''}
-      `;
-    }
+      </span>
+    `;
+  }
+
+  private _renderAppIconSlot(): TemplateResult {
+    return html`<slot
+      name="app-icon"
+      @slotchange=${(e: Event) => this._onSlotChange('app-icon', e)}
+    ></slot>`;
+  }
 
-    return '';
+  /* The app-icon slot has to exist whenever the stack does not, or a slotted icon could never mount it: park it, hidden. */
+  private _renderAppIconProbe(): TemplateResult {
+    return html`<span class="app-icon-probe" hidden
+      >${this._renderAppIconSlot()}</span
+    >`;
   }
 
-  private _renderTitleBlock(): TemplateResult | string {
-    if (!this._hasTitleBlock) return '';
+  private _renderTitleBlock(): TemplateResult {
+    if (!this._hasTitleBlock) return this._renderAppIconProbe();
+
+    /* The stack is the title and/or the app icon; a back arrow on its own brings no empty stack. */
+    if (!this.pageTitle && !this._hasAppIcon) {
+      return html`
+        <div class="title-area" part="title-area">
+          ${this._renderBack()} ${this._renderAppIconProbe()}
+        </div>
+      `;
+    }
 
-    /* Both leading modes render beside the title stack, never inside the title row, so the description stays under the page title in every leading mode. */
+    /* The back arrow sits beside the stack; the app icon starts the stack's first row, so the description lines up under the icon when there is one and under the title when not. */
     return html`
       <div class="title-area" part="title-area">
-        ${this._hasLeading
-          ? html`<span class="leading" part="leading"
-              >${this._renderLeading()}</span
-            >`
-          : ''}
-        ${this.pageTitle
-          ? html`
-              <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
-                    ? html`<span class="badge" part="badge">${this.badge}</span>`
-                    : ''}
-                </div>
-                ${this.description
-                  ? html`<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
+              ? html`<div
+                  class="page-title"
+                  part="page-title"
+                  role="heading"
+                  aria-level=${this._headingLevel}
+                >${this.pageTitle}</div>`
+              : ''}
+            ${this.pageTitle && this.badge
+              ? html`<span class="badge" part="badge">${this.badge}</span>`
+              : ''}
+          </div>
+          ${this.pageTitle && this.description
+            ? html`<p class="description" part="description">
+                ${this.description}
+              </p>`
+            : ''}
+        </div>
       </div>
     `;
   }
@@ -773,13 +777,16 @@ export class NileAppShell extends NileElement {
             @slotchange=${(e: Event) =>
               this._onSlotChange('top-bar-actions', e)}
           ></slot>
+          ${this.askVisible && this._hasTopBarActions
+            ? html`<span class="rule ask-rule" part="ask-rule"></span>`
+            : ''}
           ${this.askVisible
             ? html`
                 <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">

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

@@ -80,7 +80,9 @@ export const styles = css`
 
   .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)

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

@@ -235,35 +235,23 @@ export const styles = css`
     display: contents;
   }
 
-  .select__tags nile-tag {
+  :host([showtooltip]) .select__tags nile-tag {
     flex: 0 1 auto;
     cursor: pointer;
     min-width: 0;
-  }
-
-  /* A chip is capped - and so truncated - only when a tooltip can reveal the
-     full value. Without one it keeps its natural width and the fit pass moves
-     the surplus into the +N button instead. */
-  :host([showtooltip]) .select__tags nile-tag {
     max-width: var(--nile-width-180px, var(--ng-height-180px));
   }
 
-  /* Only the fitted layout can move a chip into the +N button, so only there
-     can a chip refuse to shrink. */
-  :host(:not([showtooltip])) .select__tags--fitted nile-tag {
-    flex-shrink: 0;
-  }
-
-  .select__tags nile-tag::part(base) {
+  :host([showtooltip]) .select__tags nile-tag::part(base) {
     max-width: 100%;
   }
 
-  .select__tags nile-tag::part(prefix_content_wrapper) {
+  :host([showtooltip]) .select__tags nile-tag::part(prefix_content_wrapper) {
     flex: 1 1 auto;
     min-width: 0;
   }
 
-  .select__tags nile-tag::part(content) {
+  :host([showtooltip]) .select__tags nile-tag::part(content) {
     display: block;
     flex: 1 1 auto;
     min-width: 0;
@@ -279,7 +267,7 @@ export const styles = css`
     text-overflow: ellipsis;
   }
 
-  .select__tags nile-tag::part(remove-button) {
+  :host([showtooltip]) .select__tags nile-tag::part(remove-button) {
     flex: 0 0 auto;
   }
 
@@ -535,6 +523,9 @@ export const styles = css`
     bottom: 0;
     z-index: 1;
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+  }
+
+  .select__pre-footer-area--query {
     container-type: inline-size;
     container-name: nile-select-footer;
   }
@@ -640,6 +631,10 @@ export const styles = css`
     }
   }
 
+  .select__invisible {
+    opacity: 0;
+  }
+
   .select__prefix--from-options {
     margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));
   }