@arclux/arc-ui 1.0.0

package/src/content/table.js

@@ -0,0 +1,134 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcTable extends LitElement {
+  static properties = {
+    columns: { type: Array },
+    rows:    { type: Array },
+    striped: { type: Boolean, reflect: true },
+    compact: { type: Boolean, reflect: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+      }
+
+      .table-wrap {
+        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);
+      }
+
+      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: 2px;
+        text-transform: uppercase;
+        color: var(--text-ghost);
+        border-bottom: 1px solid var(--border-default);
+        white-space: nowrap;
+      }
+
+      :host([compact]) th {
+        padding: var(--space-xs) var(--space-sm);
+      }
+
+      td {
+        padding: var(--space-sm) var(--space-md);
+        border-bottom: 1px solid var(--border-subtle);
+        color: var(--text-secondary);
+        line-height: 1.5;
+        font-size: var(--text-sm);
+      }
+
+      :host([compact]) td {
+        padding: var(--space-xs) var(--space-sm);
+        font-size: var(--text-sm);
+      }
+
+      tr:last-child td {
+        border-bottom: none;
+      }
+
+      :host([striped]) tbody tr:nth-child(odd) {
+        background: var(--bg-surface);
+      }
+
+      :host([striped]) tbody tr:nth-child(even) {
+        background: var(--bg-card);
+      }
+
+      tbody tr {
+        transition: background var(--transition-fast);
+      }
+
+      tbody tr:hover {
+        background: var(--bg-hover);
+      }
+
+      @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.columns = [];
+    this.rows = [];
+    this.striped = false;
+    this.compact = false;
+  }
+
+  render() {
+    if (!this.columns.length) return '';
+
+    return html`
+      <div class="table-wrap" part="table-wrap">
+        <table part="table">
+          <thead part="head">
+            <tr>
+              ${this.columns.map(col => html`<th>${col}</th>`)}
+            </tr>
+          </thead>
+          <tbody part="body">
+            ${this.rows.map(row => html`
+              <tr part="row">
+                ${(Array.isArray(row) ? row : this.columns.map((_, i) => row[i])).map(
+                  cell => html`<td part="cell">${cell ?? ''}</td>`
+                )}
+              </tr>
+            `)}
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-table', ArcTable);

package/src/content/tag.js

@@ -0,0 +1,156 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcTag extends LitElement {
+  static properties = {
+    variant:   { type: String, reflect: true },
+    removable: { type: Boolean, reflect: true },
+    disabled:  { type: Boolean, reflect: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: inline-flex; }
+      :host([disabled]) { pointer-events: none; opacity: 0.4; }
+
+      .tag {
+        display: inline-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;
+        color: var(--text-muted);
+        padding: var(--space-xs) calc(var(--space-sm) + var(--space-xs));
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-full);
+        background: var(--bg-hover);
+        transition: box-shadow var(--transition-base), border-color var(--transition-base);
+        line-height: 1.4;
+        min-height: var(--touch-min);
+      }
+
+      :host([variant="primary"]) .tag {
+        border-color: var(--accent-primary-border);
+        color: var(--accent-primary);
+        background: var(--accent-primary-subtle);
+      }
+
+      :host([variant="secondary"]) .tag {
+        border-color: var(--accent-secondary-border);
+        color: var(--accent-secondary);
+        background: var(--accent-secondary-subtle);
+      }
+
+      :host([variant="success"]) .tag {
+        border-color: rgba(var(--color-success-rgb), 0.2);
+        color: var(--color-success);
+        background: rgba(var(--color-success-rgb), 0.06);
+      }
+
+      :host([variant="warning"]) .tag {
+        border-color: rgba(var(--color-warning-rgb), 0.2);
+        color: var(--color-warning);
+        background: rgba(var(--color-warning-rgb), 0.06);
+      }
+
+      :host([variant="danger"]) .tag {
+        border-color: rgba(var(--color-error-rgb), 0.2);
+        color: var(--color-error);
+        background: rgba(var(--color-error-rgb), 0.06);
+      }
+
+      .tag:hover { border-color: var(--border-bright); }
+      :host([variant="primary"]) .tag:hover { box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.15); }
+      :host([variant="secondary"]) .tag:hover { box-shadow: 0 0 12px rgba(var(--accent-secondary-rgb), 0.15); }
+      :host([variant="success"]) .tag:hover { box-shadow: 0 0 12px rgba(var(--color-success-rgb), 0.15); }
+      :host([variant="warning"]) .tag:hover { box-shadow: 0 0 12px rgba(var(--color-warning-rgb), 0.15); }
+      :host([variant="danger"]) .tag:hover { box-shadow: 0 0 12px rgba(var(--color-error-rgb), 0.15); }
+
+      .tag__label {
+        display: inline-flex;
+        align-items: center;
+      }
+
+      .tag__remove {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        background: none;
+        border: none;
+        color: inherit;
+        cursor: pointer;
+        padding: var(--space-xs);
+        margin-left: var(--space-xs);
+        width: 24px;
+        height: 24px;
+        min-width: 24px;
+        border-radius: var(--radius-full);
+        opacity: 0.6;
+        transition: opacity var(--transition-fast), background var(--transition-fast);
+      }
+
+      .tag__remove:hover {
+        opacity: 1;
+        background: var(--bg-elevated);
+      }
+
+      .tag__remove:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-glow);
+      }
+
+      @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.variant = 'default';
+    this.removable = false;
+    this.disabled = false;
+  }
+
+  _remove(e) {
+    e.stopPropagation();
+    if (this.disabled) return;
+    this.dispatchEvent(new CustomEvent('arc-remove', {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  render() {
+    return html`
+      <span class="tag" part="tag">
+        <span class="tag__label" part="label"><slot></slot></span>
+        ${this.removable ? html`
+          <button
+            class="tag__remove"
+            @click=${this._remove}
+            aria-label="Remove tag"
+            tabindex=${this.disabled ? '-1' : '0'}
+            part="remove"
+          >
+            <svg width="10" height="10" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+              <path d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"/>
+            </svg>
+          </button>
+        ` : ''}
+      </span>
+    `;
+  }
+}
+
+customElements.define('arc-tag', ArcTag);

package/src/content/text.js

@@ -0,0 +1,111 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcText extends LitElement {
+  static properties = {
+    variant: { type: String, reflect: true },
+    as:      { type: String },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; }
+      :host([variant="accent"]),
+      :host([variant="code"]) { display: inline; }
+
+      .text--display {
+        font-size: var(--display-xl-size);
+        font-weight: var(--display-xl-weight);
+        letter-spacing: var(--display-xl-spacing);
+        line-height: 1.2;
+        padding-bottom: 0.1em;
+        background: var(--gradient-display-text);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+      }
+
+      .text--heading {
+        font-size: var(--heading-size);
+        font-weight: var(--heading-weight);
+        color: var(--text-primary);
+        line-height: 1.4;
+        text-wrap: balance;
+        margin-bottom: var(--space-md);
+      }
+
+      .text--body {
+        color: var(--text-secondary);
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+        font-weight: var(--body-weight);
+        line-height: var(--body-lh);
+        text-wrap: balance;
+      }
+
+      .text--muted { color: var(--text-muted); }
+      .text--ghost { color: var(--text-ghost); }
+
+      .text--accent {
+        font-family: var(--font-accent);
+        font-weight: var(--ui-accent-weight);
+        font-size: var(--ui-accent-size);
+        letter-spacing: var(--ui-accent-spacing);
+        background: var(--gradient-accent-text);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        filter: drop-shadow(0 0 12px var(--accent-primary-glow));
+      }
+
+      .text--label {
+        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-muted);
+      }
+
+      .text--wordmark {
+        font-weight: var(--wordmark-weight);
+        font-size: var(--wordmark-size);
+        letter-spacing: var(--wordmark-spacing);
+        text-transform: uppercase;
+        color: var(--text-primary);
+        text-shadow: 0 0 30px var(--accent-primary-glow);
+      }
+
+      .text--code {
+        font-family: var(--font-mono);
+        font-size: var(--code-size);
+        line-height: var(--code-lh);
+        color: var(--accent-secondary);
+        text-shadow: 0 0 14px rgba(var(--accent-secondary-rgb),0.3);
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.variant = 'body';
+    this.as = 'p';
+  }
+
+  render() {
+    const tag = this.as;
+    switch (tag) {
+      case 'h1': return html`<h1 class="text--${this.variant}" part="text"><slot></slot></h1>`;
+      case 'h2': return html`<h2 class="text--${this.variant}" part="text"><slot></slot></h2>`;
+      case 'h3': return html`<h3 class="text--${this.variant}" part="text"><slot></slot></h3>`;
+      case 'h4': return html`<h4 class="text--${this.variant}" part="text"><slot></slot></h4>`;
+      case 'h5': return html`<h5 class="text--${this.variant}" part="text"><slot></slot></h5>`;
+      case 'h6': return html`<h6 class="text--${this.variant}" part="text"><slot></slot></h6>`;
+      case 'span': return html`<span class="text--${this.variant}" part="text"><slot></slot></span>`;
+      default: return html`<p class="text--${this.variant}" part="text"><slot></slot></p>`;
+    }
+  }
+}
+
+customElements.define('arc-text', ArcText);

package/src/content/timeline-item.js

@@ -0,0 +1,29 @@
+import { LitElement, html, css } from 'lit';
+
+export class ArcTimelineItem extends LitElement {
+  static properties = {
+    heading: { type: String, reflect: true },
+    date:    { type: String, reflect: true },
+  };
+
+  static styles = css`
+    :host { display: none; }
+  `;
+
+  constructor() {
+    super();
+    this.heading = '';
+    this.date = '';
+  }
+
+  /** Description from slotted text content */
+  get description() {
+    return this.textContent.trim();
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define('arc-timeline-item', ArcTimelineItem);

package/src/content/timeline.js

@@ -0,0 +1,170 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+import './timeline-item.js';
+
+export class ArcTimeline extends LitElement {
+  static properties = {
+    _items: { state: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; }
+
+      .timeline {
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+        padding: 0;
+        margin: 0;
+        list-style: none;
+      }
+
+      .timeline__item {
+        display: flex;
+        gap: var(--space-lg);
+        position: relative;
+        padding-bottom: var(--space-xl);
+      }
+
+      .timeline__item:last-child { padding-bottom: 0; }
+
+      .timeline__marker {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex-shrink: 0;
+        width: 24px;
+        position: relative;
+      }
+
+      .timeline__dot {
+        width: 12px;
+        height: 12px;
+        border-radius: var(--radius-full);
+        background: var(--accent-primary);
+        border: 2px solid var(--bg-deep);
+        box-shadow:
+          0 0 0 1px rgba(var(--accent-primary-rgb), 0.3),
+          0 0 8px rgba(var(--accent-primary-rgb), 0.25);
+        flex-shrink: 0;
+        z-index: 1;
+        position: relative;
+        transition: box-shadow var(--transition-fast), transform var(--transition-fast);
+      }
+
+      .timeline__item:hover .timeline__dot {
+        box-shadow:
+          0 0 0 2px rgba(var(--accent-primary-rgb), 0.4),
+          0 0 14px rgba(var(--accent-primary-rgb), 0.4);
+        transform: scale(1.2);
+      }
+
+      .timeline__line {
+        position: absolute;
+        top: 16px;
+        bottom: calc(-1 * var(--space-xl));
+        left: 50%;
+        width: 1px;
+        transform: translateX(-50%);
+        background: linear-gradient(180deg, rgba(var(--accent-primary-rgb), 0.4), var(--border-default) 40%);
+      }
+
+      .timeline__item:last-child .timeline__line { display: none; }
+
+      .timeline__content {
+        flex: 1;
+        min-width: 0;
+        padding-top: 0;
+      }
+
+      .timeline__title {
+        margin: 0;
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        font-weight: 600;
+        letter-spacing: 1.5px;
+        text-transform: uppercase;
+        color: var(--text-primary);
+        line-height: 1.4;
+        transition: color var(--transition-fast);
+      }
+
+      .timeline__item:hover .timeline__title {
+        color: var(--accent-primary);
+      }
+
+      .timeline__desc {
+        margin: var(--space-sm) 0 0;
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        line-height: 1.6;
+        color: var(--text-muted);
+      }
+
+      .timeline__date {
+        margin: var(--space-sm) 0 0;
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        font-weight: 600;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: var(--text-ghost);
+      }
+
+      .timeline__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 = [];
+  }
+
+  _onSlotChange(e) {
+    this._items = e.target.assignedElements({ flatten: true })
+      .filter(el => el.tagName === 'ARC-TIMELINE-ITEM');
+  }
+
+  render() {
+    return html`
+      <div class="timeline__slot-host">
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+      <ol class="timeline" part="timeline" role="list">
+        ${this._items.map(
+          (item) => html`
+            <li class="timeline__item" part="item">
+              <div class="timeline__marker" part="marker">
+                <span class="timeline__dot" part="dot"></span>
+                <span class="timeline__line" part="line"></span>
+              </div>
+              <div class="timeline__content" part="content">
+                <h4 class="timeline__title" part="title">${item.heading || ''}</h4>
+                ${item.description
+                  ? html`<p class="timeline__desc" part="description">${item.description}</p>`
+                  : ''}
+                ${item.date
+                  ? html`<time class="timeline__date" part="date">${item.date}</time>`
+                  : ''}
+              </div>
+            </li>
+          `
+        )}
+      </ol>
+    `;
+  }
+}
+
+customElements.define('arc-timeline', ArcTimeline);