@arclux/arc-ui 1.0.0

package/src/navigation/top-bar.js

@@ -0,0 +1,263 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+/**
+ * @arc-prism hybrid — display works without JS; mobile menu toggle requires JS
+ */
+export class ArcTopBar extends LitElement {
+  static properties = {
+    heading:      { type: String },
+    fixed:        { type: Boolean, reflect: true },
+    menuOpen:     { type: Boolean, attribute: 'menu-open', reflect: true },
+    mobileMenu:   { type: String, attribute: 'mobile-menu' },
+    menuPosition: { type: String, attribute: 'menu-position' },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: block;
+        width: 100%;
+        z-index: 100;
+      }
+
+      :host([fixed]) {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+      }
+
+      .topbar {
+        position: relative;
+        display: flex;
+        align-items: center;
+        height: var(--nav-height);
+        padding: 0 var(--space-lg);
+        background: color-mix(in srgb, var(--bg-deep) 85%, transparent);
+        backdrop-filter: blur(12px) saturate(130%);
+        -webkit-backdrop-filter: blur(12px) saturate(130%);
+        border-bottom: 1px solid var(--border-subtle);
+        gap: var(--space-md);
+      }
+
+      .topbar__glow {
+        position: absolute;
+        bottom: -1px;
+        left: 20%;
+        right: 20%;
+        height: 1px;
+        background: linear-gradient(90deg, transparent, rgba(var(--accent-secondary-rgb), 0.2), rgba(var(--accent-primary-rgb), 0.15), transparent);
+        opacity: 0;
+        transition: opacity var(--transition-slow);
+        pointer-events: none;
+      }
+
+      :host([scrolled]) .topbar__glow {
+        opacity: 1;
+      }
+
+      .topbar__brand {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        color: var(--text-primary);
+        text-decoration: none;
+        flex: 0 0 auto;
+        overflow: visible;
+      }
+
+      .topbar__heading {
+        font-family: var(--font-body);
+        font-size: var(--wordmark-size);
+        font-weight: var(--wordmark-weight);
+        letter-spacing: var(--wordmark-spacing);
+        text-transform: uppercase;
+      }
+
+      .topbar__center {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .topbar__actions {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        flex-shrink: 0;
+      }
+
+      .topbar__menu-btn {
+        display: none;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        min-width: 36px;
+        aspect-ratio: 1;
+        background: none;
+        border: 1px solid var(--border-subtle);
+        color: var(--text-primary);
+        cursor: pointer;
+        padding: 0;
+        border-radius: var(--radius-sm);
+        transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
+      }
+
+      .topbar__menu-btn:hover {
+        background: var(--bg-hover);
+        border-color: var(--border-default);
+      }
+
+      .topbar__menu-btn:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-glow);
+      }
+
+      .topbar__menu-btn--open {
+        border-color: rgba(var(--accent-primary-rgb), 0.3);
+        background: rgba(var(--accent-primary-rgb), 0.06);
+      }
+
+      .topbar__hamburger {
+        width: 16px;
+        height: 12px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+      }
+
+      .topbar__hamburger-line {
+        display: block;
+        width: 100%;
+        height: 1.5px;
+        background: currentColor;
+        border-radius: 1px; /* cosmetic rounding on 1.5px hamburger lines -- intentionally not tokenized */
+        transition: transform 400ms var(--ease-out-expo), opacity 250ms ease, width 400ms var(--ease-out-expo);
+        transform-origin: center;
+      }
+
+      .topbar__hamburger-line:nth-child(2) {
+        width: 100%;
+      }
+
+      .topbar__menu-btn--open .topbar__hamburger-line:nth-child(1) {
+        transform: translateY(5.25px) rotate(45deg);
+      }
+
+      .topbar__menu-btn--open .topbar__hamburger-line:nth-child(2) {
+        opacity: 0;
+        width: 0;
+      }
+
+      .topbar__menu-btn--open .topbar__hamburger-line:nth-child(3) {
+        transform: translateY(-5.25px) rotate(-45deg);
+      }
+
+      @media (max-width: 900px) {
+        .topbar__menu-btn { display: flex; }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        :host *,
+        :host *::before,
+        :host *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.heading = '';
+    this.fixed = false;
+    this.menuOpen = false;
+    this.mobileMenu = 'sidebar';
+    this.menuPosition = 'left';
+    this._onExternalToggle = this._onExternalToggle.bind(this);
+    this._onScroll = this._onScroll.bind(this);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener('arc-mobile-menu-toggle', this._onExternalToggle);
+    window.addEventListener('scroll', this._onScroll, { passive: true });
+    this._onScroll();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('arc-mobile-menu-toggle', this._onExternalToggle);
+    window.removeEventListener('scroll', this._onScroll);
+  }
+
+  _onScroll() {
+    this.toggleAttribute('scrolled', window.scrollY > 20);
+  }
+
+  _onExternalToggle(e) {
+    if (this.mobileMenu !== 'nav') return;
+    if (e.target === this) return;
+    this.menuOpen = e.detail?.value ?? !this.menuOpen;
+  }
+
+  _toggleMenu() {
+    this.menuOpen = !this.menuOpen;
+    const eventName = this.mobileMenu === 'nav' ? 'arc-mobile-menu-toggle' : 'arc-toggle';
+    this.dispatchEvent(new CustomEvent(eventName, {
+      detail: { value: this.menuOpen },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _renderMenuButton() {
+    return html`
+      <button
+        class="topbar__menu-btn ${this.menuOpen ? 'topbar__menu-btn--open' : ''}"
+        @click=${this._toggleMenu}
+        aria-label="Toggle menu"
+        aria-expanded=${this.menuOpen ? 'true' : 'false'}
+        part="menu-btn"
+      >
+        <span class="topbar__hamburger">
+          <span class="topbar__hamburger-line"></span>
+          <span class="topbar__hamburger-line"></span>
+          <span class="topbar__hamburger-line"></span>
+        </span>
+      </button>
+    `;
+  }
+
+  render() {
+    const menuLeft = this.menuPosition !== 'right';
+
+    return html`
+      <header class="topbar" part="topbar">
+        ${menuLeft ? this._renderMenuButton() : ''}
+        <a class="topbar__brand" href="/" part="brand">
+          <slot name="logo"></slot>
+          ${this.heading ? html`<span class="topbar__heading">${this.heading}</span>` : ''}
+          <slot name="subtitle"></slot>
+        </a>
+        <div class="topbar__center" part="center">
+          <slot name="center"></slot>
+        </div>
+        <div class="topbar__actions" part="actions">
+          <slot name="actions"></slot>
+        </div>
+        ${!menuLeft ? this._renderMenuButton() : ''}
+        <div class="topbar__glow"></div>
+      </header>
+    `;
+  }
+}
+
+customElements.define('arc-top-bar', ArcTopBar);

package/src/navigation/tree-item.js

@@ -0,0 +1,38 @@
+import { LitElement, html, css } from 'lit';
+
+/**
+ * @arc-prism interactive — tree item, child of arc-tree-view
+ */
+export class ArcTreeItem extends LitElement {
+  static properties = {
+    label:    { type: String, reflect: true },
+    icon:     { type: String },
+    expanded: { type: Boolean, reflect: true },
+  };
+
+  static styles = css`
+    :host { display: contents; }
+  `;
+
+  constructor() {
+    super();
+    this.label = '';
+    this.icon = '';
+    this.expanded = false;
+  }
+
+  /** Nested arc-tree-item children */
+  get items() {
+    return [...this.querySelectorAll(':scope > arc-tree-item')];
+  }
+
+  get hasChildren() {
+    return this.items.length > 0;
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define('arc-tree-item', ArcTreeItem);

package/src/navigation/tree-view.js

@@ -0,0 +1,255 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+import './tree-item.js';
+
+export class ArcTreeView extends LitElement {
+  static properties = {
+    _items:    { state: true },
+    _selected: { state: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--font-body);
+        color: var(--text-primary);
+      }
+
+      .tree {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      .tree__group {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      .tree__item {
+        position: relative;
+      }
+
+      .tree__row {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+        width: 100%;
+        text-align: left;
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        color: var(--text-secondary);
+        background: none;
+        border: none;
+        padding: var(--space-xs) var(--space-sm);
+        border-radius: var(--radius-sm);
+        cursor: pointer;
+        transition: background var(--transition-fast), color var(--transition-fast);
+        white-space: nowrap;
+      }
+
+      .tree__row:hover {
+        color: var(--text-primary);
+        background: rgba(var(--accent-primary-rgb), 0.04);
+      }
+
+      .tree__row--selected {
+        color: var(--accent-primary);
+        background: rgba(var(--accent-primary-rgb), 0.1);
+      }
+
+      .tree__row:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-glow);
+      }
+
+      .tree__chevron {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+        transition: transform var(--transition-fast);
+      }
+
+      .tree__chevron--expanded {
+        transform: rotate(90deg);
+      }
+
+      .tree__chevron--placeholder {
+        visibility: hidden;
+      }
+
+      .tree__icon {
+        display: inline-flex;
+        flex-shrink: 0;
+        font-size: var(--text-sm);
+      }
+
+      .tree__label {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .tree__line {
+        position: absolute;
+        left: 11px;
+        top: 0;
+        bottom: 0;
+        width: 1px;
+        background: var(--border-subtle);
+      }
+
+      .tree__slot-host { display: none; }
+
+      @media (prefers-reduced-motion: reduce) {
+        :host *,
+        :host *::before,
+        :host *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this._items = [];
+    this._selected = null;
+    this._expandedSet = new Set();
+  }
+
+  _onSlotChange(e) {
+    this._items = e.target.assignedElements({ flatten: true })
+      .filter(el => el.tagName === 'ARC-TREE-ITEM');
+  }
+
+  _isExpanded(item) {
+    const key = item.label;
+    if (this._expandedSet.has(key)) return true;
+    return item.expanded === true && !this._expandedSet.has(`collapsed:${key}`);
+  }
+
+  _toggleExpand(item, e) {
+    e.stopPropagation();
+    const key = item.label;
+    const wasExpanded = this._isExpanded(item);
+
+    if (wasExpanded) {
+      this._expandedSet.delete(key);
+      this._expandedSet.add(`collapsed:${key}`);
+    } else {
+      this._expandedSet.add(key);
+      this._expandedSet.delete(`collapsed:${key}`);
+    }
+
+    this.dispatchEvent(new CustomEvent('arc-toggle', {
+      detail: { item: { label: item.label, icon: item.icon }, expanded: !wasExpanded },
+      bubbles: true,
+      composed: true,
+    }));
+
+    this.requestUpdate();
+  }
+
+  _selectItem(item, path) {
+    this._selected = item.label;
+
+    this.dispatchEvent(new CustomEvent('arc-select', {
+      detail: { item: { label: item.label, icon: item.icon }, path },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _onKeyDown(e, item, path, hasChildren) {
+    switch (e.key) {
+      case 'ArrowRight':
+        if (hasChildren && !this._isExpanded(item)) {
+          this._toggleExpand(item, e);
+        }
+        break;
+      case 'ArrowLeft':
+        if (hasChildren && this._isExpanded(item)) {
+          this._toggleExpand(item, e);
+        }
+        break;
+      case 'ArrowDown': {
+        e.preventDefault();
+        const rows = [...this.shadowRoot.querySelectorAll('.tree__row')];
+        const idx = rows.indexOf(e.target);
+        if (idx < rows.length - 1) rows[idx + 1].focus();
+        break;
+      }
+      case 'ArrowUp': {
+        e.preventDefault();
+        const rows = [...this.shadowRoot.querySelectorAll('.tree__row')];
+        const idx = rows.indexOf(e.target);
+        if (idx > 0) rows[idx - 1].focus();
+        break;
+      }
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        this._selectItem(item, path);
+        break;
+    }
+  }
+
+  _renderItems(items, level = 0, parentPath = []) {
+    return html`
+      <ul class="${level === 0 ? 'tree' : 'tree__group'}" role="${level === 0 ? 'tree' : 'group'}" part="${level === 0 ? 'tree' : 'group'}">
+        ${(items || []).map((item, idx) => {
+          const children = item.items;
+          const hasChildren = children.length > 0;
+          const expanded = this._isExpanded(item);
+          const isSelected = this._selected === item.label;
+          const path = [...parentPath, item.label];
+
+          return html`
+            <li class="tree__item" role="treeitem" aria-expanded=${hasChildren ? String(expanded) : undefined} part="item">
+              ${level > 0 ? html`<div class="tree__line" style="left: ${level * 16 + 3}px"></div>` : ''}
+              <button
+                class="tree__row ${isSelected ? 'tree__row--selected' : ''}"
+                style="padding-left: ${level * 16 + 8}px"
+                tabindex=${level === 0 && idx === 0 ? '0' : '-1'}
+                @click=${(e) => { this._selectItem(item, path); if (hasChildren) this._toggleExpand(item, e); }}
+                @keydown=${(e) => this._onKeyDown(e, item, path, hasChildren)}
+                part="row"
+              >
+                <span class="tree__chevron ${hasChildren ? (expanded ? 'tree__chevron--expanded' : '') : 'tree__chevron--placeholder'}">
+                  ${hasChildren ? html`
+                    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
+                      <path d="M3 1.5L7 5L3 8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                  ` : ''}
+                </span>
+                ${item.icon ? html`<span class="tree__icon">${item.icon}</span>` : ''}
+                <span class="tree__label">${item.label}</span>
+              </button>
+              ${hasChildren && expanded ? this._renderItems(children, level + 1, path) : ''}
+            </li>
+          `;
+        })}
+      </ul>
+    `;
+  }
+
+  render() {
+    return html`
+      <div class="tree__slot-host">
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+      ${this._renderItems(this._items)}
+    `;
+  }
+}
+
+customElements.define('arc-tree-view', ArcTreeView);

package/src/shared/index.js

@@ -0,0 +1,6 @@
+// ARC UI — Shared child elements
+// Reusable data-holder elements used by multiple parent components
+
+export { ArcOption } from './option.js';
+export { ArcMenuItem } from './menu-item.js';
+export { ArcMenuDivider } from './menu-divider.js';

package/src/shared/menu-divider.js

@@ -0,0 +1,9 @@
+import { LitElement, css } from 'lit';
+
+export class ArcMenuDivider extends LitElement {
+  static styles = css`
+    :host { display: none; }
+  `;
+}
+
+customElements.define('arc-menu-divider', ArcMenuDivider);

package/src/shared/menu-item.js

@@ -0,0 +1,30 @@
+import { LitElement, html, css } from 'lit';
+
+export class ArcMenuItem extends LitElement {
+  static properties = {
+    shortcut: { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    icon:     { type: String },
+  };
+
+  static styles = css`
+    :host { display: none; }
+  `;
+
+  constructor() {
+    super();
+    this.shortcut = '';
+    this.disabled = false;
+    this.icon = '';
+  }
+
+  get label() {
+    return this.textContent.trim();
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define('arc-menu-item', ArcMenuItem);

package/src/shared/option.js

@@ -0,0 +1,31 @@
+import { LitElement, html, css } from 'lit';
+
+export class ArcOption extends LitElement {
+  static properties = {
+    value:    { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    selected: { type: Boolean, reflect: true },
+  };
+
+  static styles = css`
+    :host { display: none; }
+  `;
+
+  constructor() {
+    super();
+    this.value = '';
+    this.disabled = false;
+    this.selected = false;
+  }
+
+  /** Expose text content as label */
+  get label() {
+    return this.textContent.trim();
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define('arc-option', ArcOption);