@arclux/arc-ui 1.0.0

package/src/content/carousel.js

@@ -0,0 +1,300 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcCarousel extends LitElement {
+  static properties = {
+    autoPlay:   { type: Boolean, attribute: 'auto-play', reflect: true },
+    interval:   { type: Number },
+    loop:       { type: Boolean, reflect: true },
+    showDots:   { type: Boolean, attribute: 'show-dots', reflect: true },
+    showArrows: { type: Boolean, attribute: 'show-arrows', reflect: true },
+    _current:   { state: true },
+    _total:     { state: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; position: relative; }
+
+      .carousel {
+        position: relative;
+        overflow: hidden;
+        border-radius: var(--radius-md);
+      }
+
+      .carousel__viewport {
+        display: flex;
+        overflow-x: auto;
+        scroll-snap-type: x mandatory;
+        scroll-behavior: smooth;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
+      }
+
+      .carousel__viewport::-webkit-scrollbar { display: none; }
+
+      ::slotted(*) {
+        flex: 0 0 100%;
+        width: 100%;
+        scroll-snap-align: start;
+        scroll-snap-stop: always;
+      }
+
+      /* Arrows */
+      .carousel__arrow {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 2;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        border-radius: var(--radius-full);
+        border: 1px solid var(--border-default);
+        background: var(--bg-surface);
+        color: var(--text-primary);
+        cursor: pointer;
+        transition: background var(--transition-fast),
+                    border-color var(--transition-fast),
+                    box-shadow var(--transition-fast),
+                    opacity var(--transition-fast);
+        opacity: 0.85;
+        font-size: var(--text-md);
+        line-height: 1;
+        padding: 0;
+      }
+
+      .carousel__arrow:hover {
+        background: var(--bg-elevated);
+        border-color: var(--border-bright);
+        opacity: 1;
+      }
+
+      .carousel__arrow:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-ring);
+      }
+
+      .carousel__arrow--prev { left: var(--space-sm); }
+      .carousel__arrow--next { right: var(--space-sm); }
+
+      .carousel__arrow[disabled] {
+        opacity: 0.3;
+        pointer-events: none;
+      }
+
+      /* Dots */
+      .carousel__dots {
+        display: flex;
+        justify-content: center;
+        gap: var(--space-sm);
+        padding: var(--space-sm) 0;
+      }
+
+      .carousel__dot {
+        width: 8px;
+        height: 8px;
+        border-radius: var(--radius-full);
+        border: none;
+        background: var(--border-default);
+        cursor: pointer;
+        padding: 0;
+        transition: background var(--transition-fast), transform var(--transition-fast);
+      }
+
+      .carousel__dot:hover {
+        background: var(--text-muted);
+        transform: scale(1.25);
+      }
+
+      .carousel__dot--active {
+        background: var(--accent-primary);
+        transform: scale(1.25);
+      }
+
+      .carousel__dot:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-glow);
+      }
+
+      /* Reduced motion */
+      @media (prefers-reduced-motion: reduce) {
+        .carousel__viewport { scroll-behavior: auto; }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.autoPlay = false;
+    this.interval = 5000;
+    this.loop = true;
+    this.showDots = true;
+    this.showArrows = true;
+    this._current = 0;
+    this._total = 0;
+    this._autoPlayTimer = null;
+    this._paused = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._startAutoPlay();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._stopAutoPlay();
+  }
+
+  /* ---- Slide management ---- */
+
+  _onSlotChange(e) {
+    const slides = e.target.assignedElements({ flatten: true });
+    this._total = slides.length;
+    // Ensure current is still valid
+    if (this._current >= this._total) {
+      this._current = Math.max(0, this._total - 1);
+    }
+  }
+
+  _slides() {
+    const slot = this.shadowRoot?.querySelector('slot');
+    return slot ? slot.assignedElements({ flatten: true }) : [];
+  }
+
+  _goTo(index) {
+    const slides = this._slides();
+    if (slides.length === 0) return;
+
+    let next = index;
+    if (this.loop) {
+      next = (index + slides.length) % slides.length;
+    } else {
+      next = Math.max(0, Math.min(index, slides.length - 1));
+    }
+
+    if (next === this._current && index === next) return;
+    this._current = next;
+
+    const viewport = this.shadowRoot.querySelector('.carousel__viewport');
+    if (viewport && slides[next]) {
+      slides[next].scrollIntoView({ block: 'nearest', inline: 'start', behavior: 'smooth' });
+    }
+
+    this.dispatchEvent(new CustomEvent('arc-change', {
+      detail: { index: this._current },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _prev() { this._goTo(this._current - 1); }
+  _next() { this._goTo(this._current + 1); }
+
+  /* ---- Auto-play ---- */
+
+  _startAutoPlay() {
+    this._stopAutoPlay();
+    if (!this.autoPlay) return;
+    // Respect prefers-reduced-motion
+    if (typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return;
+    this._autoPlayTimer = setInterval(() => {
+      if (!this._paused) this._next();
+    }, this.interval);
+  }
+
+  _stopAutoPlay() {
+    if (this._autoPlayTimer) {
+      clearInterval(this._autoPlayTimer);
+      this._autoPlayTimer = null;
+    }
+  }
+
+  _onMouseEnter() { this._paused = true; }
+  _onMouseLeave() { this._paused = false; }
+  _onFocusIn()    { this._paused = true; }
+  _onFocusOut()   { this._paused = false; }
+
+  updated(changed) {
+    if (changed.has('autoPlay') || changed.has('interval')) {
+      this._startAutoPlay();
+    }
+  }
+
+  /* ---- Keyboard ---- */
+
+  _onKeydown(e) {
+    if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      this._prev();
+    } else if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      this._next();
+    }
+  }
+
+  /* ---- Render ---- */
+
+  render() {
+    const canPrev = this.loop || this._current > 0;
+    const canNext = this.loop || this._current < this._total - 1;
+    const dots = Array.from({ length: this._total }, (_, i) => i);
+
+    return html`
+      <div
+        class="carousel"
+        part="carousel"
+        role="region"
+        aria-roledescription="carousel"
+        aria-label="Carousel"
+        @keydown=${this._onKeydown}
+        @mouseenter=${this._onMouseEnter}
+        @mouseleave=${this._onMouseLeave}
+        @focusin=${this._onFocusIn}
+        @focusout=${this._onFocusOut}
+      >
+        <div class="carousel__viewport" part="viewport" tabindex="0">
+          <slot @slotchange=${this._onSlotChange}></slot>
+        </div>
+
+        ${this.showArrows ? html`
+          <button
+            class="carousel__arrow carousel__arrow--prev"
+            part="arrow-prev"
+            aria-label="Previous slide"
+            ?disabled=${!canPrev}
+            @click=${this._prev}
+          >&#8249;</button>
+          <button
+            class="carousel__arrow carousel__arrow--next"
+            part="arrow-next"
+            aria-label="Next slide"
+            ?disabled=${!canNext}
+            @click=${this._next}
+          >&#8250;</button>
+        ` : ''}
+
+        ${this.showDots && this._total > 1 ? html`
+          <div class="carousel__dots" part="dots" role="tablist" aria-label="Slide controls">
+            ${dots.map(i => html`
+              <button
+                class="carousel__dot ${i === this._current ? 'carousel__dot--active' : ''}"
+                part="dot"
+                role="tab"
+                aria-selected=${i === this._current ? 'true' : 'false'}
+                aria-label="Go to slide ${i + 1}"
+                @click=${() => this._goTo(i)}
+              ></button>
+            `)}
+          </div>
+        ` : ''}
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-carousel', ArcCarousel);

package/src/content/code-block.js

@@ -0,0 +1,152 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+/**
+ * @arc-prism hybrid — display works without JS; copy-to-clipboard requires JS
+ */
+export class ArcCodeBlock extends LitElement {
+  static properties = {
+    language: { type: String, reflect: true },
+    filename: { type: String },
+    code:     { type: String },
+    _copied:  { state: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; }
+
+      .code-block {
+        background: var(--bg-surface);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-lg);
+        overflow: hidden;
+      }
+
+      .code-block__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--space-xs) var(--space-md);
+        border-bottom: 1px solid var(--border-subtle);
+        background: var(--bg-card);
+      }
+
+      .code-block__filename {
+        font-family: var(--font-mono);
+        font-size: var(--text-sm);
+        color: var(--text-muted);
+      }
+
+      .code-block__lang {
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: var(--text-ghost);
+      }
+
+      .code-block__copy {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+        background: none;
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-sm);
+        color: var(--text-muted);
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        padding: var(--space-xs) var(--space-sm);
+        cursor: pointer;
+        transition: color var(--transition-fast), border-color var(--transition-fast);
+      }
+
+      .code-block__copy:hover {
+        color: var(--text-primary);
+        border-color: var(--border-bright);
+      }
+
+      .code-block__copy[data-copied] {
+        color: var(--color-success);
+        border-color: var(--color-success);
+      }
+
+      .code-block__body {
+        padding: var(--space-md);
+        overflow-x: auto;
+      }
+
+      .code-block__pre {
+        margin: 0;
+        font-family: var(--font-mono);
+        font-size: var(--code-size);
+        line-height: var(--code-lh);
+        color: var(--text-primary);
+        white-space: pre;
+        tab-size: 2;
+      }
+
+      @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.language = '';
+    this.filename = '';
+    this.code = '';
+    this._copied = false;
+    this._copyTimer = null;
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._copyTimer) clearTimeout(this._copyTimer);
+  }
+
+  async _copy() {
+    const text = this.code || '';
+    try {
+      await navigator.clipboard.writeText(text);
+      this._copied = true;
+      if (this._copyTimer) clearTimeout(this._copyTimer);
+      this._copyTimer = setTimeout(() => { this._copied = false; this._copyTimer = null; }, 2000);
+    } catch {
+      // Copy failed — requires secure context (HTTPS) or user gesture
+    }
+  }
+
+  render() {
+    return html`
+      <div class="code-block" part="code-block">
+        <div class="code-block__header" part="header">
+          <span class="code-block__filename" part="filename">${this.filename || ''}</span>
+          <span class="code-block__lang" part="lang">${this.language}</span>
+          <button
+            class="code-block__copy"
+            ?data-copied=${this._copied}
+            @click=${this._copy}
+            aria-label=${this._copied ? 'Copied to clipboard' : 'Copy code'}
+            part="copy"
+          >${this._copied ? 'Copied' : 'Copy'}</button>
+        </div>
+        <div class="code-block__body" part="body">
+          <pre class="code-block__pre" part="pre"><code part="code"><slot>${this.code}</slot></code></pre>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-code-block', ArcCodeBlock);

package/src/content/collapsible.js

@@ -0,0 +1,142 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcCollapsible extends LitElement {
+  static properties = {
+    open:    { type: Boolean, reflect: true },
+    heading: { type: String },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; }
+
+      .collapsible {
+        border: 1px solid var(--border-subtle);
+        border-radius: var(--radius-lg);
+        background: var(--bg-card);
+        overflow: hidden;
+      }
+
+      .collapsible__trigger {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--space-md);
+        width: 100%;
+        padding: var(--space-md) var(--space-lg);
+        cursor: pointer;
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+        font-weight: 600;
+        color: var(--text-primary);
+        background: none;
+        border: none;
+        text-align: left;
+        transition: background var(--transition-fast);
+      }
+
+      .collapsible__trigger:hover {
+        background: var(--bg-elevated);
+      }
+
+      .collapsible__trigger:focus-visible {
+        outline: none;
+        box-shadow: inset 0 0 0 2px var(--accent-primary);
+        background: var(--bg-elevated);
+      }
+
+      .collapsible__chevron {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--text-muted);
+        font-size: var(--text-xs);
+        flex-shrink: 0;
+        transition: transform 300ms ease;
+        transform: rotate(0deg);
+      }
+
+      :host([open]) .collapsible__chevron {
+        transform: rotate(90deg);
+      }
+
+      .collapsible__content {
+        display: grid;
+        grid-template-rows: 0fr;
+        transition: grid-template-rows 300ms ease;
+      }
+
+      :host([open]) .collapsible__content {
+        grid-template-rows: 1fr;
+      }
+
+      .collapsible__body {
+        overflow: hidden;
+      }
+
+      .collapsible__inner {
+        padding: 0 var(--space-lg) var(--space-lg);
+        color: var(--text-secondary);
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+        line-height: var(--body-lh);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .collapsible__chevron,
+        .collapsible__content { transition: none; }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.open = false;
+    this.heading = '';
+  }
+
+  _toggle() {
+    this.open = !this.open;
+    this.dispatchEvent(new CustomEvent('arc-toggle', {
+      detail: { open: this.open },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _handleKeydown(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this._toggle();
+    }
+  }
+
+  render() {
+    return html`
+      <div class="collapsible" part="collapsible">
+        <button
+          class="collapsible__trigger"
+          aria-expanded=${this.open ? 'true' : 'false'}
+          aria-controls="content"
+          @click=${this._toggle}
+          @keydown=${this._handleKeydown}
+          part="trigger"
+        >
+          <span part="heading">${this.heading}</span>
+          <span class="collapsible__chevron" aria-hidden="true">&#9656;</span>
+        </button>
+        <div class="collapsible__content" id="content" role="region" aria-label=${this.heading || 'Collapsible content'}>
+          <div class="collapsible__body">
+            <div class="collapsible__inner" part="body">
+              <slot></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-collapsible', ArcCollapsible);

package/src/content/color-swatch.js

@@ -0,0 +1,86 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcColorSwatch extends LitElement {
+  static properties = {
+    color: { type: String },
+    label: { type: String },
+    size:  { type: String, reflect: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: inline-flex; }
+
+      .swatch {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--space-sm);
+      }
+
+      .swatch__color {
+        border-radius: var(--radius-md);
+        border: 1px solid var(--border-default);
+        transition: border-color var(--transition-base), box-shadow var(--transition-base);
+      }
+
+      .swatch__color:hover {
+        border-color: var(--border-bright);
+        box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.1);
+      }
+
+      :host([size="sm"]) .swatch__color { width: 32px; height: 32px; border-radius: var(--radius-sm); }
+      :host([size="md"]) .swatch__color { width: 48px; height: 48px; }
+      :host([size="lg"]) .swatch__color { width: 64px; height: 64px; border-radius: var(--radius-lg); }
+
+      .swatch__label {
+        font-family: var(--font-mono);
+        font-size: var(--text-sm);
+        color: var(--text-muted);
+        text-align: center;
+        max-width: 80px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      @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.color = '#4d7ef7';
+    this.label = '';
+    this.size = 'md';
+  }
+
+  render() {
+    const displayLabel = this.label || this.color;
+
+    return html`
+      <div class="swatch" part="swatch">
+        <div
+          class="swatch__color"
+          part="color"
+          style="background-color:${this.color}"
+          role="img"
+          aria-label=${`Color: ${displayLabel}`}
+        ></div>
+        <span class="swatch__label" part="label">${displayLabel}</span>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-color-swatch', ArcColorSwatch);

package/src/content/column.js

@@ -0,0 +1,28 @@
+import { LitElement, html, css } from 'lit';
+
+export class ArcColumn extends LitElement {
+  static properties = {
+    key:      { type: String, reflect: true },
+    label:    { type: String, reflect: true },
+    sortable: { type: Boolean, reflect: true },
+    width:    { type: String },
+  };
+
+  static styles = css`
+    :host { display: none; }
+  `;
+
+  constructor() {
+    super();
+    this.key = '';
+    this.label = '';
+    this.sortable = false;
+    this.width = '';
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define('arc-column', ArcColumn);