@arclux/arc-ui 1.0.0

package/src/input/file-upload.js

@@ -0,0 +1,333 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcFileUpload extends LitElement {
+  static properties = {
+    accept:    { type: String },
+    multiple:  { type: Boolean },
+    maxSize:   { type: Number, attribute: 'max-size' },
+    disabled:  { type: Boolean, reflect: true },
+    _files:    { state: true },
+    _dragOver: { state: true },
+    _error:    { state: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; font-family: var(--font-body); }
+      :host([disabled]) { opacity: 0.4; pointer-events: none; }
+
+      .dropzone {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--space-sm);
+        padding: var(--space-xl) var(--space-lg);
+        border: 2px dashed var(--border-default);
+        border-radius: var(--radius-lg);
+        background: var(--bg-surface);
+        cursor: pointer;
+        transition: border-color var(--transition-fast), background var(--transition-fast);
+        text-align: center;
+      }
+
+      .dropzone:hover {
+        border-color: var(--border-bright);
+        background: var(--bg-card);
+      }
+
+      .dropzone.drag-over {
+        border-color: rgba(var(--accent-primary-rgb), 0.4);
+        background: rgba(var(--accent-primary-rgb), 0.05);
+        box-shadow: var(--focus-glow);
+      }
+
+      .dropzone:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-glow);
+      }
+
+      .upload-icon {
+        font-size: var(--text-md);
+        color: var(--text-muted);
+        line-height: 1;
+        transition: color var(--transition-fast);
+      }
+
+      .drag-over .upload-icon {
+        color: var(--accent-primary);
+      }
+
+      .upload-text {
+        font-size: var(--text-sm);
+        color: var(--text-secondary);
+      }
+
+      .upload-hint {
+        font-size: var(--text-sm);
+        color: var(--text-muted);
+      }
+
+      .browse-link {
+        color: var(--accent-primary);
+        text-decoration: underline;
+        cursor: pointer;
+      }
+
+      input[type="file"] {
+        display: none;
+      }
+
+      .file-list {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-xs);
+        margin-top: var(--space-md);
+      }
+
+      .file-item {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        padding: var(--space-xs) var(--space-sm);
+        background: var(--bg-card);
+        border: 1px solid var(--border-subtle);
+        border-radius: var(--radius-md);
+        font-size: var(--text-sm);
+        color: var(--text-secondary);
+      }
+
+      .file-icon {
+        flex-shrink: 0;
+        color: var(--text-muted);
+        font-size: var(--text-sm);
+      }
+
+      .file-name {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: var(--text-primary);
+      }
+
+      .file-size {
+        flex-shrink: 0;
+        color: var(--text-muted);
+        font-size: var(--text-sm);
+      }
+
+      .file-remove {
+        flex-shrink: 0;
+        background: none;
+        border: none;
+        color: var(--text-muted);
+        cursor: pointer;
+        font-size: var(--text-md);
+        padding: 2px calc(var(--space-xs) + 2px); /* cosmetic 2px vertical for tight remove button */
+        border-radius: var(--radius-sm);
+        line-height: 1;
+        transition: color var(--transition-fast), background var(--transition-fast);
+      }
+
+      .file-remove:hover {
+        color: var(--color-error);
+        background: var(--color-error-subtle);
+      }
+
+      .file-remove:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-glow);
+      }
+
+      .error-message {
+        margin-top: var(--space-xs);
+        font-size: var(--text-sm);
+        color: var(--color-error);
+      }
+
+      @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.accept = '';
+    this.multiple = false;
+    this.maxSize = 0;
+    this.disabled = false;
+    this._files = [];
+    this._dragOver = false;
+    this._error = '';
+  }
+
+  _formatSize(bytes) {
+    if (bytes === 0) return '0 B';
+    const units = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+    return `${(bytes / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0)} ${units[i]}`;
+  }
+
+  _validateFiles(fileList) {
+    const files = [...fileList];
+    this._error = '';
+
+    if (this.maxSize > 0) {
+      const oversized = files.filter(f => f.size > this.maxSize);
+      if (oversized.length > 0) {
+        this._error = `${oversized.map(f => f.name).join(', ')} exceeded max size of ${this._formatSize(this.maxSize)}`;
+        return files.filter(f => f.size <= this.maxSize);
+      }
+    }
+
+    return files;
+  }
+
+  _addFiles(fileList) {
+    const valid = this._validateFiles(fileList);
+    if (valid.length === 0) return;
+
+    if (this.multiple) {
+      this._files = [...this._files, ...valid];
+    } else {
+      this._files = [valid[0]];
+    }
+
+    this.dispatchEvent(new CustomEvent('arc-change', {
+      detail: { value: [...this._files] },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _removeFile(index) {
+    const removed = this._files[index];
+    this._files = this._files.filter((_, i) => i !== index);
+    this._error = '';
+
+    this.dispatchEvent(new CustomEvent('arc-remove', {
+      detail: { value: removed, index },
+      bubbles: true,
+      composed: true,
+    }));
+
+    this.dispatchEvent(new CustomEvent('arc-change', {
+      detail: { value: [...this._files] },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _handleClick() {
+    this.shadowRoot.querySelector('input[type="file"]')?.click();
+  }
+
+  _handleInputChange(e) {
+    if (e.target.files.length > 0) {
+      this._addFiles(e.target.files);
+    }
+    // Reset so the same file can be re-selected
+    e.target.value = '';
+  }
+
+  _handleDragOver(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this._dragOver = true;
+  }
+
+  _handleDragLeave(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this._dragOver = false;
+  }
+
+  _handleDrop(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this._dragOver = false;
+
+    if (e.dataTransfer?.files.length > 0) {
+      this._addFiles(e.dataTransfer.files);
+    }
+  }
+
+  _handleKeydown(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this._handleClick();
+    }
+  }
+
+  render() {
+    return html`
+      <div part="wrapper">
+        <div
+          class="dropzone ${this._dragOver ? 'drag-over' : ''}"
+          part="dropzone"
+          role="button"
+          tabindex="0"
+          aria-label="Upload files. Click or drag and drop."
+          @click=${this._handleClick}
+          @keydown=${this._handleKeydown}
+          @dragover=${this._handleDragOver}
+          @dragleave=${this._handleDragLeave}
+          @drop=${this._handleDrop}
+        >
+          <span class="upload-icon" aria-hidden="true">\u2191</span>
+          <span class="upload-text">
+            Drag & drop files here or <span class="browse-link">browse</span>
+          </span>
+          ${this.accept ? html`
+            <span class="upload-hint">Accepted: ${this.accept}</span>
+          ` : ''}
+          ${this.maxSize > 0 ? html`
+            <span class="upload-hint">Max size: ${this._formatSize(this.maxSize)}</span>
+          ` : ''}
+        </div>
+
+        <input
+          type="file"
+          accept=${this.accept || undefined}
+          ?multiple=${this.multiple}
+          @change=${this._handleInputChange}
+          aria-hidden="true"
+          tabindex="-1"
+        />
+
+        ${this._error ? html`
+          <div class="error-message" role="alert" part="error">${this._error}</div>
+        ` : ''}
+
+        ${this._files.length > 0 ? html`
+          <div class="file-list" part="file-list" role="list" aria-label="Selected files">
+            ${this._files.map((file, i) => html`
+              <div class="file-item" part="file-item" role="listitem">
+                <span class="file-icon" aria-hidden="true">\u{1F4CE}</span>
+                <span class="file-name">${file.name}</span>
+                <span class="file-size">${this._formatSize(file.size)}</span>
+                <button
+                  class="file-remove"
+                  @click=${(e) => { e.stopPropagation(); this._removeFile(i); }}
+                  aria-label="Remove ${file.name}"
+                >&times;</button>
+              </div>
+            `)}
+          </div>
+        ` : ''}
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-file-upload', ArcFileUpload);

package/src/input/form.js

@@ -0,0 +1,179 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcForm extends LitElement {
+  static properties = {
+    action:     { type: String },
+    method:     { type: String },
+    novalidate: { type: Boolean },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; font-family: var(--font-body); }
+
+      form {
+        display: contents;
+      }
+
+      .form-layout {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-md);
+      }
+
+      ::slotted(*) {
+        margin: 0;
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.action = '';
+    this.method = '';
+    this.novalidate = false;
+  }
+
+  _collectValues() {
+    const slot = this.shadowRoot.querySelector('slot');
+    const children = slot ? slot.assignedElements({ flatten: true }) : [];
+    const values = {};
+    const errors = [];
+
+    const formControls = [];
+    const gather = (elements) => {
+      for (const el of elements) {
+        const tag = el.tagName?.toLowerCase();
+        if (
+          tag === 'arc-input' ||
+          tag === 'arc-textarea' ||
+          tag === 'arc-select' ||
+          tag === 'arc-checkbox' ||
+          tag === 'arc-toggle' ||
+          tag === 'arc-radio-group'
+        ) {
+          formControls.push(el);
+        }
+        if (!el.shadowRoot && el.children?.length) {
+          gather([...el.children]);
+        }
+      }
+    };
+
+    gather(children);
+
+    for (const control of formControls) {
+      const name = control.getAttribute('name') || control.label || control.tagName.toLowerCase();
+      const tag = control.tagName.toLowerCase();
+
+      if (tag === 'arc-checkbox' || tag === 'arc-toggle') {
+        values[name] = control.checked ?? false;
+      } else {
+        values[name] = control.value ?? '';
+      }
+
+      const required = control.hasAttribute('required');
+      if (required) {
+        const empty = (tag === 'arc-checkbox' || tag === 'arc-toggle')
+          ? !control.checked
+          : !control.value || control.value.trim() === '';
+
+        if (empty) {
+          errors.push({ name, message: `${control.label || name} is required` });
+          if (typeof control.error !== 'undefined') {
+            control.error = `${control.label || name} is required`;
+          }
+        } else {
+          if (typeof control.error !== 'undefined') {
+            control.error = '';
+          }
+        }
+      }
+    }
+
+    return { values, errors, valid: errors.length === 0 };
+  }
+
+  _handleSubmit(e) {
+    const { values, errors, valid } = this._collectValues();
+
+    if (!valid && !this.novalidate) {
+      e.preventDefault();
+      this.dispatchEvent(new CustomEvent('arc-invalid', {
+        detail: { errors },
+        bubbles: true,
+        composed: true,
+      }));
+      return;
+    }
+
+    // Native form submission — let the browser handle it
+    if (this.action) {
+      this.dispatchEvent(new CustomEvent('arc-submit', {
+        detail: { values, valid },
+        bubbles: true,
+        composed: true,
+      }));
+      // Don't preventDefault — the form submits natively
+      return;
+    }
+
+    // JS-only mode — prevent default and let the listener handle it
+    e.preventDefault();
+    this.dispatchEvent(new CustomEvent('arc-submit', {
+      detail: { values, valid },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  /** Programmatic submit — call from outside */
+  submit() {
+    this._handleSubmit(new Event('submit'));
+  }
+
+  /** Reset error states on child controls */
+  reset() {
+    const slot = this.shadowRoot.querySelector('slot');
+    const children = slot ? slot.assignedElements({ flatten: true }) : [];
+
+    const clearErrors = (elements) => {
+      for (const el of elements) {
+        if (typeof el.error !== 'undefined') {
+          el.error = '';
+        }
+        if (typeof el.value === 'string') {
+          el.value = '';
+        }
+        if (typeof el.checked === 'boolean') {
+          el.checked = false;
+        }
+        if (!el.shadowRoot && el.children?.length) {
+          clearErrors([...el.children]);
+        }
+      }
+    };
+
+    clearErrors(children);
+  }
+
+  render() {
+    return html`
+      <form
+        part="form"
+        action=${this.action || undefined}
+        method=${this.method || undefined}
+        ?novalidate=${this.novalidate}
+        @submit=${this._handleSubmit}
+      >
+        <div class="form-layout" part="layout">
+          <slot></slot>
+        </div>
+      </form>
+    `;
+  }
+}
+
+customElements.define('arc-form', ArcForm);

package/src/input/icon-button.js

@@ -0,0 +1,179 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+import '../content/icon.js';
+
+export class ArcIconButton extends LitElement {
+  static properties = {
+    name:     { type: String, reflect: true },
+    text:     { type: String },
+    variant:  { type: String, reflect: true },
+    size:     { type: String, reflect: true },
+    label:    { type: String },
+    href:     { type: String },
+    disabled: { type: Boolean, reflect: true },
+    type:     { type: String },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: inline-flex; }
+      :host([disabled]) { pointer-events: none; }
+
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--space-xs);
+        border: 1px solid transparent;
+        border-radius: var(--radius-md);
+        cursor: pointer;
+        transition:
+          background var(--transition-base),
+          border-color var(--transition-base),
+          box-shadow var(--transition-base),
+          color var(--transition-base),
+          transform var(--transition-fast);
+        text-decoration: none;
+        box-sizing: border-box;
+        color: inherit;
+      }
+
+      /* Icon-only (square) */
+      .btn:not(.btn--has-text) { aspect-ratio: 1; }
+
+      /* With text */
+      .btn--has-text {
+        font-family: var(--font-accent);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 1.5px;
+        white-space: nowrap;
+      }
+
+      .btn__text {
+        line-height: 1;
+      }
+
+      /* Sizes — icon-only */
+      :host([size="xs"]) .btn:not(.btn--has-text) { width: 28px; height: 28px; border-radius: var(--radius-sm); }
+      :host([size="sm"]) .btn:not(.btn--has-text) { width: 32px; height: 32px; }
+      :host(:not([size])) .btn:not(.btn--has-text),
+      :host([size="md"]) .btn:not(.btn--has-text) { width: 36px; height: 36px; }
+      :host([size="lg"]) .btn:not(.btn--has-text) { width: 44px; height: 44px; }
+
+      /* Sizes — with text */
+      :host([size="xs"]) .btn--has-text { padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); }
+      :host([size="sm"]) .btn--has-text { padding: calc(var(--space-xs) + 2px) calc(var(--space-sm) + 2px); font-size: var(--text-xs); }
+      :host(:not([size])) .btn--has-text,
+      :host([size="md"]) .btn--has-text { padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); }
+      :host([size="lg"]) .btn--has-text { padding: var(--space-sm) var(--space-md); font-size: var(--text-xs); }
+
+      /* Ghost (default) */
+      :host(:not([variant])) .btn,
+      :host([variant="ghost"]) .btn {
+        background: transparent;
+        color: var(--text-muted);
+        border-color: transparent;
+      }
+      :host(:not([variant])) .btn:hover,
+      :host([variant="ghost"]) .btn:hover {
+        color: var(--text-primary);
+        background: var(--bg-hover);
+      }
+      :host(:not([variant])) .btn:active,
+      :host([variant="ghost"]) .btn:active {
+        transform: scale(0.93);
+        background: var(--bg-elevated);
+      }
+
+      /* Secondary */
+      :host([variant="secondary"]) .btn {
+        background: transparent;
+        color: var(--text-secondary);
+        border-color: var(--border-default);
+      }
+      :host([variant="secondary"]) .btn:hover {
+        border-color: var(--accent-primary);
+        color: var(--accent-primary);
+        box-shadow: 0 0 16px var(--accent-primary-ring);
+      }
+      :host([variant="secondary"]) .btn:active {
+        transform: scale(0.93);
+        background: rgba(var(--accent-primary-rgb), 0.05);
+      }
+
+      /* Primary */
+      :host([variant="primary"]) .btn {
+        background: var(--accent-primary);
+        color: var(--bg-deep);
+        border-color: var(--accent-primary);
+      }
+      :host([variant="primary"]) .btn:hover {
+        box-shadow: var(--glow-primary);
+      }
+      :host([variant="primary"]) .btn:active {
+        transform: scale(0.93);
+        box-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.5);
+      }
+
+      /* Focus */
+      .btn:focus-visible { outline: none; box-shadow: var(--focus-glow); }
+
+      /* Disabled */
+      :host([disabled]) .btn { opacity: 0.4; cursor: not-allowed; pointer-events: 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.name = '';
+    this.text = '';
+    this.variant = 'ghost';
+    this.size = 'md';
+    this.label = '';
+    this.href = '';
+    this.disabled = false;
+    this.type = 'button';
+  }
+
+  /** Map icon-button size to arc-icon size */
+  get _iconSize() {
+    const map = { xs: 'xs', sm: 'sm', md: 'sm', lg: 'md' };
+    return map[this.size] || 'sm';
+  }
+
+  render() {
+    const hasText = !!this.text;
+    const icon = this.name
+      ? html`<arc-icon name=${this.name} size=${this._iconSize}></arc-icon>`
+      : html`<slot></slot>`;
+    const textEl = hasText ? html`<span class="btn__text">${this.text}</span>` : null;
+    const classes = `btn${hasText ? ' btn--has-text' : ''}`;
+
+    if (this.href) {
+      return html`<a class=${classes} href=${this.href} aria-label=${this.label || this.text || ''} part="button">${icon}${textEl}</a>`;
+    }
+    return html`
+      <button
+        class=${classes}
+        type=${this.type}
+        ?disabled=${this.disabled}
+        aria-label=${this.label || this.text || ''}
+        part="button"
+      >${icon}${textEl}</button>
+    `;
+  }
+}
+
+customElements.define('arc-icon-button', ArcIconButton);