@aquera/nile-elements 2.0.9 → 2.0.11

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

@@ -6,11 +6,9 @@
  */
 
 import { css } from 'lit';
+import { utilityControlStyles } from '../internal/app-shell-utility-control-styles';
 
-/**
- * AppShellNavToggle CSS. The button itself is the shared utility recipe; this
- * file only handles the host box and the rule.
- */
+/** AppShellNavToggle CSS: the host box, the rule, and the utility-control recipe, since this element also mounts outside a shell. */
 export const styles = css`
   :host {
     display: inline-flex;
@@ -22,10 +20,14 @@ export const styles = css`
     display: none;
   }
 
+  /* Lands the 20px glyph box, not the 32px utility circle, on the 24px origin: (32 - 20) / 2 = 6. */
   .toggle {
-    margin-inline-start: var(--nile-app-shell-nav-toggle-offset, -7px);
+    margin-inline-start: var(--nile-app-shell-nav-toggle-offset, -6px);
   }
 
+  /* The toggle itself: the shared utility-control recipe. */
+  ${utilityControlStyles}
+
   .rule {
     flex: 0 0 auto;
     width: var(--nile-border-width-1, var(--ng-border-width-1));

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

@@ -14,9 +14,7 @@ import NileElement from '../internal/nile-element';
 import type { NileAppShell } from '../nile-app-shell/nile-app-shell';
 
 /**
- * @summary The side-nav toggle, as a standalone control. `nile-app-shell`
- * renders one in its own top bar; mount this in a header you build yourself, or
- * a route has no way to expand the rail.
+ * @summary The side-nav toggle as a standalone control, for a header you build yourself.
  *
  * @status stable
  * @since 2.0
@@ -29,7 +27,8 @@ import type { NileAppShell } from '../nile-app-shell/nile-app-shell';
  * @csspart button - The toggle button.
  * @csspart rule - The trailing vertical rule.
  *
- * @cssproperty [--nile-app-shell-nav-toggle-offset=-4px] - Optical start offset.
+ * @cssproperty [--nile-app-shell-nav-toggle-offset=-6px] - Optical start offset, so the glyph lands on the bar's text origin.
+ * @cssproperty [--nile-app-shell-utility-size=32px] - Box the toggle sits in; the hit area and hover surface, not a visible chip.
  */
 @customElement('nile-app-shell-nav-toggle')
 export class NileAppShellNavToggle extends NileElement {
@@ -41,10 +40,7 @@ export class NileAppShellNavToggle extends NileElement {
   @property({ type: Boolean, reflect: true, attribute: 'with-rule' })
   withRule: boolean = false;
 
-  /**
-   * The shell to drive. Defaults to the nearest `nile-app-shell` ancestor, or
-   * the element with this id.
-   */
+  /** The shell to drive. Defaults to the nearest `nile-app-shell` ancestor, or the element with this id. */
   @property({ type: String })
   shell?: string;
 
@@ -98,7 +94,7 @@ export class NileAppShellNavToggle extends NileElement {
     const expanded = !this._rail;
     return html`
       <nile-button
-        class="toggle"
+        class="toggle utility-control"
         part="button"
         variant="ghost"
         circle
@@ -113,8 +109,8 @@ export class NileAppShellNavToggle extends NileElement {
         @click=${this._onClick}
       >
         ${renderGlyph(
-          expanded ? 'ng-panel-left-close' : 'ng-panel-left-open',
-          24,
+          expanded ? 'ng-panel-left' : 'ng-panel-right',
+          20,
           'currentColor'
         )}
       </nile-button>

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

@@ -6,6 +6,7 @@
  */
 
 import { css } from 'lit';
+import { utilityControlStyles } from '../internal/app-shell-utility-control-styles';
 
 export const styles = css`
   :host {
@@ -23,14 +24,15 @@ export const styles = css`
     display: none;
   }
 
+  /* The panel header keeps its own height, never the page header's; the literal is the floor for a panel mounted outside a shell. */
   .header {
     box-sizing: border-box;
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
-    height: var(--nile-app-shell-top-bar-height, 56px);
-    padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    height: var(--nile-app-shell-panel-header-height, 56px);
+    padding-inline: var(--nile-spacing-3xl, var(--ng-spacing-3xl));
     border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid
       var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
   }
@@ -39,6 +41,21 @@ export const styles = css`
     display: none;
   }
 
+  /* The back control for a sub-view; stands where the brand mark does in the root view. */
+  .back {
+    flex: 0 0 auto;
+    margin-inline-start: -6px;
+  }
+
+  /* Mirrors the back control's offset on the end edge: the 20px glyph, not the 32px circle, lands on the padding line. */
+  .close {
+    margin-inline-end: -6px;
+  }
+
+  :host([back]) .mark {
+    display: none;
+  }
+
   .heading {
     display: flex;
     align-items: center;
@@ -85,6 +102,11 @@ export const styles = css`
     display: none;
   }
 
+  /* ------------------------------------------------------- utility controls */
+
+  /* The header's own icon controls (back and close): the shared utility-control recipe. */
+  ${utilityControlStyles}
+
   .body {
     flex: 1 1 auto;
     min-height: 0;
@@ -92,7 +114,8 @@ export const styles = css`
     display: flex;
     flex-direction: column;
     gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
-    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    /* 16 under the header, 24 on the sides and bottom. */
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl));
   }
 
   :host([no-padding]) .body {
@@ -101,7 +124,7 @@ export const styles = css`
 
   .footer {
     flex: 0 0 auto;
-    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl));
     border-top: var(--nile-border-width-1, var(--ng-border-width-1)) solid
       var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
   }

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

@@ -15,10 +15,7 @@ import NileElement from '../internal/nile-element';
 import type { NileAppShellPanelMode } from '../nile-app-shell/nile-app-shell';
 
 /**
- * @summary The shell's right region — the AI assistant panel. Assigns itself to
- * the shell's `panel` slot and takes over the panel chrome: heading, actions,
- * close button, scroll region and composer footer. The shell keeps the geometry
- * — 480px docked, an overlay drawer when narrow — and the open/closed state.
+ * @summary The shell's right region — the AI assistant panel; takes over the panel chrome while the shell keeps the geometry and open state.
  *
  * @status stable
  * @since 2.0
@@ -29,20 +26,25 @@ import type { NileAppShellPanelMode } from '../nile-app-shell/nile-app-shell';
  * @dependency nile-glyph
  *
  * @slot - The panel body. Scrolls.
- * @slot header - Replaces the default heading (mark plus label).
- * @slot actions - Controls added before the close button.
+ * @slot header - Replaces the default heading (mark plus label); the back control renders before it.
+ * @slot actions - Controls added before the close button; size and clear their `base` part from page CSS to match the header's bare glyphs.
  * @slot footer - A composer, docked below the scroll region.
  *
- * @event nile-close - Emitted when the close button is pressed, after the shell
- *   has been told to close. Cancelable is not honoured; listen to it to react,
- *   and use `no-close` to own the control yourself.
+ * @event nile-close - Emitted when the close button is pressed, after the shell has been told to close.
+ * @event nile-back - Emitted when the back control is pressed; the page swaps its own content back.
+ * @event nile-panel-back - Emitted right after `nile-back` for the same press, matching the shell's built-in panel chrome, so a page listening on the shell keeps working when it slots this component. Listen for one of the two, not both, or one press is handled twice.
  *
  * @csspart header - The header bar.
+ * @csspart back - The back control, shown by `back`.
  * @csspart title - The default heading text.
  * @csspart actions - The header action group.
  * @csspart close - The close button.
  * @csspart body - The scrolling body.
  * @csspart footer - The footer.
+ *
+ * @cssproperty [--nile-app-shell-utility-size=32px] - Box the header's back and close controls sit in.
+ *
+ * @method goBack() - Emit `nile-back` then `nile-panel-back`, as the back control does.
  */
 @customElement('nile-app-shell-panel')
 export class NileAppShellPanel extends NileElement {
@@ -60,6 +62,14 @@ export class NileAppShellPanel extends NileElement {
   @property({ type: Boolean, reflect: true, attribute: 'no-header' })
   noHeader: boolean = false;
 
+  /** Shows a back control at the start of the header for a sub-view; the panel keeps no view stack and only emits `nile-back`. */
+  @property({ type: Boolean, reflect: true })
+  back: boolean = false;
+
+  /** Accessible name of the back control. */
+  @property({ type: String })
+  backLabel: string = 'Back';
+
   /** Drops the close button — for a panel the page closes its own way. */
   @property({ type: Boolean, reflect: true, attribute: 'no-close' })
   noClose: boolean = false;
@@ -72,10 +82,7 @@ export class NileAppShellPanel extends NileElement {
   @property({ type: String })
   shell?: string;
 
-  /**
-   * Mirrors the shell's panel mode. Set by the shell; treat it as read-only and
-   * style against it (`nile-app-shell-panel[mode='overlay']`).
-   */
+  /** Mirrors the shell's panel mode. Set by the shell; treat it as read-only and style against it (`nile-app-shell-panel[mode='overlay']`). */
   @property({ type: String, reflect: true })
   mode: NileAppShellPanelMode = 'docked';
 
@@ -99,6 +106,12 @@ export class NileAppShellPanel extends NileElement {
     this.setAttribute('aria-label', this.label);
   }
 
+  /** Announce that the back control was pressed, as the page owns which view it goes back to: `nile-back`, then `nile-panel-back` for pages written against the shell's built-in panel chrome. */
+  public goBack(): void {
+    this.emit('nile-back');
+    this.emit('nile-panel-back');
+  }
+
   /** Close the panel through the shell. */
   public close(): void {
     this.shellLink.shell?.closePanel();
@@ -118,16 +131,31 @@ export class NileAppShellPanel extends NileElement {
   public render(): TemplateResult {
     return html`
       <header class="header" part="header">
+        ${this.back
+          ? html`<nile-button
+              class="back utility-control"
+              part="back"
+              variant="ghost"
+              circle
+              title=${this.backLabel}
+              aria-label=${this.backLabel}
+              @click=${() => this.goBack()}
+            >
+              ${renderGlyph('ng-arrow-left', 20, 'currentColor')}
+            </nile-button>`
+          : ''}
         <slot name="header">
           <span class="heading">
-            <span class="mark">${renderGlyph('ng-sparkles', 20, 'currentColor')}</span>
+            <span class="mark"
+              >${renderGlyph('ng-sparkles', 20, 'currentColor')}</span
+            >
             <h2 class="title" part="title">${this.label}</h2>
           </span>
         </slot>
         <div class="actions" part="actions">
           <slot name="actions"></slot>
           <nile-button
-            class="close"
+            class="close utility-control"
             part="close"
             variant="ghost"
             circle
@@ -135,7 +163,7 @@ export class NileAppShellPanel extends NileElement {
             aria-label="Close ${this.label}"
             @click=${() => this.close()}
           >
-            ${renderGlyph('ng-x-close', 24, 'currentColor')}
+            ${renderGlyph('ng-x-close', 20, 'currentColor')}
           </nile-button>
         </div>
       </header>

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

@@ -7,10 +7,7 @@
 
 import { css } from 'lit';
 
-/**
- * AppShellSideNav CSS. The shell owns the track width; this owns what happens
- * inside it — a pinned header, a scrolling body, a pinned footer.
- */
+/** AppShellSideNav CSS: the shell owns the track width, this owns what happens inside it — a pinned header, a scrolling body, a pinned footer. */
 export const styles = css`
   :host {
     box-sizing: border-box;

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

@@ -12,9 +12,7 @@ import { AppShellController } from '../nile-app-shell/shell-controller';
 import NileElement from '../internal/nile-element';
 
 /**
- * @summary The shell's left region — the navigation track. Assigns itself to the
- * shell's `side-nav` slot and mirrors the shell's rail state, so nav content can
- * style against it.
+ * @summary The shell's left region — the navigation track; mirrors the shell's rail state so nav content can style against it.
  *
  * @status stable
  * @since 2.0
@@ -31,10 +29,8 @@ import NileElement from '../internal/nile-element';
  * @csspart body - The scrolling nav body.
  * @csspart footer - The pinned footer.
  *
- * @cssproperty [--nile-app-shell-side-nav-padding=12px] - Body inset. 12 + 40 +
- *   12 is what makes a 64px rail.
- * @cssproperty [--nile-app-shell-side-nav-bg=transparent] - Surface behind the
- *   nav. Transparent by default: the nav and the page share one.
+ * @cssproperty [--nile-app-shell-side-nav-padding=12px] - Body inset.
+ * @cssproperty [--nile-app-shell-side-nav-bg=transparent] - Surface behind the nav; transparent so the nav and page share one.
  */
 @customElement('nile-app-shell-side-nav')
 export class NileAppShellSideNav extends NileElement {
@@ -44,11 +40,7 @@ export class NileAppShellSideNav extends NileElement {
 
   private shellLink = new AppShellController(this);
 
-  /**
-   * Mirrors the shell's effective rail state — the user's preference, or a rail
-   * forced by the shell's width. Set by the shell; treat it as read-only and
-   * style against it (`nile-app-shell-side-nav[collapsed] .label`).
-   */
+  /** Mirrors the shell's effective rail state. Set by the shell; treat it as read-only and style against it (`nile-app-shell-side-nav[collapsed] .label`). */
   @property({ type: Boolean, reflect: true })
   collapsed: boolean = false;
 

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

@@ -144,7 +144,7 @@ export const styles = css`
     color: var(--nile-badge-color-font-gray, var(--ng-componentcolors-utility-gray-700));
     border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
     border-style: solid;
-    border-color: var(--nile-badge-color-border-color-gray, var(--ng-componentcolors-utility-gray-200));
+    border-color: var(--nile-badge-color-border-color-gray, var(--ng-componentcolors-utility-gray-300));
     background: var(--nile-badge-color-background-gray, var(--ng-componentcolors-utility-gray-50));
   }
 
@@ -193,7 +193,7 @@ export const styles = css`
   }
 
   .badge--gray.badge--pill-outline {
-    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-200));
+    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-300));
   }
 
 

package/src/nile-button-toggle/nile-button-toggle.css.ts

@@ -74,12 +74,12 @@ export const styles = css`
 
   .nile-button-toggle__active {
     background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-brand-primary) );
-    color: var(--nile-colors-dark-900, var(--ng-colors-bg-brand-solid));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-brand-primary-900));
   }
 
   .nile-button-toggle__active:hover {
     background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-brand-primary));
-    color: var(--nile-colors-dark-900, var(--ng-colors-bg-brand-solid));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-brand-primary-900));
   }
 
   .nile-button-toggle__disabled {

package/src/nile-code-editor/nile-code-editor.ts

@@ -672,9 +672,9 @@ export class NileCodeEditor extends NileElement {
     return (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000 < 128;
   }
 
-  /** Applied in dark only so light is untouched.*/
+  /** One Dark in dark mode; light keeps CodeMirror's own active-line highlight. */
   getDarkThemeExtension(): Extension {
-    return this.isDarkTheme() ? [oneDarkTheme, highlightActiveLine()] : [];
+    return [highlightActiveLine(), ...(this.isDarkTheme() ? [oneDarkTheme] : [])];
   }
 
   getDefaultSyntaxHighlightingExtension(){

package/src/nile-menu-item/nile-menu-item.css.ts

@@ -94,7 +94,7 @@ export const styles = css`
   }
 
   :host(:hover:not([active], [aria-disabled='true'], :focus-visible)) .menu-item {
-    background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-secondary-hover));
+    background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-primary-hover));
     color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-hover));
   }
 

package/src/nile-rich-text-editor/nile-rich-text-editor.css.ts

@@ -12,6 +12,7 @@ export const styles = css`
     position: relative;
     display: block;
     font-family: inherit;
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
 
 
@@ -41,6 +42,7 @@ export const styles = css`
     width: 100%;
     padding: 12px;
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     border-radius: 0 0 8px 8px;
     outline: none;
     tab-size: 4;
@@ -81,6 +83,7 @@ nile-rte-preview {
   background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   box-sizing: border-box;
   word-wrap: break-word;
+  color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
 }
 
   nile-rich-text-editor[disabled] nile-rte-preview {
@@ -246,7 +249,7 @@ nile-rte-preview figure.rte-image img {
 nile-rte-preview figure.rte-image figcaption {
   margin-top: 6px;
   font-size: 0.875em;
-  color: var(--nile-colors-neutral-600, var(--ng-colors-text-secondary));
+  color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));
 }
 
 .editor figure.rte-image {
@@ -273,7 +276,7 @@ nile-rich-text-editor[disabled] .editor figure.rte-image {
 
 .editor.empty::before {
   content: attr(data-placeholder);
-  color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary));
+  color: var(--nile-colors-neutral-500, var(--ng-colors-text-placeholder));
   position: absolute;
   font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
   pointer-events: none;

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

@@ -58,7 +58,7 @@ export const styles = css`
   }
 
   .alert--success {
-    border: 1px solid var(--nile-toast-color-border-success, var(--ng-colors-border-secondary-alt));
+    border: 1px solid var(--nile-toast-color-border-success, var(--ng-colors-border-primary));
     background: var(--nile-toast-color-background-success, var(--ng-colors-bg-primary-alt));
     box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
   }
@@ -68,7 +68,7 @@ export const styles = css`
   }
 
   .alert--info {
-    border: 1px solid var(--nile-toast-color-border-info, var(--ng-colors-border-secondary-alt));
+    border: 1px solid var(--nile-toast-color-border-info, var(--ng-colors-border-primary));
     background: var(--nile-toast-color-background-info, var(--ng-colors-bg-primary-alt));
     box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
   }
@@ -78,7 +78,7 @@ export const styles = css`
   }
 
   .alert--warning {
-    border: 1px solid var(--nile-toast-color-border-warning, var(--ng-colors-border-secondary-alt));
+    border: 1px solid var(--nile-toast-color-border-warning, var(--ng-colors-border-primary));
     background: var(--nile-toast-color-background-warning, var(--ng-colors-bg-primary-alt));
     box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
   }
@@ -88,7 +88,7 @@ export const styles = css`
   }
 
   .alert--error {
-    border: 1px solid var(--nile-toast-color-border-error, var(--ng-colors-border-secondary-alt));
+    border: 1px solid var(--nile-toast-color-border-error, var(--ng-colors-border-primary));
     background: var(--nile-toast-color-background-error, var(--ng-colors-bg-primary-alt));
     box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
   }
@@ -98,7 +98,7 @@ export const styles = css`
   }
 
   .alert--gray {
-    border: 1px solid var(--nile-toast-color-border-gray, var(--ng-colors-border-secondary-alt));
+    border: 1px solid var(--nile-toast-color-border-gray, var(--ng-colors-border-primary));
     background: var(--nile-toast-color-background-gray, var(--ng-colors-bg-primary-alt));
     box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
   }