@arclux/arc-ui 1.0.0

package/src/content/data-table.js

@@ -0,0 +1,332 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+import './column.js';
+
+export class ArcDataTable extends LitElement {
+  static properties = {
+    rows:          { type: Array },
+    sortable:      { type: Boolean },
+    selectable:    { type: Boolean },
+    sortColumn:    { type: String, attribute: 'sort-column' },
+    sortDirection: { type: String, reflect: true, attribute: 'sort-direction' },
+    _columns:      { state: true },
+    _selectedRows: { state: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; font-family: var(--font-body); }
+
+      .table-wrapper {
+        overflow-x: auto;
+        border: 1px solid var(--border-subtle);
+        border-radius: var(--radius-md);
+      }
+
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: var(--text-sm);
+        color: var(--text-primary);
+      }
+
+      thead {
+        background: var(--bg-elevated);
+        position: sticky;
+        top: 0;
+        z-index: 1;
+      }
+
+      th {
+        text-align: left;
+        padding: var(--space-sm) var(--space-md);
+        font-family: var(--font-accent);
+        font-weight: 600;
+        font-size: var(--text-xs);
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        color: var(--text-muted);
+        border-bottom: 1px solid var(--border-default);
+        white-space: nowrap;
+        user-select: none;
+      }
+
+      th.sortable {
+        cursor: pointer;
+        transition: color var(--transition-fast);
+      }
+
+      th.sortable:hover {
+        color: var(--text-primary);
+      }
+
+      th.sorted {
+        color: var(--accent-primary);
+      }
+
+      .sort-indicator {
+        display: inline-block;
+        margin-left: var(--space-xs);
+        font-size: var(--text-xs);
+        vertical-align: middle;
+      }
+
+      td {
+        padding: var(--space-sm) var(--space-md);
+        border-bottom: 1px solid var(--border-subtle);
+        color: var(--text-secondary);
+        line-height: 1.5;
+      }
+
+      tr:last-child td {
+        border-bottom: none;
+      }
+
+      tbody tr:nth-child(odd) {
+        background: var(--bg-surface);
+      }
+
+      tbody tr:nth-child(even) {
+        background: var(--bg-card);
+      }
+
+      tbody tr:hover {
+        background: var(--bg-elevated);
+      }
+
+      tbody tr.selected {
+        background: rgba(var(--accent-primary-rgb), 0.08);
+      }
+
+      .checkbox-cell {
+        width: 40px;
+        text-align: center;
+      }
+
+      input[type="checkbox"] {
+        appearance: none;
+        width: 16px;
+        height: 16px;
+        border: 1px solid var(--border-bright);
+        border-radius: var(--radius-sm);
+        background: var(--bg-card);
+        cursor: pointer;
+        position: relative;
+        vertical-align: middle;
+        transition: border-color var(--transition-fast), background var(--transition-fast);
+      }
+
+      input[type="checkbox"]:hover {
+        border-color: var(--accent-primary);
+      }
+
+      input[type="checkbox"]:checked {
+        background: var(--accent-primary);
+        border-color: var(--accent-primary);
+      }
+
+      input[type="checkbox"]:checked::after {
+        content: '';
+        position: absolute;
+        top: 2px;
+        left: 5px;
+        width: 4px;
+        height: 8px;
+        border: solid var(--text-primary);
+        border-width: 0 2px 2px 0;
+        transform: rotate(45deg);
+      }
+
+      input[type="checkbox"]:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-glow);
+      }
+
+      .empty-state {
+        padding: var(--space-xl);
+        text-align: center;
+        color: var(--text-muted);
+        font-style: italic;
+      }
+
+      .data-table__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.rows = [];
+    this.sortable = false;
+    this.selectable = false;
+    this.sortColumn = '';
+    this.sortDirection = 'asc';
+    this._columns = [];
+    this._selectedRows = new Set();
+  }
+
+  _onSlotChange(e) {
+    this._columns = e.target.assignedElements({ flatten: true })
+      .filter(el => el.tagName === 'ARC-COLUMN');
+  }
+
+  _handleSort(column) {
+    if (!this.sortable || !column.sortable) return;
+
+    if (this.sortColumn === column.key) {
+      this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+    } else {
+      this.sortColumn = column.key;
+      this.sortDirection = 'asc';
+    }
+
+    this.dispatchEvent(new CustomEvent('arc-sort', {
+      detail: { column: this.sortColumn, direction: this.sortDirection },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _handleSelectAll(e) {
+    const checked = e.target.checked;
+    if (checked) {
+      this._selectedRows = new Set(this.rows.map((_, i) => i));
+    } else {
+      this._selectedRows = new Set();
+    }
+
+    this.dispatchEvent(new CustomEvent('arc-select-all', {
+      detail: { selected: checked },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _handleRowSelect(e, row, index) {
+    const checked = e.target.checked;
+    const next = new Set(this._selectedRows);
+
+    if (checked) {
+      next.add(index);
+    } else {
+      next.delete(index);
+    }
+
+    this._selectedRows = next;
+
+    this.dispatchEvent(new CustomEvent('arc-row-select', {
+      detail: { selected: checked, row },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  get _sortedRows() {
+    if (!this.sortColumn) return this.rows;
+
+    return [...this.rows].sort((a, b) => {
+      const aVal = a[this.sortColumn];
+      const bVal = b[this.sortColumn];
+
+      if (aVal == null && bVal == null) return 0;
+      if (aVal == null) return 1;
+      if (bVal == null) return -1;
+
+      let cmp;
+      if (typeof aVal === 'number' && typeof bVal === 'number') {
+        cmp = aVal - bVal;
+      } else {
+        cmp = String(aVal).localeCompare(String(bVal));
+      }
+
+      return this.sortDirection === 'desc' ? -cmp : cmp;
+    });
+  }
+
+  get _allSelected() {
+    return this.rows.length > 0 && this._selectedRows.size === this.rows.length;
+  }
+
+  _renderSortIndicator(column) {
+    if (!this.sortable || !column.sortable) return '';
+    if (this.sortColumn !== column.key) {
+      return html`<span class="sort-indicator" aria-hidden="true">\u2195</span>`;
+    }
+    return html`<span class="sort-indicator" aria-hidden="true">${this.sortDirection === 'asc' ? '\u2191' : '\u2193'}</span>`;
+  }
+
+  render() {
+    const rows = this._sortedRows;
+
+    return html`
+      <div class="data-table__slot-host">
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+      <div class="table-wrapper" part="wrapper" role="region" aria-label="Data table">
+        <table part="table">
+          <thead part="head">
+            <tr>
+              ${this.selectable ? html`
+                <th class="checkbox-cell">
+                  <input
+                    type="checkbox"
+                    aria-label="Select all rows"
+                    .checked=${this._allSelected}
+                    @change=${this._handleSelectAll}
+                  />
+                </th>
+              ` : ''}
+              ${this._columns.map(col => html`
+                <th
+                  class="${this.sortable && col.sortable ? 'sortable' : ''} ${this.sortColumn === col.key ? 'sorted' : ''}"
+                  style="${col.width ? `width: ${col.width}` : ''}"
+                  @click=${() => this._handleSort(col)}
+                  aria-sort=${this.sortColumn === col.key ? (this.sortDirection === 'asc' ? 'ascending' : 'descending') : 'none'}
+                >
+                  ${col.label}${this._renderSortIndicator(col)}
+                </th>
+              `)}
+            </tr>
+          </thead>
+          <tbody part="body">
+            ${rows.length === 0 ? html`
+              <tr>
+                <td class="empty-state" colspan=${this._columns.length + (this.selectable ? 1 : 0)}>
+                  No data available
+                </td>
+              </tr>
+            ` : rows.map((row, i) => html`
+              <tr class="${this._selectedRows.has(i) ? 'selected' : ''}" part="row">
+                ${this.selectable ? html`
+                  <td class="checkbox-cell">
+                    <input
+                      type="checkbox"
+                      aria-label="Select row ${i + 1}"
+                      .checked=${this._selectedRows.has(i)}
+                      @change=${(e) => this._handleRowSelect(e, row, i)}
+                    />
+                  </td>
+                ` : ''}
+                ${this._columns.map(col => html`
+                  <td part="cell">${row[col.key] ?? ''}</td>
+                `)}
+              </tr>
+            `)}
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-data-table', ArcDataTable);

package/src/content/divider.js

@@ -0,0 +1,153 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcDivider extends LitElement {
+  static properties = {
+    variant: { type: String, reflect: true },
+    align: { type: String, reflect: true },
+    vertical: { type: Boolean, reflect: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; width: 100%; }
+
+      .divider { width: 100%; height: 1px; }
+
+      :host(:not([variant])) .divider,
+      :host([variant="subtle"]) .divider { background: var(--gradient-divider); }
+
+      :host([variant="glow"]) .divider {
+        position: relative;
+        background: var(--gradient-divider-glow);
+        box-shadow: 0 0 6px rgba(var(--accent-primary-rgb),0.08);
+      }
+      :host([variant="glow"]) .divider::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent 0%, rgba(var(--accent-secondary-rgb),0.4) 50%, transparent 100%);
+        background-size: 200% 100%;
+        animation: divider-shimmer 6s ease-in-out infinite;
+        mix-blend-mode: screen;
+      }
+
+      :host([variant="line-white"]) .divider,
+      :host([variant="line-primary"]) .divider,
+      :host([variant="line-gradient"]) .divider {
+        height: 2px;
+        margin-inline: auto;
+      }
+      :host([variant="line-white"]) .divider {
+        max-width: 160px;
+        background: linear-gradient(90deg, transparent, rgba(var(--text-primary-rgb),0.35), transparent);
+      }
+      :host([variant="line-primary"]) .divider {
+        max-width: 200px;
+        background: linear-gradient(90deg, transparent, rgba(var(--accent-primary-rgb),0.7), transparent);
+        box-shadow: 0 0 8px rgba(var(--accent-primary-rgb),0.3);
+      }
+      :host([variant="line-gradient"]) .divider {
+        max-width: 240px;
+        background: var(--glow-line-gradient);
+        box-shadow: 0 0 10px rgba(var(--accent-primary-rgb),0.25);
+      }
+
+      /* Alignment — rewrite gradients to originate from one edge */
+      :host([align="left"]) .divider { margin-inline: 0; }
+      :host([align="right"]) .divider { margin-left: auto; margin-right: 0; }
+
+      :host([align="left"]:not([variant])) .divider,
+      :host([align="left"][variant="subtle"]) .divider {
+        background: linear-gradient(90deg, var(--border-default), transparent);
+      }
+      :host([align="right"]:not([variant])) .divider,
+      :host([align="right"][variant="subtle"]) .divider {
+        background: linear-gradient(90deg, transparent, var(--border-default));
+      }
+
+      :host([align="left"][variant="glow"]) .divider {
+        background: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0.5), rgba(var(--accent-secondary-rgb),0.3), transparent);
+      }
+      :host([align="right"][variant="glow"]) .divider {
+        background: linear-gradient(90deg, transparent, rgba(var(--accent-secondary-rgb),0.3), rgba(var(--accent-primary-rgb),0.5));
+      }
+
+      :host([align="left"][variant="line-white"]) .divider {
+        background: linear-gradient(90deg, rgba(var(--text-primary-rgb),0.35), transparent);
+      }
+      :host([align="right"][variant="line-white"]) .divider {
+        background: linear-gradient(90deg, transparent, rgba(var(--text-primary-rgb),0.35));
+      }
+
+      :host([align="left"][variant="line-primary"]) .divider {
+        background: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0.7), transparent);
+      }
+      :host([align="right"][variant="line-primary"]) .divider {
+        background: linear-gradient(90deg, transparent, rgba(var(--accent-primary-rgb),0.7));
+      }
+
+      :host([align="left"][variant="line-gradient"]) .divider {
+        background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary), transparent);
+      }
+      :host([align="right"][variant="line-gradient"]) .divider {
+        background: linear-gradient(90deg, transparent, var(--accent-primary), var(--accent-secondary));
+      }
+
+      /* ── Vertical ── */
+      :host([vertical]) { display: inline-flex; width: auto; height: 100%; }
+      :host([vertical]) .divider { width: 1px; height: 100%; }
+
+      :host([vertical]:not([variant])) .divider,
+      :host([vertical][variant="subtle"]) .divider {
+        background: linear-gradient(180deg, transparent, var(--border-default), transparent);
+      }
+
+      :host([vertical][variant="glow"]) .divider {
+        background: linear-gradient(180deg, transparent, rgba(var(--accent-primary-rgb),0.5), rgba(var(--accent-secondary-rgb),0.3), transparent);
+      }
+
+      :host([vertical][variant="line-gradient"]) .divider {
+        width: 2px;
+        max-width: none;
+        background: linear-gradient(180deg, transparent, var(--accent-primary), var(--accent-secondary), transparent);
+        box-shadow: 0 0 10px rgba(var(--accent-primary-rgb),0.25);
+      }
+
+      :host([vertical][variant="line-primary"]) .divider {
+        width: 2px;
+        max-width: none;
+        background: linear-gradient(180deg, transparent, rgba(var(--accent-primary-rgb),0.7), transparent);
+        box-shadow: 0 0 8px rgba(var(--accent-primary-rgb),0.3);
+      }
+
+      :host([vertical][variant="line-white"]) .divider {
+        width: 2px;
+        max-width: none;
+        background: linear-gradient(180deg, transparent, rgba(var(--text-primary-rgb),0.35), transparent);
+      }
+
+      @keyframes divider-shimmer {
+        0%, 100% { background-position: 200% 0; }
+        50% { background-position: -100% 0; }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        :host([variant="glow"]) .divider::after { animation: none; }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.variant = 'subtle';
+    this.vertical = false;
+  }
+
+  render() {
+    return html`<div class="divider" role="separator" aria-orientation=${this.vertical ? 'vertical' : 'horizontal'} part="divider"></div>`;
+  }
+}
+
+customElements.define('arc-divider', ArcDivider);

package/src/content/empty-state.js

@@ -0,0 +1,78 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcEmptyState extends LitElement {
+  static properties = {
+    heading:     { type: String },
+    description: { type: String },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; }
+
+      .empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        padding: var(--space-2xl) var(--space-xl);
+        border: 1px dashed var(--border-default);
+        border-radius: var(--radius-lg);
+        background: var(--bg-card);
+      }
+
+      .empty__icon {
+        margin-bottom: var(--space-lg);
+        color: var(--text-ghost);
+        font-size: 40px; /* icon size, not text */
+      }
+
+      .empty__heading {
+        margin: 0 0 var(--space-sm);
+        font-family: var(--font-body);
+        font-size: var(--heading-size);
+        font-weight: var(--heading-weight);
+        color: var(--text-primary);
+      }
+
+      .empty__desc {
+        margin: 0 0 var(--space-lg);
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+        line-height: var(--body-lh);
+        color: var(--text-muted);
+        max-width: 360px;
+      }
+
+      .empty__actions {
+        display: flex;
+        gap: var(--space-sm);
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.heading = '';
+    this.description = '';
+  }
+
+  render() {
+    return html`
+      <div class="empty" part="container" role="status">
+        <div class="empty__icon" part="icon" aria-hidden="true">
+          <slot name="icon"></slot>
+        </div>
+        ${this.heading ? html`<h3 class="empty__heading" part="heading">${this.heading}</h3>` : ''}
+        ${this.description ? html`<p class="empty__desc" part="description">${this.description}</p>` : ''}
+        <div class="empty__actions" part="actions">
+          <slot name="action"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-empty-state', ArcEmptyState);

package/src/content/feature-card.js

@@ -0,0 +1,142 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcFeatureCard extends LitElement {
+  static properties = {
+    icon:        { type: String },
+    heading:     { type: String },
+    description: { type: String },
+    href:        { type: String },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; height: 100%; }
+
+      .card {
+        position: relative;
+        border-radius: var(--radius-lg);
+        height: 100%;
+        padding: 1px;
+        background: var(--border-subtle);
+        transition: background var(--transition-slow);
+        text-decoration: none;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .card:hover {
+        background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.3), rgba(var(--accent-secondary-rgb),0.15), var(--border-default));
+      }
+
+      .card__inner {
+        position: relative;
+        background: var(--bg-card);
+        border-radius: calc(var(--radius-lg) - 1px);
+        padding: var(--space-xl) var(--space-lg);
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-md);
+        flex: 1;
+        transition: box-shadow var(--transition-slow);
+        z-index: 1;
+      }
+
+      .card:hover .card__inner {
+        box-shadow: inset 0 1px 0 var(--bg-hover), var(--glow-card-hover);
+      }
+
+      .card__icon {
+        width: 44px;
+        height: 44px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--radius-md);
+        background: var(--accent-primary-subtle);
+        border: 1px solid var(--accent-primary-border);
+        color: var(--accent-primary);
+        font-size: 20px; /* icon size, not text */
+        transition: box-shadow var(--transition-slow), border-color var(--transition-slow), transform var(--transition-slow);
+      }
+
+      .card:hover .card__icon {
+        border-color: rgba(var(--accent-primary-rgb),0.3);
+        box-shadow: 0 0 20px var(--accent-primary-glow), 0 0 6px var(--accent-primary-border);
+        transform: translateY(-2px);
+      }
+
+      .card__title {
+        font-size: 17px; /* heading size, keep hardcoded */
+        font-weight: 600;
+        color: var(--text-primary);
+        transition: color var(--transition-slow);
+        margin: 0;
+      }
+
+      .card:hover .card__title { color: var(--text-primary); }
+
+      .card__desc {
+        color: var(--text-secondary);
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        line-height: 1.7;
+        flex: 1;
+        margin: 0;
+      }
+
+      .card__rule {
+        width: 32px;
+        height: 1px;
+        background: linear-gradient(90deg, var(--accent-primary), transparent);
+        opacity: 0;
+        transition: opacity var(--transition-slow), width var(--transition-slow);
+      }
+
+      .card:hover .card__rule { opacity: 0.5; width: 48px; }
+
+      .card:focus-visible { outline: none; box-shadow: var(--focus-glow); border-radius: var(--radius-lg); }
+
+      @media (max-width: 768px) {
+        .card__inner { padding: var(--space-lg) var(--space-md); }
+      }
+
+      @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.icon = '';
+    this.heading = '';
+    this.description = '';
+    this.href = '';
+  }
+
+  render() {
+    const inner = html`
+      <div class="card__inner" part="inner">
+        <div class="card__icon" part="icon"><slot name="icon">${this.icon}</slot></div>
+        <h3 class="card__title" part="title">${this.heading}</h3>
+        <p class="card__desc" part="description">${this.description}</p>
+        <span class="card__rule"></span>
+      </div>
+    `;
+
+    if (this.href) {
+      return html`<a class="card" href=${this.href} part="card">${inner}</a>`;
+    }
+    return html`<div class="card" part="card">${inner}</div>`;
+  }
+}
+
+customElements.define('arc-feature-card', ArcFeatureCard);