@aquera/nile-elements 1.6.7 → 1.6.9

package/src/nile-inline-sidebar-item/nile-inline-sidebar-item.ts

@@ -5,10 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, CSSResultArray, TemplateResult } from 'lit';
+import { html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-inline-sidebar-item.css';
 import NileElement from '../internal/nile-element';
+import { classMap } from 'lit/directives/class-map.js';
 
 /**
  * Nile inline sidebar item.
@@ -30,11 +31,50 @@ export class NileInlineSidebarItem extends NileElement {
   @property({ type: Boolean, reflect: true }) disabled = false;
   @property({ type: String }) href?: string;
   @property({ type: Boolean, reflect: true }) tooltip = false;
+  @property({ type: String, reflect: true, attribute: true }) variant?: 'minimal' | 'rich' = 'minimal';
+
+  /** Links this item to a `nile-inline-sidebar-panel` by matching its `name` property. */
+  @property({ type: String, reflect: true }) panel?: string;
 
   public static get styles(): CSSResultArray {
     return [styles];
   }
 
+
+  firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    this.syncBodyAndHeaderStates();
+  }
+
+  updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (changedProperties.has('disabled') || changedProperties.has('active')) {
+      this.syncBodyAndHeaderStates();
+    }
+  }
+
+  private syncBodyAndHeaderStates() {
+    const elements = [
+      this.querySelector('[slot="body"]'),
+      this.querySelector('[slot="header"]')
+    ] as (HTMLElement | null)[];
+
+    const props = {
+      disabled: this.disabled,
+      active: this.active
+    };
+
+    elements.forEach(el => {
+      if (!el) return;
+
+      Object.entries(props).forEach(([key, value]) => {
+        if (key in el) {
+          (el as any)[key] = value;
+        }
+      });
+    });
+  }
+
   connectedCallback() {
     super.connectedCallback();
     if (!this.hasAttribute('tabindex')) {
@@ -64,15 +104,15 @@ export class NileInlineSidebarItem extends NileElement {
       e.stopPropagation();
       return;
     }
-  
+
     const parent = this.closest('nile-inline-sidebar');
     if (parent) {
       const allItems = parent.querySelectorAll('nile-inline-sidebar-item');
       allItems.forEach((item) => (item as NileInlineSidebarItem).active = item === this);
     }
-  
+
     const text = this.textContent?.trim() || '';
-  
+
     this.dispatchEvent(
       new CustomEvent('nile-click', {
         detail: { item: this, href: this.href, text },
@@ -80,7 +120,7 @@ export class NileInlineSidebarItem extends NileElement {
         composed: true,
       }),
     );
-  
+
     if (this.href) {
       window.location.href = this.href;
     }
@@ -93,17 +133,42 @@ export class NileInlineSidebarItem extends NileElement {
   public render(): TemplateResult {
     return html`
       <div
-        class="item"
+        class=${classMap({ 'item': true, 'item--rich': this.variant === 'rich' })}
         @click=${this.handleClick}
         role="menuitem"
+        style=${this.variant === 'rich' ? 'border-radius: 0px;' : ''}
         aria-disabled=${this.disabled}
       >
-        ${this.href
-          ? html`<a href=${this.href} @click=${(e: Event) => e.preventDefault()}><slot></slot></a>`
-          : html`<slot></slot>`}
+        ${this.variant === 'minimal'
+          ? this.href
+            ? html`<a href=${this.href} @click=${(e: Event) => e.preventDefault()}><slot></slot></a>`
+            : html`<slot></slot>`
+          : this.href
+            ? html`<a
+                href=${this.href}
+                @click=${(e: Event) => e.preventDefault()}
+              >
+                <div class="header-content" part="header-content">
+                  <slot name="header"></slot>
+                </div>
+                <div class="body-content" part="body-content">
+                  <slot name="body"></slot>
+                </div>
+              </a>`
+            : html`
+                <div class="header-content" part="header-content">
+                  <slot name="header"></slot>
+                </div>
+                <div class="body-content" part="body-content">
+                  <slot name="body"></slot>
+                </div>
+              `}
       </div>
     `;
   }
+
+
+  
 }
 
 export default NileInlineSidebarItem;

package/src/nile-inline-sidebar-item-body/index.ts

@@ -0,0 +1 @@
+export { NileInlineSidebarItemBody } from './nile-inline-sidebar-item-body';

package/src/nile-inline-sidebar-item-body/nile-inline-sidebar-item-body.css.ts

@@ -0,0 +1,64 @@
+/**
+* Copyright Aquera Inc 2026
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+import {css} from 'lit';
+
+export const styles = css`
+	:host {
+		display: block;
+		min-width: 0;
+		font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+	}
+	.item-body {
+		display: flex;
+		align-items: flex-start;
+		min-width: 0;
+		padding-top: var(--nile-spacing-xxsmall, var(--ng-spacing-xxs));
+	}
+	.body-content {
+		box-sizing: border-box;
+		min-width: 0;
+		flex: 1 1 0%;
+		max-width: 100%;
+		color: var(--nile-colors-dark-500, var(--ng-componentcolors-alpha-black-50));
+		font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+		font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+		line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));
+	}
+	.body-content nile-lite-tooltip {
+		display: block;
+		min-width: 0;
+		max-width: 100%;
+	}
+	.body-text {
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		word-break: break-word;
+		overflow-wrap: anywhere;
+		-webkit-line-clamp: var(--line-clamp);
+		line-clamp: var(--line-clamp);
+	}
+	/* Slotted block/paragraph nodes need the same clamp (slot composition) */
+	.body-text ::slotted(*) {
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		word-break: break-word;
+		overflow-wrap: anywhere;
+		-webkit-line-clamp: var(--line-clamp);
+		line-clamp: var(--line-clamp);
+		margin-block: 0;
+	}
+	:host([disabled]) .body-content {
+		color: var(--nile-colors-neutral-300, var(--ng-colors-text-disabled));
+	}
+`;
+
+export default [styles];

package/src/nile-inline-sidebar-item-body/nile-inline-sidebar-item-body.ts

@@ -0,0 +1,110 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html, CSSResultArray, TemplateResult} from 'lit';
+import { customElement, property, state, query} from 'lit/decorators.js';
+import {styles} from './nile-inline-sidebar-item-body.css';
+import NileElement from '../internal/nile-element';
+
+
+/**
+ * Nile inline-sidebar-item-body component.
+ *
+ * @tag nile-inline-sidebar-item-body
+ *
+ */
+@customElement('nile-inline-sidebar-item-body')
+export class NileInlineSidebarItemBody extends NileElement {
+
+	/** Maximum number of visible lines before text is truncated with an ellipsis. */
+	@property({ type: Number, reflect: true }) lines: number = 2;
+
+	@property({ type: String, reflect: true }) content: string = '';
+
+	@property({ type: Boolean, reflect: true }) showTooltip: boolean = false;
+
+	@state() private isTruncated = false;
+
+	@query('.body-content') private bodyContentEl!: HTMLElement;
+
+	@property({ type: Boolean, reflect: true, attribute: true }) disabled: boolean = false;
+	@property({ type: Boolean, reflect: true, attribute: true }) active: boolean = false;
+
+	private resizeObserver?: ResizeObserver;
+
+	/**
+	 * The styles for nile-inline-sidebar-item-body
+	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+	 */
+	public static get styles(): CSSResultArray {
+		return [styles];
+	}
+
+	/* #endregion */
+
+	/* #region Methods */
+
+	firstUpdated() {
+		this.checkTruncation();
+		if (this.bodyContentEl) {
+			this.resizeObserver = new ResizeObserver(() => this.checkTruncation());
+			this.resizeObserver.observe(this.bodyContentEl);
+		}
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.resizeObserver?.disconnect();
+	}
+
+	private checkTruncation() {
+		if (this.bodyContentEl) {
+			const truncated = this.bodyContentEl.scrollHeight > this.bodyContentEl.clientHeight;
+			if (truncated !== this.isTruncated) {
+				this.isTruncated = truncated;
+			}
+		}
+	}
+
+	private get contentTemplate(): TemplateResult {
+		const body = html`<div class="body-text" part="body-text">${this.content}</div>`;
+
+		return this.isTruncated && this.showTooltip
+			? html`<nile-lite-tooltip content=${this.content} hoist>${body}</nile-lite-tooltip>`
+			: body;
+	}
+
+	/**
+	 * Render method
+	 * @slot This is a slot test
+	 */
+	public render(): TemplateResult {
+		return html`
+		<div class="item-body" part="item-body">
+		<div class="prefix-content" part="prefix-content">
+			<slot name="prefix"></slot>
+		</div>
+		<div class="body-content" part="body-content" style="--line-clamp: ${this.lines? this.lines : 2}">
+			${this.content ? this.contentTemplate : html`<div class="body-text" part="body-text"><slot></slot></div>`}
+		</div>
+		<div class="suffix-content" part="suffix-content">
+			<slot name="suffix"></slot>
+		</div>
+		</div>
+			`;
+	}
+
+	/* #endregion */
+}
+
+export default NileInlineSidebarItemBody;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-inline-sidebar-item-body': NileInlineSidebarItemBody;
+  }
+}

package/src/nile-inline-sidebar-item-header/index.ts

@@ -0,0 +1 @@
+export { NileInlineSidebarItemHeader } from './nile-inline-sidebar-item-header';

package/src/nile-inline-sidebar-item-header/nile-inline-sidebar-item-header.css.ts

@@ -0,0 +1,38 @@
+/**
+* Copyright Aquera Inc 2026
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+import {css} from 'lit';
+
+export const styles = css`
+	:host {
+		font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+	}
+	.item-header {
+		display: flex;
+		gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+		width: 100%;
+		height: 100%;
+		align-items: center;
+	}
+	.item-header .body-content .header-text {
+		display: block;
+		font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));
+		font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));
+		line-height: var(--nile-line-height-medium, var(--ng-line-height-text-sm));
+		color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+	}
+	:host([active]) .item-header .body-content .header-text {
+		font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
+		color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700));
+	}
+
+	:host([disabled]) .item-header .body-content .header-text {
+		color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
+	}
+`;
+
+export default [styles];

package/src/nile-inline-sidebar-item-header/nile-inline-sidebar-item-header.ts

@@ -0,0 +1,69 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html, CSSResultArray, TemplateResult } from 'lit';
+import { customElement, property} from 'lit/decorators.js';
+import {styles} from './nile-inline-sidebar-item-header.css';
+import NileElement from '../internal/nile-element';
+
+
+/**
+ * Nile inline-sidebar-item-header component.
+ *
+ * @tag nile-inline-sidebar-item-header
+ *
+ */
+@customElement('nile-inline-sidebar-item-header')
+export class NileInlineSidebarItemHeader extends NileElement {
+	@property({ type: Boolean, reflect: true, attribute: true }) active = false;
+	@property({ type: Boolean, reflect: true, attribute: true }) disabled = false;
+
+	/**
+	 * The styles for nile-inline-sidebar-item-header
+	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+	 */
+	public static get styles(): CSSResultArray {
+		return [styles];
+	}
+
+	/* #endregion */
+
+	/* #region Methods */
+
+	/**
+	 * Render method
+	 * @slot This is a slot test
+	 */
+	public render(): TemplateResult {
+		return html`
+		<div class="item-header" part="item-header">
+		<div class="prefix-content" part="prefix-content">
+		<slot name="prefix"></slot>
+		</div>
+		<div class="body-content" part="body-content">
+		<div class="header-text" part="header-text">
+			<slot name="text"></slot>
+			<slot></slot>
+		</div>
+		</div>
+		<div class="suffix-content" part="suffix-content">
+			<slot name="suffix"></slot>
+		</div>
+		</div>
+			`;
+	}
+
+	/* #endregion */
+}
+
+export default NileInlineSidebarItemHeader;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-inline-sidebar-item-header': NileInlineSidebarItemHeader;
+  }
+}

package/src/nile-inline-sidebar-panel/index.ts

@@ -0,0 +1 @@
+export { NileInlineSidebarPanel } from './nile-inline-sidebar-panel';

package/src/nile-inline-sidebar-panel/nile-inline-sidebar-panel.css.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit';
+
+export const styles = css`
+  :host {
+    display: none;
+    height: 100%;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  :host([active]) {
+    display: flex;
+    flex: 1;
+  }
+
+  .panel {
+    flex: 1;
+    height: 100%;
+    overflow: auto;
+  }
+`;
+
+export default [styles];

package/src/nile-inline-sidebar-panel/nile-inline-sidebar-panel.ts

@@ -0,0 +1,53 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html, CSSResultArray, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './nile-inline-sidebar-panel.css';
+import NileElement from '../internal/nile-element';
+
+/**
+ * Content panel associated with a `nile-inline-sidebar-item`.
+ * Linked via the item's `panel` property matching this panel's `name`.
+ *
+ * @tag nile-inline-sidebar-panel
+ *
+ * @attr name - Identifier that links this panel to a sidebar item's `panel` property.
+ * @attr active - Whether this panel is currently visible.
+ *
+ * @slot - Default slot for panel content.
+ *
+ * @csspart base - The panel container.
+ */
+@customElement('nile-inline-sidebar-panel')
+export class NileInlineSidebarPanel extends NileElement {
+  /** Identifier that links this panel to a sidebar item's `panel` property. */
+  @property({ type: String, reflect: true }) name = '';
+
+  /** Whether this panel is currently visible. */
+  @property({ type: Boolean, reflect: true }) active = false;
+
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="panel" part="base">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+export default NileInlineSidebarPanel;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-inline-sidebar-panel': NileInlineSidebarPanel;
+  }
+}

package/src/nile-inline-sidebar-panel-group/index.ts

@@ -0,0 +1 @@
+export { NileInlineSidebarPanelGroup } from './nile-inline-sidebar-panel-group';

package/src/nile-inline-sidebar-panel-group/nile-inline-sidebar-panel-group.css.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit';
+
+export const styles = css`
+  :host {
+    display: flex;
+    height: 100%;
+    width: 100%;
+  }
+
+  .panel-group {
+    display: flex;
+    height: 100%;
+    width: 100%;
+  }
+
+  :host([placement='right']) .panel-group {
+    flex-direction: row-reverse;
+  }
+
+  .sidebar-container {
+    display: flex;
+    flex-shrink: 0;
+  }
+
+  .panel-container {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    display: flex;
+    overflow: hidden;
+  }
+`;
+
+export default [styles];

package/src/nile-inline-sidebar-panel-group/nile-inline-sidebar-panel-group.ts

@@ -0,0 +1,101 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html, CSSResultArray, TemplateResult } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { styles } from './nile-inline-sidebar-panel-group.css';
+import NileElement from '../internal/nile-element';
+import type { NileInlineSidebarPanel } from '../nile-inline-sidebar-panel/nile-inline-sidebar-panel';
+
+/**
+ * Layout container that positions a `nile-inline-sidebar` beside one or more
+ * `nile-inline-sidebar-panel` elements. Handles panel switching when sidebar
+ * items are clicked.
+ *
+ * @tag nile-inline-sidebar-panel-group
+ *
+ * @attr placement - Mirror of the sidebar's placement. Controls flex direction.
+ *
+ * @slot sidebar - Slot for the `nile-inline-sidebar` element.
+ * @slot - Default slot for `nile-inline-sidebar-panel` elements.
+ *
+ * @csspart base - The outer flex container.
+ * @csspart sidebar-container - Wrapper around the sidebar slot.
+ * @csspart panel-container - Wrapper around the panel slot.
+ */
+@customElement('nile-inline-sidebar-panel-group')
+export class NileInlineSidebarPanelGroup extends NileElement {
+  /** Mirrors the sidebar's placement to control layout direction. */
+  @property({ type: String, reflect: true }) placement: 'left' | 'right' = 'left';
+
+  @query('slot:not([name])') private defaultSlot!: HTMLSlotElement;
+
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('nile-click', this.handleSidebarItemClick);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('nile-click', this.handleSidebarItemClick);
+  }
+
+  private get panels(): NileInlineSidebarPanel[] {
+    if (!this.defaultSlot) return [];
+    return this.defaultSlot
+      .assignedElements({ flatten: true })
+      .filter(
+        (el): el is NileInlineSidebarPanel =>
+          el.tagName.toLowerCase() === 'nile-inline-sidebar-panel'
+      );
+  }
+
+  private handleSidebarItemClick = (event: Event) => {
+    const detail = (event as CustomEvent).detail;
+    const panelName: string | undefined = detail?.item?.panel;
+    if (!panelName) return;
+
+    this.activatePanel(panelName);
+  };
+
+  /** Activate a panel by name, deactivating all others. */
+  public activatePanel(name: string) {
+    const allPanels = this.panels;
+    allPanels.forEach(panel => {
+      panel.active = panel.name === name;
+    });
+
+    this.emit('nile-panel-change', { panel: name });
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="panel-group" part="base">
+        <div class="sidebar-container" part="sidebar-container">
+          <slot name="sidebar"></slot>
+        </div>
+        <div class="panel-container" part="panel-container">
+          <slot
+            @slotchange=${() => this.requestUpdate()}
+          ></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+export default NileInlineSidebarPanelGroup;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-inline-sidebar-panel-group': NileInlineSidebarPanelGroup;
+  }
+}

package/src/nile-nav-tab/index.ts

@@ -0,0 +1 @@
+export { NileNavTab } from './nile-nav-tab';