@arclux/arc-ui 1.0.0

package/src/navigation/pagination.js

@@ -0,0 +1,186 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcPagination extends LitElement {
+  static properties = {
+    total:    { type: Number },
+    current:  { type: Number, reflect: true },
+    siblings: { type: Number },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: inline-flex; }
+
+      .pagination {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-xs);
+        font-family: var(--font-body);
+      }
+
+      .pagination__btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 32px;
+        height: 32px;
+        padding: 0 var(--space-sm);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-sm);
+        background: transparent;
+        color: var(--text-secondary);
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        cursor: pointer;
+        transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
+        user-select: none;
+      }
+
+      .pagination__btn:hover:not(:disabled):not(.is-active) {
+        border-color: var(--border-bright);
+        color: var(--text-primary);
+        background: var(--bg-hover);
+      }
+
+      .pagination__btn:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-glow);
+      }
+
+      .pagination__btn:disabled {
+        opacity: 0.3;
+        cursor: not-allowed;
+      }
+
+      .pagination__btn.is-active {
+        background: var(--accent-primary);
+        border-color: var(--accent-primary);
+        color: var(--text-primary);
+        box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.4);
+      }
+
+      .pagination__ellipsis {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 32px;
+        height: 32px;
+        color: var(--text-muted);
+        font-size: var(--text-sm);
+        user-select: 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.total = 1;
+    this.current = 1;
+    this.siblings = 1;
+  }
+
+  _getPageRange() {
+    const total = Math.max(1, this.total);
+    const current = Math.min(Math.max(1, this.current), total);
+    const siblings = Math.max(0, this.siblings);
+
+    // Always show first, last, current, and siblings around current
+    const pages = new Set();
+    pages.add(1);
+    pages.add(total);
+
+    const start = Math.max(2, current - siblings);
+    const end = Math.min(total - 1, current + siblings);
+    for (let i = start; i <= end; i++) {
+      pages.add(i);
+    }
+
+    const sorted = [...pages].sort((a, b) => a - b);
+
+    // Insert ellipsis markers
+    const result = [];
+    let prev = 0;
+    for (const page of sorted) {
+      if (page - prev > 1) {
+        result.push('...');
+      }
+      result.push(page);
+      prev = page;
+    }
+
+    return result;
+  }
+
+  _goToPage(page) {
+    if (page < 1 || page > this.total || page === this.current) return;
+    this.current = page;
+    this.dispatchEvent(new CustomEvent('arc-change', {
+      detail: { value: this.current },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _prev() { this._goToPage(this.current - 1); }
+  _next() { this._goToPage(this.current + 1); }
+
+  render() {
+    const pages = this._getPageRange();
+
+    return html`
+      <nav class="pagination" role="navigation" aria-label="Pagination" part="pagination">
+        <button
+          class="pagination__btn"
+          @click=${this._prev}
+          ?disabled=${this.current <= 1}
+          aria-label="Previous page"
+          part="prev"
+        >
+          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+            <path d="M10.78 3.22a.75.75 0 010 1.06L7.06 8l3.72 3.72a.75.75 0 11-1.06 1.06l-4.25-4.25a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 0z"/>
+          </svg>
+        </button>
+
+        ${pages.map(page =>
+          page === '...'
+            ? html`<span class="pagination__ellipsis" part="ellipsis" aria-hidden="true">&hellip;</span>`
+            : html`
+              <button
+                class="pagination__btn ${page === this.current ? 'is-active' : ''}"
+                @click=${() => this._goToPage(page)}
+                aria-label="Page ${page}"
+                aria-current=${page === this.current ? 'page' : 'false'}
+                part="page"
+              >${page}</button>
+            `
+        )}
+
+        <button
+          class="pagination__btn"
+          @click=${this._next}
+          ?disabled=${this.current >= this.total}
+          aria-label="Next page"
+          part="next"
+        >
+          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+            <path d="M5.22 12.78a.75.75 0 010-1.06L8.94 8 5.22 4.28a.75.75 0 011.06-1.06l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0z"/>
+          </svg>
+        </button>
+      </nav>
+    `;
+  }
+}
+
+customElements.define('arc-pagination', ArcPagination);

package/src/navigation/scroll-spy.js

@@ -0,0 +1,198 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+import './spy-link.js';
+
+export class ArcScrollSpy extends LitElement {
+  static properties = {
+    active:  { type: String, reflect: true },
+    offset:  { type: Number },
+    _active: { state: true },
+    _links:  { state: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .scroll-spy {
+        padding: 0 var(--space-md);
+      }
+
+      .scroll-spy__heading {
+        font-family: var(--font-accent);
+        font-weight: var(--section-title-weight);
+        font-size: var(--section-title-size);
+        letter-spacing: var(--section-title-spacing);
+        text-transform: uppercase;
+        color: var(--text-ghost);
+        margin-bottom: var(--space-sm);
+      }
+
+      .scroll-spy__list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 2px; /* cosmetic micro-spacing */
+      }
+
+      .scroll-spy__item {
+        display: block;
+      }
+
+      .scroll-spy__link {
+        display: flex;
+        align-items: center;
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        line-height: 1.4;
+        color: var(--text-ghost);
+        text-decoration: none;
+        padding: var(--space-xs) var(--space-sm);
+        border-radius: var(--radius-sm);
+        cursor: pointer;
+        transition:
+          color var(--transition-fast),
+          background var(--transition-fast),
+          box-shadow var(--transition-fast);
+        background: none;
+        border: none;
+        width: 100%;
+        text-align: left;
+        min-height: var(--touch-min);
+      }
+
+      .scroll-spy__link:hover {
+        color: var(--text-secondary);
+        background: rgba(var(--white-rgb), 0.03);
+      }
+
+      .scroll-spy__link[aria-current="true"] {
+        color: var(--text-primary);
+        background: rgba(var(--accent-primary-rgb), 0.06);
+        box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.08);
+      }
+
+      .scroll-spy__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.offset = 80;
+    this._active = '';
+    this._links = [];
+    this._observer = null;
+    this._rafId = null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._setupObserver();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._rafId) cancelAnimationFrame(this._rafId);
+    if (this._observer) {
+      this._observer.disconnect();
+      this._observer = null;
+    }
+  }
+
+  _onSlotChange(e) {
+    this._links = e.target.assignedElements({ flatten: true })
+      .filter(el => el.tagName === 'ARC-SPY-LINK');
+    this._setupObserver();
+  }
+
+  updated(changed) {
+    if (changed.has('_links')) {
+      this._setupObserver();
+    }
+  }
+
+  _setupObserver() {
+    if (typeof IntersectionObserver === 'undefined') return;
+
+    if (this._observer) {
+      this._observer.disconnect();
+    }
+
+    this._observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            this._active = entry.target.id;
+            this.active = entry.target.id;
+            this.dispatchEvent(new CustomEvent('arc-change', {
+              detail: { value: this._active },
+              bubbles: true,
+              composed: true,
+            }));
+          }
+        }
+      },
+      { rootMargin: `-${this.offset}px 0px -60% 0px` }
+    );
+
+    this._rafId = requestAnimationFrame(() => {
+      this._rafId = null;
+      if (!this._observer) return;
+      for (const link of this._links) {
+        if (!link.target) continue;
+        const el = document.getElementById(link.target);
+        if (el) this._observer.observe(el);
+      }
+    });
+  }
+
+  _handleClick(target) {
+    const el = document.getElementById(target);
+    if (el) {
+      el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+    this._active = target;
+    this.active = target;
+  }
+
+  render() {
+    return html`
+      <div class="scroll-spy__slot-host">
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+      <nav class="scroll-spy" part="scroll-spy" aria-label="Table of contents">
+        <div class="scroll-spy__heading" part="heading">On this page</div>
+        <ul class="scroll-spy__list" part="list">
+          ${this._links.map((link) => html`
+            <li class="scroll-spy__item">
+              <button
+                class="scroll-spy__link"
+                aria-current=${this._active === link.target ? 'true' : 'false'}
+                @click=${() => this._handleClick(link.target)}
+                part="link"
+              >${link.label}</button>
+            </li>
+          `)}
+        </ul>
+      </nav>
+    `;
+  }
+}
+
+customElements.define('arc-scroll-spy', ArcScrollSpy);

package/src/navigation/scroll-to-top.js

@@ -0,0 +1,163 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+/**
+ * @arc-prism interactive
+ */
+export class ArcScrollToTop extends LitElement {
+  static properties = {
+    threshold: { type: Number },
+    smooth:    { type: Boolean },
+    position:  { type: String, reflect: true },
+    offset:    { type: String },
+    _visible:  { state: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; }
+
+      .scroll-to-top {
+        position: fixed;
+        z-index: 1000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        padding: 0;
+        border: 1px solid var(--border-subtle);
+        border-radius: var(--radius-full);
+        background: var(--bg-elevated);
+        box-shadow: var(--shadow-md);
+        color: var(--text-muted);
+        cursor: pointer;
+        opacity: 0;
+        transform: translateY(12px);
+        pointer-events: none;
+        transition:
+          opacity var(--transition-fast),
+          transform var(--transition-fast),
+          background var(--transition-fast),
+          border-color var(--transition-fast),
+          color var(--transition-fast),
+          box-shadow var(--transition-fast);
+      }
+
+      .scroll-to-top.visible {
+        opacity: 1;
+        transform: translateY(0);
+        pointer-events: auto;
+      }
+
+      .scroll-to-top:hover {
+        background: var(--accent-primary-subtle);
+        border-color: var(--accent-primary-border);
+        color: var(--accent-primary);
+      }
+
+      .scroll-to-top:active {
+        transform: scale(0.95);
+      }
+
+      .scroll-to-top.visible:active {
+        transform: scale(0.95);
+      }
+
+      .scroll-to-top:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-glow);
+      }
+
+      .scroll-to-top svg {
+        width: 18px;
+        height: 18px;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      /* Position variants */
+      :host(:not([position])) .scroll-to-top,
+      :host([position="bottom-right"]) .scroll-to-top {
+        bottom: var(--_offset);
+        right: var(--_offset);
+      }
+
+      :host([position="bottom-left"]) .scroll-to-top {
+        bottom: var(--_offset);
+        left: var(--_offset);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .scroll-to-top {
+          transition: none;
+        }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.threshold = 300;
+    this.smooth = true;
+    this.position = 'bottom-right';
+    this.offset = 'var(--space-lg)';
+    this._visible = false;
+    this._onScroll = this._onScroll.bind(this);
+    this._ticking = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener('scroll', this._onScroll, { passive: true });
+    // Check initial scroll position
+    this._checkScroll();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener('scroll', this._onScroll);
+  }
+
+  _onScroll() {
+    if (!this._ticking) {
+      this._ticking = true;
+      requestAnimationFrame(() => {
+        this._checkScroll();
+        this._ticking = false;
+      });
+    }
+  }
+
+  _checkScroll() {
+    this._visible = window.scrollY > this.threshold;
+  }
+
+  _scrollToTop() {
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    const behavior = this.smooth && !prefersReducedMotion ? 'smooth' : 'instant';
+    window.scrollTo({ top: 0, behavior });
+  }
+
+  render() {
+    return html`
+      <button
+        class="scroll-to-top ${this._visible ? 'visible' : ''}"
+        style="--_offset: ${this.offset}"
+        @click=${this._scrollToTop}
+        aria-label="Scroll to top"
+        part="button"
+      >
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <polyline points="18 15 12 9 6 15"></polyline>
+        </svg>
+      </button>
+    `;
+  }
+}
+
+customElements.define('arc-scroll-to-top', ArcScrollToTop);

package/src/navigation/sidebar-link.js

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

package/src/navigation/sidebar-section.js

@@ -0,0 +1,45 @@
+import { LitElement, html, css } from 'lit';
+
+/**
+ * @arc-prism interactive — sidebar section, child of arc-sidebar
+ */
+export class ArcSidebarSection extends LitElement {
+  static properties = {
+    heading:     { type: String, reflect: true },
+    collapsible: { type: Boolean, reflect: true },
+    open:        { type: Boolean, reflect: true },
+  };
+
+  static styles = css`
+    :host { display: contents; }
+  `;
+
+  constructor() {
+    super();
+    this.heading = '';
+    this.collapsible = false;
+    this.open = true;
+  }
+
+  /** Get child arc-sidebar-link elements */
+  get links() {
+    return [...this.querySelectorAll(':scope > arc-sidebar-link')];
+  }
+
+  toggle() {
+    if (this.collapsible) {
+      this.open = !this.open;
+      this.dispatchEvent(new CustomEvent('arc-toggle', {
+        detail: { open: this.open },
+        bubbles: true,
+        composed: true,
+      }));
+    }
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define('arc-sidebar-section', ArcSidebarSection);