@arclux/arc-ui 1.0.0

package/src/content/scroll-area.js

@@ -0,0 +1,107 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcScrollArea extends LitElement {
+  static properties = {
+    maxHeight:    { type: String, attribute: 'max-height', reflect: true },
+    orientation:  { type: String, reflect: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: block;
+        position: relative;
+      }
+
+      .scroll-area {
+        overflow: hidden;
+        scroll-behavior: smooth;
+        border-radius: inherit;
+      }
+
+      /* Orientation variants */
+      :host([orientation="vertical"]) .scroll-area,
+      :host(:not([orientation])) .scroll-area {
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
+
+      :host([orientation="horizontal"]) .scroll-area {
+        overflow-x: auto;
+        overflow-y: hidden;
+      }
+
+      :host([orientation="both"]) .scroll-area {
+        overflow: auto;
+      }
+
+      /* Webkit scrollbar styling */
+      .scroll-area::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+      }
+
+      .scroll-area::-webkit-scrollbar-track {
+        background: var(--bg-elevated);
+        border-radius: var(--radius-full);
+      }
+
+      .scroll-area::-webkit-scrollbar-thumb {
+        background: var(--border-bright);
+        border-radius: var(--radius-full);
+        transition: background var(--transition-fast);
+      }
+
+      .scroll-area::-webkit-scrollbar-thumb:hover {
+        background: var(--text-ghost);
+      }
+
+      .scroll-area::-webkit-scrollbar-corner {
+        background: var(--bg-elevated);
+      }
+
+      /* Firefox scrollbar styling */
+      .scroll-area {
+        scrollbar-width: thin;
+        scrollbar-color: var(--border-bright) var(--bg-elevated);
+      }
+
+      @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.maxHeight = '';
+    this.orientation = 'vertical';
+  }
+
+  render() {
+    const styles = this.maxHeight ? `max-height: ${this.maxHeight}` : '';
+
+    return html`
+      <div
+        class="scroll-area"
+        style=${styles}
+        tabindex="0"
+        role="region"
+        aria-label="Scrollable content"
+        part="scroll-area"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-scroll-area', ArcScrollArea);

package/src/content/skeleton.js

@@ -0,0 +1,85 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcSkeleton extends LitElement {
+  static properties = {
+    variant: { type: String, reflect: true },
+    width:   { type: String },
+    height:  { type: String },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; }
+
+      @keyframes shimmer {
+        0%   { background-position: -200% 0; }
+        100% { background-position: 200% 0; }
+      }
+
+      .skeleton {
+        background: linear-gradient(
+          90deg,
+          var(--bg-elevated) 25%,
+          var(--border-subtle) 37%,
+          var(--bg-elevated) 63%
+        );
+        background-size: 200% 100%;
+        animation: shimmer 1.8s ease-in-out infinite;
+      }
+
+      :host([variant="text"]) .skeleton {
+        width: 100%;
+        height: 1em;
+        border-radius: var(--radius-sm);
+      }
+
+      :host([variant="circle"]) .skeleton {
+        border-radius: var(--radius-full);
+      }
+
+      :host([variant="rect"]) .skeleton {
+        border-radius: var(--radius-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.variant = 'text';
+    this.width = '';
+    this.height = '';
+  }
+
+  render() {
+    const styles = [
+      this.width ? `width:${this.width}` : '',
+      this.height ? `height:${this.height}` : '',
+      this.variant === 'circle' && !this.height && this.width ? `height:${this.width}` : '',
+    ].filter(Boolean).join(';');
+
+    return html`
+      <div
+        class="skeleton"
+        part="skeleton"
+        role="status"
+        aria-label="Loading"
+        aria-busy="true"
+        style=${styles}
+      ></div>
+    `;
+  }
+}
+
+customElements.define('arc-skeleton', ArcSkeleton);

package/src/content/spinner.js

@@ -0,0 +1,77 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcSpinner extends LitElement {
+  static properties = {
+    size:    { type: String, reflect: true },
+    variant: { type: String, reflect: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: inline-flex; }
+
+      @keyframes spin {
+        to { transform: rotate(360deg); }
+      }
+
+      .spinner {
+        border-radius: var(--radius-full);
+        border-style: solid;
+        border-color: var(--accent-primary);
+        border-top-color: transparent;
+        animation: spin 0.75s linear infinite;
+        box-sizing: border-box;
+      }
+
+      :host([size="sm"]) .spinner { width: 16px; height: 16px; border-width: 2px; }
+      :host([size="md"]) .spinner { width: 24px; height: 24px; border-width: 2.5px; }
+      :host([size="lg"]) .spinner { width: 40px; height: 40px; border-width: 3px; }
+
+      :host([variant="primary"]) .spinner {
+        border-color: var(--accent-primary);
+        border-top-color: transparent;
+      }
+
+      :host([variant="secondary"]) .spinner {
+        border-color: var(--accent-secondary);
+        border-top-color: transparent;
+      }
+
+      :host([variant="white"]) .spinner {
+        border-color: var(--text-primary);
+        border-top-color: transparent;
+      }
+
+      @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.size = 'md';
+    this.variant = 'primary';
+  }
+
+  render() {
+    return html`
+      <div
+        class="spinner"
+        part="spinner"
+        role="status"
+        aria-label="Loading"
+      ></div>
+    `;
+  }
+}
+
+customElements.define('arc-spinner', ArcSpinner);

package/src/content/stack.js

@@ -0,0 +1,68 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcStack extends LitElement {
+  static properties = {
+    direction: { type: String, reflect: true },
+    gap:       { type: String, reflect: true },
+    align:     { type: String, reflect: true },
+    justify:   { type: String, reflect: true },
+    wrap:      { type: Boolean, reflect: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-md);
+        align-items: stretch;
+        justify-content: flex-start;
+      }
+
+      /* Direction */
+      :host([direction="horizontal"]) { flex-direction: row; }
+      :host([direction="vertical"])   { flex-direction: column; }
+
+      /* Gap */
+      :host([gap="xs"])  { gap: var(--space-xs); }
+      :host([gap="sm"])  { gap: var(--space-sm); }
+      :host([gap="md"])  { gap: var(--space-md); }
+      :host([gap="lg"])  { gap: var(--space-lg); }
+      :host([gap="xl"])  { gap: var(--space-xl); }
+      :host([gap="2xl"]) { gap: var(--space-2xl); }
+
+      /* Align */
+      :host([align="start"])   { align-items: flex-start; }
+      :host([align="center"])  { align-items: center; }
+      :host([align="end"])     { align-items: flex-end; }
+      :host([align="stretch"]) { align-items: stretch; }
+
+      /* Justify */
+      :host([justify="start"])   { justify-content: flex-start; }
+      :host([justify="center"])  { justify-content: center; }
+      :host([justify="end"])     { justify-content: flex-end; }
+      :host([justify="between"]) { justify-content: space-between; }
+      :host([justify="around"])  { justify-content: space-around; }
+
+      /* Wrap */
+      :host([wrap]) { flex-wrap: wrap; }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.direction = 'vertical';
+    this.gap = 'md';
+    this.align = 'stretch';
+    this.justify = 'start';
+    this.wrap = false;
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define('arc-stack', ArcStack);

package/src/content/stat.js

@@ -0,0 +1,72 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcStat extends LitElement {
+  static properties = {
+    value: { type: String },
+    label: { type: String },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; }
+
+      .stat {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--space-sm);
+        text-align: center;
+        padding: var(--space-lg) var(--space-md);
+      }
+
+      .stat__value {
+        font-size: clamp(32px, 4.5vw, 48px);
+        font-weight: 200;
+        letter-spacing: -1px;
+        line-height: 1;
+        background: var(--gradient-accent-text);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        filter: drop-shadow(0 0 16px rgba(var(--accent-primary-rgb),0.3))
+                drop-shadow(0 0 40px rgba(var(--accent-secondary-rgb),0.12));
+      }
+
+      .stat__rule {
+        width: 24px;
+        height: 1px;
+        background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
+        opacity: 0.4;
+      }
+
+      .stat__label {
+        font-family: var(--font-accent);
+        font-weight: 600;
+        font-size: var(--label-inline-size);
+        letter-spacing: var(--label-inline-spacing);
+        text-transform: uppercase;
+        color: var(--text-muted);
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.value = '';
+    this.label = '';
+  }
+
+  render() {
+    return html`
+      <div class="stat" part="stat">
+        <span class="stat__value" part="value">${this.value}</span>
+        <span class="stat__rule"></span>
+        <span class="stat__label" part="label">${this.label}</span>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-stat', ArcStat);

package/src/content/step.js

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

package/src/content/stepper.js

@@ -0,0 +1,202 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+import './step.js';
+
+export class ArcStepper extends LitElement {
+  static properties = {
+    active: { type: Number, reflect: true },
+    _steps: { state: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; }
+
+      .stepper {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--space-xs);
+      }
+
+      .step {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex: 1;
+        position: relative;
+        padding: 0 var(--space-sm);
+      }
+
+      .step__header {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        position: relative;
+      }
+
+      .step__circle {
+        width: 36px;
+        height: 36px;
+        border-radius: var(--radius-full);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: var(--font-accent);
+        font-size: var(--text-sm);
+        font-weight: 700;
+        letter-spacing: 1px;
+        flex-shrink: 0;
+        position: relative;
+        z-index: 1;
+        transition: background var(--transition-base),
+                    color var(--transition-base),
+                    border-color var(--transition-base),
+                    box-shadow var(--transition-base);
+        margin: 0 auto;
+        box-sizing: border-box;
+      }
+
+      /* Upcoming (default) */
+      .step__circle {
+        background: var(--bg-elevated);
+        color: var(--text-ghost);
+        border: 1px solid var(--border-default);
+      }
+
+      /* Active */
+      .step--active .step__circle {
+        background: transparent;
+        color: var(--accent-primary);
+        border: 2px solid var(--accent-primary);
+        box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.25);
+      }
+
+      /* Completed */
+      .step--completed .step__circle {
+        background: var(--accent-primary);
+        color: var(--text-primary);
+        border: 2px solid var(--accent-primary);
+      }
+
+      .step__line {
+        position: absolute;
+        top: 50%;
+        height: 1px;
+        background: var(--border-default);
+        transform: translateY(-50%);
+      }
+
+      .step__line--left {
+        left: calc(-1 * var(--space-xs) - var(--space-sm));
+        right: calc(50% + 20px);
+      }
+
+      .step__line--right {
+        left: calc(50% + 20px);
+        right: calc(-1 * var(--space-xs) - var(--space-sm));
+      }
+
+      .step--completed .step__line--left,
+      .step--active .step__line--left {
+        background: var(--accent-primary);
+      }
+
+      .step--completed .step__line--right {
+        background: var(--accent-primary);
+      }
+
+      .step__label {
+        margin-top: var(--space-md);
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        font-weight: 600;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: var(--text-muted);
+        text-align: center;
+        transition: color var(--transition-base);
+      }
+
+      .step--active .step__label {
+        color: var(--text-primary);
+      }
+
+      .step--completed .step__label {
+        color: var(--text-secondary);
+      }
+
+      .step__check {
+        font-size: var(--text-sm);
+        line-height: 1;
+      }
+
+      .stepper__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 = 0;
+    this._steps = [];
+  }
+
+  _onSlotChange(e) {
+    this._steps = e.target.assignedElements({ flatten: true })
+      .filter(el => el.tagName === 'ARC-STEP');
+  }
+
+  _getStepState(index) {
+    if (index < this.active) return 'completed';
+    if (index === this.active) return 'active';
+    return 'upcoming';
+  }
+
+  render() {
+    return html`
+      <div class="stepper__slot-host">
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+      <div class="stepper" part="stepper" role="list" aria-label="Progress">
+        ${this._steps.map((step, i) => {
+          const state = this._getStepState(i);
+          const label = step.label || '';
+          const isFirst = i === 0;
+          const isLast = i === this._steps.length - 1;
+
+          return html`
+            <div
+              class="step step--${state}"
+              part="step"
+              role="listitem"
+              aria-current=${state === 'active' ? 'step' : 'false'}
+            >
+              <div class="step__header">
+                ${!isFirst ? html`<span class="step__line step__line--left" part="line"></span>` : ''}
+                <span class="step__circle" part="circle">
+                  ${state === 'completed'
+                    ? html`<span class="step__check" aria-hidden="true">&#10003;</span>`
+                    : i + 1}
+                </span>
+                ${!isLast ? html`<span class="step__line step__line--right" part="line"></span>` : ''}
+              </div>
+              <span class="step__label" part="label">${label}</span>
+            </div>
+          `;
+        })}
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-stepper', ArcStepper);