@arclux/arc-ui 1.0.0

package/src/input/sortable-list.js

@@ -0,0 +1,345 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcSortableList extends LitElement {
+  static properties = {
+    disabled:      { type: Boolean, reflect: true },
+    _items:        { state: true },
+    _dragIndex:    { state: true },
+    _overIndex:    { state: true },
+    _kbSelected:   { state: true },
+    _kbMoving:     { state: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; }
+      :host([disabled]) { pointer-events: none; opacity: 0.4; }
+
+      .sortable {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      .sortable__item {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        padding: var(--space-sm) var(--space-md);
+        background: var(--bg-card, var(--bg-surface));
+        border: 1px solid var(--border-subtle);
+        border-radius: var(--radius-md);
+        transition: box-shadow var(--transition-fast),
+                    opacity var(--transition-fast),
+                    background var(--transition-fast),
+                    border-color var(--transition-fast);
+        cursor: default;
+        user-select: none;
+        position: relative;
+      }
+
+      .sortable__item:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-ring);
+      }
+
+      .sortable__item--dragging {
+        opacity: 0.5;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+      }
+
+      .sortable__item--kb-selected {
+        border-color: var(--accent-primary);
+        box-shadow: 0 0 0 1px var(--accent-primary);
+      }
+
+      .sortable__item--kb-moving {
+        border-color: var(--accent-primary);
+        box-shadow: 0 0 0 2px var(--accent-primary), 0 4px 16px rgba(0, 0, 0, 0.12);
+        background: var(--bg-elevated);
+      }
+
+      .sortable__item--over-before::before,
+      .sortable__item--over-after::after {
+        content: '';
+        position: absolute;
+        left: var(--space-sm);
+        right: var(--space-sm);
+        height: 2px;
+        background: var(--accent-primary);
+        border-radius: var(--radius-full);
+      }
+
+      .sortable__item--over-before::before { top: -2px; }
+      .sortable__item--over-after::after   { bottom: -2px; }
+
+      .sortable__handle {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        cursor: grab;
+        padding: var(--space-xs);
+        flex-shrink: 0;
+        color: var(--text-ghost);
+        transition: color var(--transition-fast);
+      }
+
+      .sortable__handle:hover { color: var(--text-muted); }
+      .sortable__handle:active { cursor: grabbing; }
+
+      .sortable__grip-row {
+        display: flex;
+        gap: 2px;
+      }
+
+      .sortable__grip-dot {
+        width: 3px;
+        height: 3px;
+        border-radius: var(--radius-full);
+        background: currentColor;
+      }
+
+      .sortable__content {
+        flex: 1;
+        min-width: 0;
+      }
+
+      /* Hidden default slot for collecting children */
+      .sortable__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.disabled = false;
+    this._items = [];
+    this._dragIndex = -1;
+    this._overIndex = -1;
+    this._kbSelected = -1;
+    this._kbMoving = false;
+  }
+
+  /* ---- Slot management ---- */
+
+  _onSlotChange(e) {
+    const children = e.target.assignedElements({ flatten: true });
+    this._items = children.map((el, i) => ({
+      node: el,
+      originalIndex: i,
+    }));
+  }
+
+  /* ---- Drag and drop ---- */
+
+  _onDragStart(e, index) {
+    if (this.disabled) return;
+    this._dragIndex = index;
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('text/plain', String(index));
+  }
+
+  _onDragOver(e, index) {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    if (index === this._dragIndex) {
+      this._overIndex = -1;
+      return;
+    }
+    this._overIndex = index;
+  }
+
+  _onDragLeave() {
+    this._overIndex = -1;
+  }
+
+  _onDrop(e, dropIndex) {
+    e.preventDefault();
+    this._overIndex = -1;
+    const from = this._dragIndex;
+    if (from < 0 || from === dropIndex) return;
+    this._moveItem(from, dropIndex);
+  }
+
+  _onDragEnd() {
+    this._dragIndex = -1;
+    this._overIndex = -1;
+  }
+
+  /* ---- Keyboard reorder ---- */
+
+  _onKeydown(e, index) {
+    if (this.disabled) return;
+
+    switch (e.key) {
+      case ' ':
+      case 'Space':
+        e.preventDefault();
+        if (this._kbMoving) {
+          // Confirm placement
+          this._kbMoving = false;
+          this._kbSelected = -1;
+          this._fireOrderChange();
+        } else {
+          // Select item for moving
+          this._kbSelected = index;
+          this._kbMoving = false;
+        }
+        break;
+
+      case 'Enter':
+        if (this._kbSelected === index && !this._kbMoving) {
+          e.preventDefault();
+          this._kbMoving = true;
+        } else if (this._kbMoving) {
+          e.preventDefault();
+          this._kbMoving = false;
+          this._kbSelected = -1;
+          this._fireOrderChange();
+        }
+        break;
+
+      case 'Escape':
+        e.preventDefault();
+        this._kbMoving = false;
+        this._kbSelected = -1;
+        break;
+
+      case 'ArrowUp':
+        e.preventDefault();
+        if (this._kbMoving && this._kbSelected > 0) {
+          const from = this._kbSelected;
+          this._moveItemInPlace(from, from - 1);
+          this._kbSelected = from - 1;
+          this._focusItem(this._kbSelected);
+        }
+        break;
+
+      case 'ArrowDown':
+        e.preventDefault();
+        if (this._kbMoving && this._kbSelected < this._items.length - 1) {
+          const from = this._kbSelected;
+          this._moveItemInPlace(from, from + 1);
+          this._kbSelected = from + 1;
+          this._focusItem(this._kbSelected);
+        }
+        break;
+
+      default:
+        break;
+    }
+  }
+
+  /* ---- Reordering helpers ---- */
+
+  _moveItem(from, to) {
+    const items = [...this._items];
+    const [moved] = items.splice(from, 1);
+    items.splice(to, 0, moved);
+    this._items = items;
+    this._dragIndex = -1;
+    this._fireOrderChange();
+  }
+
+  _moveItemInPlace(from, to) {
+    const items = [...this._items];
+    const [moved] = items.splice(from, 1);
+    items.splice(to, 0, moved);
+    this._items = items;
+  }
+
+  _fireOrderChange() {
+    this.dispatchEvent(new CustomEvent('arc-change', {
+      detail: { order: this._items.map(item => item.originalIndex) },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _focusItem(index) {
+    this.updateComplete.then(() => {
+      const items = this.shadowRoot.querySelectorAll('.sortable__item');
+      items[index]?.focus();
+    });
+  }
+
+  /* ---- Render ---- */
+
+  _renderGripDots() {
+    // 3 rows x 2 dots = 6-dot grip icon
+    return html`
+      ${[0, 1, 2].map(() => html`
+        <div class="sortable__grip-row">
+          <span class="sortable__grip-dot"></span>
+          <span class="sortable__grip-dot"></span>
+        </div>
+      `)}
+    `;
+  }
+
+  render() {
+    return html`
+      <div class="sortable__slot-host">
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+      <div
+        class="sortable"
+        part="list"
+        role="listbox"
+        aria-roledescription="sortable list"
+        aria-label="Sortable list"
+      >
+        ${this._items.map((item, i) => {
+          const isDragging = i === this._dragIndex;
+          const isOverBefore = i === this._overIndex && this._dragIndex > i;
+          const isOverAfter = i === this._overIndex && this._dragIndex < i;
+          const isKbSelected = i === this._kbSelected && !this._kbMoving;
+          const isKbMoving = i === this._kbSelected && this._kbMoving;
+
+          return html`
+            <div
+              class="sortable__item
+                ${isDragging ? 'sortable__item--dragging' : ''}
+                ${isOverBefore ? 'sortable__item--over-before' : ''}
+                ${isOverAfter ? 'sortable__item--over-after' : ''}
+                ${isKbSelected ? 'sortable__item--kb-selected' : ''}
+                ${isKbMoving ? 'sortable__item--kb-moving' : ''}"
+              part="item"
+              role="option"
+              tabindex="0"
+              aria-grabbed=${isDragging || isKbMoving ? 'true' : 'false'}
+              aria-roledescription="sortable item"
+              draggable="true"
+              @dragstart=${(e) => this._onDragStart(e, i)}
+              @dragover=${(e) => this._onDragOver(e, i)}
+              @dragleave=${this._onDragLeave}
+              @drop=${(e) => this._onDrop(e, i)}
+              @dragend=${this._onDragEnd}
+              @keydown=${(e) => this._onKeydown(e, i)}
+            >
+              <div class="sortable__handle" part="handle" aria-hidden="true">
+                ${this._renderGripDots()}
+              </div>
+              <div class="sortable__content" part="content">
+                ${item.node?.textContent ?? ''}
+              </div>
+            </div>
+          `;
+        })}
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-sortable-list', ArcSortableList);

package/src/input/suggestion.js

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

package/src/input/textarea.js

@@ -0,0 +1,203 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcTextarea extends LitElement {
+  static formAssociated = true;
+
+  static properties = {
+    value:       { type: String },
+    placeholder: { type: String },
+    label:       { type: String },
+    rows:        { type: Number },
+    maxlength:   { type: Number },
+    disabled:    { type: Boolean, reflect: true },
+    readonly:    { type: Boolean, reflect: true },
+    resize:      { type: String, reflect: true },
+    error:       { type: String },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; font-family: var(--font-body); }
+      :host([disabled]) { opacity: 0.4; pointer-events: none; }
+
+      .textarea-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-xs);
+      }
+
+      label {
+        font-family: var(--font-accent);
+        font-weight: 600;
+        font-size: var(--text-xs);
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        color: var(--text-muted);
+      }
+
+      textarea {
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        line-height: 1.5;
+        color: var(--text-primary);
+        background: var(--bg-card);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-md);
+        padding: var(--space-sm) var(--space-md);
+        outline: none;
+        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      :host([resize="none"]) textarea { resize: none; }
+      :host([resize="vertical"]) textarea { resize: vertical; }
+      :host([resize="horizontal"]) textarea { resize: horizontal; }
+      :host([resize="both"]) textarea { resize: both; }
+      :host(:not([resize])) textarea { resize: vertical; }
+
+      textarea::placeholder {
+        color: var(--text-muted);
+      }
+
+      textarea:hover:not(:disabled):not(:read-only):not(:focus) {
+        border-color: var(--border-bright);
+      }
+
+      textarea:focus {
+        outline: none;
+        border-color: rgba(var(--accent-primary-rgb), 0.4);
+        box-shadow: var(--focus-glow);
+      }
+
+      :host([readonly]) textarea {
+        cursor: default;
+        background: var(--bg-surface);
+      }
+
+      .error textarea {
+        border-color: var(--color-error);
+      }
+
+      .error textarea:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px var(--bg-deep), 0 0 0 4px var(--color-error), 0 0 16px rgba(var(--color-error-rgb), 0.2);
+      }
+
+      .footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        min-height: 20px;
+      }
+
+      .error-message {
+        font-size: var(--text-xs);
+        color: var(--color-error);
+        line-height: 1.4;
+      }
+
+      .char-count {
+        font-size: var(--text-xs);
+        color: var(--text-muted);
+        margin-left: auto;
+      }
+
+      .char-count.at-limit {
+        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._internals = this.attachInternals();
+    this.value = '';
+    this.placeholder = '';
+    this.label = '';
+    this.rows = 4;
+    this.maxlength = 0;
+    this.disabled = false;
+    this.readonly = false;
+    this.resize = 'vertical';
+    this.error = '';
+  }
+
+  updated(changed) {
+    if (changed.has('value')) {
+      this._internals.setFormValue(this.value);
+    }
+  }
+
+  _onInput(e) {
+    this.value = e.target.value;
+    this._internals.setFormValue(this.value);
+    this.dispatchEvent(new CustomEvent('arc-input', {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _onChange(e) {
+    this.value = e.target.value;
+    this._internals.setFormValue(this.value);
+    this.dispatchEvent(new CustomEvent('arc-change', {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  render() {
+    const hasError = !!this.error;
+    const showCounter = this.maxlength > 0;
+    const atLimit = showCounter && this.value.length >= this.maxlength;
+
+    return html`
+      <div class="textarea-wrapper ${hasError ? 'error' : ''}" part="wrapper">
+        ${this.label ? html`
+          <label part="label" id="textarea-label">${this.label}</label>
+        ` : ''}
+        <textarea
+          part="textarea"
+          .value=${this.value}
+          placeholder=${this.placeholder}
+          rows=${this.rows}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          maxlength=${this.maxlength > 0 ? this.maxlength : undefined}
+          aria-labelledby=${this.label ? 'textarea-label' : undefined}
+          aria-invalid=${hasError ? 'true' : 'false'}
+          aria-describedby=${hasError ? 'error-msg' : undefined}
+          @input=${this._onInput}
+          @change=${this._onChange}
+        ></textarea>
+        <div class="footer">
+          ${hasError ? html`
+            <span class="error-message" id="error-msg" role="alert" part="error">${this.error}</span>
+          ` : html`<span></span>`}
+          ${showCounter ? html`
+            <span class="char-count ${atLimit ? 'at-limit' : ''}" part="counter" aria-live="polite">
+              ${this.value.length}/${this.maxlength}
+            </span>
+          ` : ''}
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-textarea', ArcTextarea);