@arclux/arc-ui 1.0.0

package/src/navigation/sidebar.js

@@ -0,0 +1,336 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+import './sidebar-section.js';
+import './sidebar-link.js';
+
+export class ArcSidebar extends LitElement {
+  static properties = {
+    active:    { type: String, reflect: true },
+    collapsed: { type: Boolean, reflect: true },
+    width:     { type: String },
+    glow:      { type: Boolean, reflect: true },
+    _sections: { state: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: block;
+        position: sticky;
+        top: var(--nav-height);
+        height: calc(100vh - var(--nav-height));
+        overflow-y: auto;
+        overflow-x: hidden;
+        scrollbar-width: thin;
+        scrollbar-color: var(--border-default) transparent;
+      }
+
+      :host([collapsed]) { width: 0; overflow: hidden; }
+
+
+      .sidebar {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-md);
+        padding: var(--space-xl) var(--space-lg);
+        min-height: 100%;
+        position: relative;
+        box-sizing: border-box;
+      }
+
+      /* Ambient glow — faint accent bleed from the right edge */
+      :host([glow]) .sidebar::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 80%;
+        height: 50%;
+        background: radial-gradient(
+          ellipse at 100% 10%,
+          rgba(var(--accent-primary-rgb), 0.03),
+          transparent 60%
+        );
+        pointer-events: none;
+      }
+
+      /* Border line — solid default */
+      .sidebar::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 1px;
+        background: var(--border-subtle);
+      }
+
+      /* Glow border variant */
+      :host([glow]) .sidebar::after {
+        background: var(--glow-line-blue);
+        opacity: 0.6;
+      }
+
+      /* ── Section ── */
+      .sidebar__section {
+        display: flex;
+        flex-direction: column;
+      }
+
+      /* ── Static heading (non-collapsible) ── */
+      .sidebar__heading {
+        display: block;
+        font-family: var(--font-accent);
+        font-weight: 600;
+        font-size: var(--text-xs);
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        background: var(--gradient-accent-text);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        padding: var(--space-xs) var(--space-sm);
+        margin-bottom: var(--space-xs);
+      }
+
+      /* ── Collapsible heading (toggle) ── */
+      .sidebar__toggle {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+        font-family: var(--font-accent);
+        font-weight: 600;
+        font-size: var(--text-xs);
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        padding: var(--space-sm);
+        margin-bottom: 2px; /* cosmetic micro-spacing */
+        border-radius: var(--radius-sm);
+        border: none;
+        background: none;
+        cursor: pointer;
+        user-select: none;
+        transition: background var(--transition-fast);
+        width: 100%;
+        text-align: left;
+      }
+
+      .sidebar__toggle:hover {
+        background: var(--bg-hover);
+      }
+
+      .sidebar__toggle:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-glow);
+      }
+
+      .sidebar__toggle-label {
+        background: var(--gradient-accent-text);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+      }
+
+      .sidebar__toggle-count {
+        font-family: var(--font-mono);
+        font-size: var(--text-xs);
+        font-weight: 400;
+        letter-spacing: 0;
+        color: var(--text-ghost);
+        -webkit-text-fill-color: var(--text-ghost);
+        margin-left: auto;
+      }
+
+      .sidebar__chevron {
+        color: var(--text-ghost);
+        flex-shrink: 0;
+        transition: transform 150ms ease;
+        -webkit-text-fill-color: unset;
+      }
+
+      .sidebar__chevron--closed {
+        transform: rotate(-90deg);
+      }
+
+      /* ── Links container ── */
+      .sidebar__links {
+        display: flex;
+        flex-direction: column;
+        gap: 1px;
+      }
+
+      .sidebar__links--hidden {
+        display: none;
+      }
+
+      /* ── Link ── */
+      .sidebar__link {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        font-weight: 400;
+        color: var(--text-muted);
+        text-decoration: none;
+        padding: var(--touch-pad) var(--space-md) var(--touch-pad) calc(var(--space-sm) + 4px);
+        border-radius: var(--radius-sm);
+        cursor: pointer;
+        transition:
+          color var(--transition-fast),
+          background var(--transition-fast),
+          box-shadow var(--transition-fast);
+        border: none;
+        background: none;
+        text-align: left;
+      }
+
+      .sidebar__link-arrow {
+        opacity: 0;
+        color: var(--text-ghost);
+        font-size: var(--text-sm);
+        flex-shrink: 0;
+        transition: opacity var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
+        transform: translateX(-2px);
+      }
+
+      .sidebar__link:hover .sidebar__link-arrow {
+        opacity: 1;
+        transform: translateX(0);
+        color: var(--text-secondary);
+      }
+
+      .sidebar__link[aria-current="page"] .sidebar__link-arrow {
+        opacity: 1;
+        transform: translateX(0);
+        color: var(--accent-primary);
+      }
+
+      .sidebar__link:hover {
+        color: var(--text-primary);
+        background: var(--bg-hover);
+      }
+
+      /* Active link */
+      .sidebar__link[aria-current="page"] {
+        color: var(--accent-primary);
+        background: var(--accent-primary-subtle);
+        font-weight: 500;
+      }
+
+      :host([glow]) .sidebar__link[aria-current="page"] {
+        box-shadow: inset 6px 0 12px -6px rgba(var(--accent-primary-rgb), 0.15);
+      }
+
+      .sidebar__link:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-glow);
+      }
+
+      .sidebar__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.active = '';
+    this.collapsed = false;
+    this.width = '260px';
+    this.glow = false;
+    this._sections = [];
+  }
+
+  _onSlotChange(e) {
+    this._sections = e.target.assignedElements({ flatten: true })
+      .filter(el => el.tagName === 'ARC-SIDEBAR-SECTION');
+    this.requestUpdate();
+  }
+
+  _handleClick(e, href) {
+    this.active = href;
+    const nav = new CustomEvent('arc-navigate', {
+      detail: { href },
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+    });
+    this.dispatchEvent(nav);
+    // If a listener handled navigation (e.g. SPA router), prevent the <a> default
+    if (nav.defaultPrevented) {
+      e.preventDefault();
+    }
+  }
+
+  _toggleSection(section) {
+    section.toggle();
+    this.requestUpdate();
+  }
+
+  render() {
+    return html`
+      <div class="sidebar__slot-host">
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+      <nav class="sidebar" part="sidebar" aria-label="Sidebar navigation">
+        ${this._sections.map((section) => {
+          const links = section.links;
+          const isCollapsible = section.collapsible;
+          const isOpen = section.open;
+
+          return html`
+            <div class="sidebar__section" part="section">
+              ${section.heading
+                ? isCollapsible
+                  ? html`
+                    <button
+                      class="sidebar__toggle"
+                      @click=${() => this._toggleSection(section)}
+                      aria-expanded=${String(isOpen)}
+                      part="toggle"
+                    >
+                      <span class="sidebar__toggle-label">${section.heading}</span>
+                      <span class="sidebar__toggle-count">${links.length}</span>
+                      <svg class="sidebar__chevron ${isOpen ? '' : 'sidebar__chevron--closed'}" viewBox="0 0 16 16" width="12" height="12" aria-hidden="true">
+                        <path d="M4.5 6L8 9.5L11.5 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      </svg>
+                    </button>`
+                  : html`<div class="sidebar__heading" part="heading">${section.heading}</div>`
+                : ''
+              }
+              <div class="sidebar__links ${!isOpen && isCollapsible ? 'sidebar__links--hidden' : ''}" part="links">
+                ${links.map((link) => html`
+                  <a
+                    class="sidebar__link"
+                    href=${link.href}
+                    aria-current=${(this.active === link.href || link.active) ? 'page' : 'false'}
+                    @click=${(e) => this._handleClick(e, link.href)}
+                    part="link"
+                  >
+                    <span>${link.label}</span>
+                    <svg class="sidebar__link-arrow" viewBox="0 0 16 16" width="12" height="12" aria-hidden="true">
+                      <path d="M6 4L10 8L6 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                  </a>
+                `)}
+              </div>
+            </div>
+          `;
+        })}
+      </nav>
+    `;
+  }
+}
+
+customElements.define('arc-sidebar', ArcSidebar);

package/src/navigation/spy-link.js

@@ -0,0 +1,26 @@
+import { LitElement, html, css } from 'lit';
+
+export class ArcSpyLink extends LitElement {
+  static properties = {
+    target: { type: String, reflect: true },
+  };
+
+  static styles = css`
+    :host { display: none; }
+  `;
+
+  constructor() {
+    super();
+    this.target = '';
+  }
+
+  get label() {
+    return this.textContent.trim();
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define('arc-spy-link', ArcSpyLink);

package/src/navigation/tab.js

@@ -0,0 +1,26 @@
+import { LitElement, html, css } from 'lit';
+
+/**
+ * @arc-prism interactive — tab panel, child of arc-tabs
+ */
+export class ArcTab extends LitElement {
+  static properties = {
+    label: { type: String, reflect: true },
+  };
+
+  static styles = css`
+    :host { display: block; }
+    :host([hidden]) { display: none; }
+  `;
+
+  constructor() {
+    super();
+    this.label = '';
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define('arc-tab', ArcTab);

package/src/navigation/tabs.js

@@ -0,0 +1,202 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+import './tab.js';
+
+export class ArcTabs extends LitElement {
+  static properties = {
+    /** @deprecated Use <arc-tab> children instead */
+    items:    { type: Array },
+    selected: { type: Number, reflect: true },
+    _tabs:    { state: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; }
+
+      .tabs__list {
+        display: flex;
+        border-bottom: 1px solid var(--border-subtle);
+        gap: var(--space-xs);
+        overflow-x: auto;
+        overflow-y: hidden;
+      }
+
+      .tabs__tab {
+        font-family: var(--font-accent);
+        font-weight: 600;
+        font-size: var(--text-xs);
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: var(--text-ghost);
+        background: none;
+        border: none;
+        padding: var(--touch-pad) var(--space-md);
+        min-height: var(--touch-min);
+        cursor: pointer;
+        border-bottom: 2px solid transparent;
+        margin-bottom: -1px;
+        transition: color var(--transition-fast), border-color var(--transition-fast);
+        white-space: nowrap;
+      }
+
+      .tabs__tab:hover { color: var(--text-primary); }
+      .tabs__tab[aria-selected="true"] {
+        color: var(--accent-primary);
+        border-bottom-color: var(--accent-primary);
+      }
+      .tabs__tab:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-ring);
+        border-radius: var(--radius-sm);
+      }
+
+      .tabs__panel {
+        padding: var(--space-lg) 0;
+        color: var(--text-secondary);
+        font-size: var(--body-size);
+        line-height: var(--body-lh);
+      }
+
+      .tabs__panel[hidden] { display: none; }
+
+      /* Hide the default slot — panels are shown via named wrapping */
+      .tabs__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 = 0;
+    this._tabs = [];
+  }
+
+  get _useSlotted() {
+    return this._tabs.length > 0;
+  }
+
+  _onSlotChange(e) {
+    const slot = e.target;
+    const children = slot.assignedElements({ flatten: true })
+      .filter(el => el.tagName === 'ARC-TAB');
+    this._tabs = children;
+    this._syncVisibility();
+  }
+
+  _syncVisibility() {
+    this._tabs.forEach((tab, i) => {
+      tab.hidden = i !== this.selected;
+    });
+  }
+
+  _select(index) {
+    const prev = this.selected;
+    this.selected = index;
+
+    if (this._useSlotted) {
+      this._syncVisibility();
+    }
+
+    const label = this._useSlotted
+      ? this._tabs[index]?.label
+      : this.items?.[index]?.label;
+
+    this.dispatchEvent(new CustomEvent('arc-change', {
+      detail: { value: index, label },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _handleKeydown(e) {
+    const tabs = [...this.shadowRoot.querySelectorAll('.tabs__tab')];
+    const current = tabs.indexOf(e.target);
+    let next;
+
+    if (e.key === 'ArrowRight') next = (current + 1) % tabs.length;
+    else if (e.key === 'ArrowLeft') next = (current - 1 + tabs.length) % tabs.length;
+    else if (e.key === 'Home') next = 0;
+    else if (e.key === 'End') next = tabs.length - 1;
+    else return;
+
+    e.preventDefault();
+    tabs[next].focus();
+    this._select(next);
+  }
+
+  updated(changed) {
+    if (changed.has('selected') && this._useSlotted) {
+      this._syncVisibility();
+    }
+  }
+
+  _renderTabButtons(labels) {
+    return labels.map((label, i) => html`
+      <button
+        class="tabs__tab"
+        role="tab"
+        aria-selected=${i === this.selected ? 'true' : 'false'}
+        tabindex=${i === this.selected ? '0' : '-1'}
+        id="tab-${i}"
+        aria-controls="panel-${i}"
+        @click=${() => this._select(i)}
+      >${label}</button>
+    `);
+  }
+
+  render() {
+    const slotted = this._useSlotted;
+    const items = this.items || [];
+    const labels = slotted
+      ? this._tabs.map(t => t.label)
+      : items.map(t => t.label);
+
+    return html`
+      <div class="tabs" part="tabs">
+        <div class="tabs__list" role="tablist" @keydown=${this._handleKeydown}>
+          ${this._renderTabButtons(labels)}
+        </div>
+
+        <!-- Slotted mode: arc-tab children are shown/hidden directly -->
+        <div
+          class="tabs__panel"
+          role="tabpanel"
+          id="panel-${this.selected}"
+          aria-labelledby="tab-${this.selected}"
+          style="${!slotted && items.length ? 'display:none' : ''}"
+        >
+          <slot @slotchange=${this._onSlotChange}></slot>
+        </div>
+
+        ${!slotted && items.length ? html`
+          <!-- Legacy items mode: render content strings -->
+          ${items.map((item, i) => html`
+            <div
+              class="tabs__panel"
+              role="tabpanel"
+              id="panel-${i}"
+              aria-labelledby="tab-${i}"
+              ?hidden=${i !== this.selected}
+            >${item.content}</div>
+          `)}
+        ` : ''}
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-tabs', ArcTabs);