@aquera/nile-elements 1.2.1-beta-1.0 → 1.2.1-beta-1.1

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

@@ -0,0 +1,100 @@
+/**
+ * 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: block;
+    height: 100%;
+  }
+  .sidebar {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: white;
+    border-right: 1px solid var(--nile-colors-neutral-400);
+    transition: width 0.3s ease;
+    position: relative;
+  }
+  .toggle-btn {
+    position: absolute;
+    top: var(--nile-spacing-2xl);
+    right: -14px;
+    z-index: 10;
+  }
+
+  nile-button.toggle-btn::part(base) {
+    width: 30px;
+    height: 30px;
+  }
+  :host(:not([collapsed])) .sidebar {
+    width: 216px;
+  }
+  :host([collapsed]) .sidebar {
+    width: 0px;
+  }
+  :host([collapsed]) .sidebar-nav {
+    display: none;
+  }
+  .sidebar-header {
+    display: flex;
+    justify-content: flex-end;
+  }
+  .sidebar-nav {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nile-spacing-xs);
+    padding-right: var(--nile-spacing-xl);
+    padding-top: var(--nile-spacing-2xl);
+    padding-bottom: var(--nile-spacing-2xl);
+  }
+
+  nile-side-bar-action-menu {
+    width: fit-content;
+    max-width: 400px;
+    min-width: 200px;
+  }
+
+  nile-side-bar-action-menu::part(menu__items-wrapper) {
+    width: 100%;
+    max-width: 400px;
+    padding-top: var(--nile-spacing-lg);
+    padding-bottom: var(--nile-spacing-lg);
+  }
+
+  nile-side-bar-action-menu-item::part(base) {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+    border-radius: 0;
+  }
+
+  nile-side-bar-action-menu-item::part(label) {
+    display: block;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* Transition for sidebar button when it is closed and opened */
+  nile-side-bar-action::part(panel),
+  nile-side-bar-action-menu {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease-in;
+    transition-delay: 50ms;
+  }
+
+  nile-side-bar-action:hover::part(panel),
+  nile-side-bar-action:hover nile-side-bar-action-menu {
+    opacity: 1;
+    pointer-events: auto;
+    transition-delay: 0ms;
+  }
+`;

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

@@ -0,0 +1,235 @@
+/**
+ * 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, state } from 'lit/decorators.js';
+import { styles } from './nile-inline-sidebar.css';
+import NileElement from '../internal/nile-element';
+
+/**
+ * Nile inline sidebar component.
+ *
+ * @tag nile-inline-sidebar
+ */
+@customElement('nile-inline-sidebar')
+export class NileInlineSidebar extends NileElement {
+  @property({ type: Boolean, reflect: true }) collapsed = false;
+
+  @property({ type: Boolean, reflect: true, attribute: true }) fixed = false;
+
+  @property({ type: Boolean, reflect: true }) showTooltip = false;
+
+  @state() private activeIndex: number = -1;
+
+  @query('slot') private defaultSlot!: HTMLSlotElement;
+
+  private mutationObserver?: MutationObserver;
+
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  private get sidebarItems(): HTMLElement[] {
+    if (!this.defaultSlot) return [];
+    const assigned = this.defaultSlot.assignedElements({ flatten: true });
+    const items = assigned.flatMap(el =>
+      el.tagName.toLowerCase() === 'nile-inline-sidebar-item'
+        ? [el]
+        : Array.from(el.querySelectorAll('nile-inline-sidebar-item'))
+    );
+    return items as HTMLElement[];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('nile-click', this.handleItemSelect);
+    this.mutationObserver = new MutationObserver(() =>
+      this.syncActiveFromItems()
+    );
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.mutationObserver?.disconnect();
+    this.removeEventListener('nile-click', this.handleItemSelect);
+  }
+
+  firstUpdated() {
+    this.observeSidebarItems();
+    this.syncActiveFromItems();
+
+    if (this.fixed) {
+      this.collapsed = false;
+    }
+  }
+
+  private observeSidebarItems() {
+    if (!this.sidebarItems?.length || !this.mutationObserver) return;
+    this.sidebarItems.forEach(item =>
+      this.mutationObserver!.observe(item, {
+        attributes: true,
+        attributeFilter: ['active'],
+      })
+    );
+  }
+
+  private syncActiveFromItems() {
+    if (!this.sidebarItems?.length) return;
+    const activeIndex = this.sidebarItems.findIndex(item =>
+      item.hasAttribute('active')
+    );
+    if (activeIndex !== -1 && activeIndex !== this.activeIndex) {
+      this.activeIndex = activeIndex;
+      this.requestUpdate();
+    }
+  }
+
+  private handleItemSelect = (event: CustomEvent) => {
+    const selectedItem = event.detail.item as HTMLElement;
+    const index = this.sidebarItems.indexOf(selectedItem);
+
+    this.sidebarItems.forEach(
+      (item, i) => ((item as any).active = i === index)
+    );
+    this.activeIndex = index;
+
+    this.dispatchEvent(
+      new CustomEvent('nile-change', {
+        detail: { selectedItem, index },
+        bubbles: true,
+        composed: true,
+      })
+    );
+
+    this.requestUpdate();
+  };
+
+  private toggleCollapse() {
+    if (this.fixed) return;
+    this.collapsed = !this.collapsed;
+    console.log('[Sidebar] Toggled collapse →', this.collapsed);
+
+    this.dispatchEvent(
+      new CustomEvent('nile-toggle', {
+        detail: { collapsed: this.collapsed },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private handleMenuItemClick(index: number) {
+    const selectedItem = this.sidebarItems[index];
+    if (!selectedItem || selectedItem.hasAttribute('disabled')) return;
+
+    this.sidebarItems.forEach(
+      (item, i) => ((item as any).active = i === index)
+    );
+    this.activeIndex = index;
+    const text = selectedItem.textContent?.trim() || '';
+    const href = (selectedItem as any).href;
+    this.dispatchEvent(
+      new CustomEvent('nile-click', {
+        detail: { item: selectedItem, href, text },
+        bubbles: true,
+        composed: true,
+      })
+    );
+
+    if (href) window.location.href = href;
+
+    this.requestUpdate();
+  }
+
+  private get menuItemsTemplate() {
+    if (!this.sidebarItems?.length) return null;
+
+    return this.sidebarItems.map((item, index) => {
+      const content = html`
+        <nile-side-bar-action-menu-item
+          ?disabled=${item.hasAttribute('disabled')}
+          ?active=${this.activeIndex === index}
+          @click=${() => this.handleMenuItemClick(index)}
+        >
+          ${item.textContent}
+        </nile-side-bar-action-menu-item>
+      `;
+
+      return this.showTooltip
+        ? html`
+            <nile-tooltip content=${item.textContent} hoist placement="right">
+              ${content}
+            </nile-tooltip>
+          `
+        : content;
+    });
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="sidebar" part="base">
+        <div class="sidebar-header" part="header">
+          ${!this.fixed
+            ? this.collapsed
+              ? html`
+                  <nile-side-bar-action
+                    class="toggle-action"
+                    placement="bottom-start"
+                    hoist
+                    open
+                    triggerDropdown="hover"
+                  >
+                    <nile-button
+                      slot="trigger"
+                      class="toggle-btn"
+                      variant="tertiary"
+                      @click=${this.toggleCollapse}
+                    >
+                      <nile-icon name="menu_close"></nile-icon>
+                    </nile-button>
+                    <nile-side-bar-action-menu>
+                      ${this.menuItemsTemplate}
+                    </nile-side-bar-action-menu>
+                  </nile-side-bar-action>
+                `
+              : html`
+                  <nile-button
+                    class="toggle-btn"
+                    variant="tertiary"
+                    @click=${this.toggleCollapse}
+                  >
+                    <nile-icon name="menu_open"></nile-icon>
+                  </nile-button>
+                `
+            : null}
+        </div>
+
+        <nav
+          class="sidebar-nav"
+          style=${this.collapsed ? 'display:none;' : ''}
+          part="nav-items"
+        >
+          <slot
+            @slotchange=${() => {
+              this.requestUpdate();
+              this.observeSidebarItems();
+              this.syncActiveFromItems();
+            }}
+          ></slot>
+        </nav>
+      </div>
+    `;
+  }
+}
+
+export default NileInlineSidebar;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-inline-sidebar': NileInlineSidebar;
+  }
+}

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

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

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

@@ -0,0 +1,44 @@
+/**
+* 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: block;
+}
+
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--nile-spacing-xs);
+}
+
+
+:host([divider="false"]) .group {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.group-label {
+  font-size: var(--nile-type-scale-3);
+  font-weight: var(--nile-font-weight-semibold);
+  text-transform: uppercase;
+  color:   var(--nile-colors-neutral-500);  
+  margin: var(--nile-spacing-xs) 0 var(--nile-spacing-xs) var(--nile-spacing-md);
+  letter-spacing: 0.05em;
+}
+
+.group-items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--nile-spacing-xs);
+}
+`;
+
+export default [styles];

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

@@ -0,0 +1,62 @@
+/**
+ * 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-group.css';
+import NileElement from '../internal/nile-element';
+
+/**
+ * Nile inline sidebar group.
+ *
+ * @tag nile-inlinesidebar-group
+ *
+ * @attr label - Optional group label
+ * @attr divider - Whether to show a divider below the group (default: true)
+ *
+ * @slot - Inline sidebar items
+ * @slot label - Optional label/header for the group
+ */
+@customElement('nile-inline-sidebar-group')
+export class NileInlineSidebarGroup extends NileElement {
+  @property({ type: String }) label: string = '';
+  @property({ type: Boolean, reflect: true }) divider: boolean = false;
+
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="group">
+        ${this.label || this.hasLabelSlot()
+          ? html`
+              <div class="group-label">
+                <slot name="label">${this.label}</slot>
+              </div>
+            `
+          : null}
+        <div class="group-items">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  private hasLabelSlot(): boolean {
+    const slot = this.shadowRoot?.querySelector('slot[name="label"]');
+    return !!slot;
+  }
+}
+
+export default NileInlineSidebarGroup;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-inline-sidebar-group': NileInlineSidebarGroup;
+  }
+}

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

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

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

@@ -0,0 +1,65 @@
+/**
+* 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';
+
+/**
+ * InlinesidebarItem CSS
+ */
+export const styles = css`
+:host {
+  display: block;
+  font-family: var(--nile-font-family-sans-serif);
+  font-size: var(--nile-type-scale-3);
+  color: var(--nile-colors-dark-900);
+  cursor: pointer;
+  user-select: none;
+}
+
+.item {
+  padding: var(--nile-spacing-lg) var(--nile-spacing-md);
+  border-radius: var(--nile-radius-sm);
+  transition: background 0.2s, color 0.2s;
+}
+
+ 
+:host(:not([disabled])) .item:hover {
+  background: var(--nile-colors-neutral-400);
+}
+
+ 
+:host([active]) .item {
+  background: var(--nile-colors-primary-100);
+  font-weight: 500;
+}
+
+ 
+:host([disabled]) {
+  color:   var(--nile-colors-neutral-500);  
+  cursor: not-allowed;
+}
+
+:host([disabled]) .item {
+  pointer-events: none;
+}
+a {
+    color: inherit;
+    text-decoration: none;
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  a:visited,
+  a:hover,
+  a:active,
+  a:focus {
+    color: inherit;
+    text-decoration: none;
+  }
+
+`;

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

@@ -0,0 +1,83 @@
+/**
+ * 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.css';
+import NileElement from '../internal/nile-element';
+
+/**
+ * Nile inline sidebar item.
+ *
+ * @tag nile-inlinesidebar-item
+ *
+ * @attr active - Marks the item as active (selected).
+ * @attr disabled - Marks the item as disabled (non-interactive).
+ * @attr href - Optional URL to navigate to when the item is clicked.
+ *
+ * @slot - Default slot for the item text or content.
+ *
+ * @fires nile-select - Emitted when the item is clicked (not disabled).
+ *   detail: { item: this, href?: string }
+ */
+@customElement('nile-inline-sidebar-item')
+export class NileInlineSidebarItem extends NileElement {
+  @property({ type: Boolean, reflect: true }) active = false;
+  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: String }) href?: string;
+
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  private handleClick(e: Event) {
+    if (this.disabled) {
+      e.preventDefault();
+      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 },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  
+    if (this.href) {
+      window.location.href = this.href;
+    }
+  }
+  
+
+  public render(): TemplateResult {
+    return html`
+      <div class="item" @click=${this.handleClick} role="button" tabindex="0">
+        ${this.href
+          ? html`<a href=${this.href} @click=${(e: Event) => e.preventDefault()}><slot></slot></a>`
+          : html`<slot></slot>`}
+      </div>
+    `;
+  }
+}
+
+export default NileInlineSidebarItem;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-inline-sidebar-item': NileInlineSidebarItem;
+  }
+}

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

@@ -15,7 +15,7 @@ export const styles = css`
     width: 100%;
     border: 1px solid var(--nile-colors-neutral-400);
     border-radius: var(--nile-radius-radius-xl);
-    background: white;
+    background: var(--nile-colors-white-base);
     box-sizing: border-box;
   }
 
@@ -26,7 +26,7 @@ export const styles = css`
   gap: 6px;
   padding: 8px;
   border-bottom: 1px solid var(--nile-colors-neutral-400);
-  background: white;
+  background: var(--nile-colors-white-base);
   border-radius: 8px 8px 0 0;
 
   width: 100%;            
@@ -38,7 +38,7 @@ export const styles = css`
     min-height: 160px;
     width: 100%;
     padding: 12px;
-    background: white;
+    background: var(--nile-colors-white-base);
     border-radius: 0 0 8px 8px;
     outline: none;
     tab-size: 4;
@@ -56,7 +56,7 @@ nile-rte-preview {
   padding: 12px;
   border: 1px dashed var(--nile-colors-neutral-400);
   border-radius: var(--nile-radius-radius-xl);
-  background: white;
+  background: var(--nile-colors-white-base);
   box-sizing: border-box;
   word-wrap: break-word;
 }
@@ -73,7 +73,7 @@ nile-rte-preview {
   nile-rte-toolbar-item > button,
   nile-rte-toolbar button {
     border: 1px solid var(--nile-colors-neutral-400);
-    background: white;
+    background: var(--nile-colors-white-base);
     border-radius: var(--nile-radius-radius-lg);
     cursor: pointer;
   }
@@ -82,7 +82,7 @@ nile-rte-preview {
 
   nile-rte-toolbar-item > button.active {
     border-color: #2563eb;
-    background: white;
+    background: var(--nile-colors-white-base);
   }