@arclux/arc-ui 1.0.0

package/src/input/select.js

@@ -0,0 +1,267 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+import '../shared/option.js';
+
+export class ArcSelect extends LitElement {
+  static formAssociated = true;
+
+  static properties = {
+    value:       { type: String, reflect: true },
+    placeholder: { type: String },
+    label:       { type: String },
+    name:        { type: String },
+    disabled:    { type: Boolean, reflect: true },
+    open:        { type: Boolean, reflect: true },
+    _options:    { state: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; position: relative; }
+      :host([disabled]) { pointer-events: none; opacity: 0.4; }
+
+      .select__label {
+        display: block;
+        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);
+        margin-bottom: var(--space-xs);
+      }
+
+      .select__trigger {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        padding: var(--space-sm) var(--space-md);
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+        color: var(--text-primary);
+        background: var(--bg-surface);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-md);
+        cursor: pointer;
+        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+        box-sizing: border-box;
+      }
+
+      .select__trigger:hover:not(:focus-visible) { border-color: var(--border-bright); }
+      .select__trigger:focus-visible {
+        outline: none;
+        border-color: rgba(var(--accent-primary-rgb), 0.4);
+        box-shadow: var(--focus-glow);
+      }
+
+      :host([open]) .select__trigger {
+        border-color: rgba(var(--accent-primary-rgb), 0.4);
+        box-shadow: var(--focus-glow);
+      }
+
+      .select__placeholder { color: var(--text-ghost); }
+
+      .select__chevron {
+        font-size: var(--text-xs);
+        color: var(--text-muted);
+        transition: transform var(--transition-fast);
+      }
+      :host([open]) .select__chevron { transform: rotate(180deg); }
+
+      .select__dropdown {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        margin-top: var(--space-xs);
+        background: var(--bg-elevated);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-md);
+        box-shadow: var(--shadow-overlay);
+        max-height: 240px;
+        overflow-y: auto;
+        z-index: 100;
+        display: none;
+      }
+
+      :host([open]) .select__dropdown { display: block; }
+
+      .select__option {
+        display: block;
+        width: 100%;
+        padding: var(--space-sm) var(--space-md);
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+        color: var(--text-secondary);
+        background: none;
+        border: none;
+        cursor: pointer;
+        text-align: left;
+        transition: background var(--transition-fast), color var(--transition-fast);
+      }
+
+      .select__option:hover,
+      .select__option:focus-visible {
+        background: rgba(var(--accent-primary-rgb), 0.08);
+        color: var(--text-primary);
+        outline: none;
+      }
+
+      .select__option[aria-selected="true"] {
+        color: var(--accent-primary);
+      }
+
+      .select__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._internals = this.attachInternals();
+    this.value = '';
+    this.placeholder = 'Select...';
+    this.label = '';
+    this.name = '';
+    this.disabled = false;
+    this.open = false;
+    this._options = [];
+    this._handleOutsideClick = this._handleOutsideClick.bind(this);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('click', this._handleOutsideClick);
+  }
+
+  updated(changed) {
+    if (changed.has('value')) {
+      this._internals.setFormValue(this.value);
+    }
+    if (changed.has('open')) {
+      if (this.open) {
+        requestAnimationFrame(() => {
+          document.addEventListener('click', this._handleOutsideClick);
+        });
+      } else {
+        document.removeEventListener('click', this._handleOutsideClick);
+      }
+    }
+  }
+
+  _onSlotChange(e) {
+    this._options = e.target.assignedElements({ flatten: true })
+      .filter(el => el.tagName === 'ARC-OPTION');
+  }
+
+  _handleOutsideClick(e) {
+    const path = e.composedPath();
+    if (!path.includes(this)) {
+      this.open = false;
+    }
+  }
+
+  _toggleOpen() {
+    if (this.disabled) return;
+    this.open = !this.open;
+  }
+
+  _selectOption(opt) {
+    this.value = opt.value;
+    this.open = false;
+    this.dispatchEvent(new CustomEvent('arc-change', {
+      detail: { value: opt.value, label: opt.label },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _handleTriggerKeydown(e) {
+    if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.open = true;
+      this.updateComplete.then(() => {
+        this.shadowRoot.querySelector('.select__option')?.focus();
+      });
+    } else if (e.key === 'Escape') {
+      this.open = false;
+    }
+  }
+
+  _handleOptionKeydown(e, opt, index) {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      const next = this.shadowRoot.querySelectorAll('.select__option')[index + 1];
+      next?.focus();
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      const prev = this.shadowRoot.querySelectorAll('.select__option')[index - 1];
+      if (prev) prev.focus();
+      else this.shadowRoot.querySelector('.select__trigger')?.focus();
+    } else if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this._selectOption(opt);
+    } else if (e.key === 'Escape') {
+      this.open = false;
+      this.shadowRoot.querySelector('.select__trigger')?.focus();
+    }
+  }
+
+  get _selectedLabel() {
+    const selected = this._options.find(o => o.value === this.value);
+    return selected ? selected.label : '';
+  }
+
+  render() {
+    const display = this._selectedLabel;
+
+    return html`
+      <div class="select" part="select">
+        <div class="select__slot-host">
+          <slot @slotchange=${this._onSlotChange}></slot>
+        </div>
+        ${this.label ? html`<span class="select__label" part="label">${this.label}</span>` : ''}
+        <button
+          class="select__trigger"
+          role="combobox"
+          aria-expanded=${this.open ? 'true' : 'false'}
+          aria-haspopup="listbox"
+          @click=${this._toggleOpen}
+          @keydown=${this._handleTriggerKeydown}
+          part="trigger"
+        >
+          ${display
+            ? html`<span>${display}</span>`
+            : html`<span class="select__placeholder">${this.placeholder}</span>`
+          }
+          <span class="select__chevron">&#9662;</span>
+        </button>
+        <div class="select__dropdown" role="listbox" part="dropdown">
+          ${this._options.map((opt, i) => html`
+            <button
+              class="select__option"
+              role="option"
+              aria-selected=${opt.value === this.value ? 'true' : 'false'}
+              tabindex="-1"
+              @click=${() => this._selectOption(opt)}
+              @keydown=${(e) => this._handleOptionKeydown(e, opt, i)}
+            >${opt.label}</button>
+          `)}
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-select', ArcSelect);

package/src/input/slider.js

@@ -0,0 +1,217 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcSlider extends LitElement {
+  static properties = {
+    value:    { type: Number, reflect: true },
+    min:      { type: Number },
+    max:      { type: Number },
+    step:     { type: Number },
+    disabled: { type: Boolean, reflect: true },
+    label:    { type: String },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; }
+      :host([disabled]) { pointer-events: none; opacity: 0.4; }
+
+      .slider {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-sm);
+      }
+
+      .slider__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .slider__label {
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        font-weight: 600;
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        color: var(--text-muted);
+        user-select: none;
+      }
+
+      .slider__value {
+        font-family: var(--font-mono);
+        font-size: var(--code-size);
+        color: var(--accent-primary);
+        font-weight: 600;
+      }
+
+      .slider__track {
+        position: relative;
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+
+      input[type="range"] {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 100%;
+        height: 6px;
+        border-radius: var(--radius-full);
+        background: linear-gradient(
+          to right,
+          var(--accent-primary) 0%,
+          var(--accent-primary) var(--fill-percent, 0%),
+          var(--border-default) var(--fill-percent, 0%),
+          var(--border-default) 100%
+        );
+        outline: none;
+        cursor: pointer;
+        margin: 0;
+        padding: 0;
+        transition: filter var(--transition-fast);
+      }
+
+      input[type="range"]:hover,
+      input[type="range"]:focus {
+        filter: drop-shadow(0 0 6px rgba(var(--accent-primary-rgb), 0.4));
+      }
+
+      input[type="range"]::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 20px;
+        height: 20px;
+        border-radius: var(--radius-full);
+        background: var(--accent-primary);
+        border: 2px solid var(--bg-surface);
+        cursor: pointer;
+        transition: box-shadow var(--transition-fast);
+        box-shadow: 0 0 6px rgba(var(--accent-primary-rgb), 0.3);
+      }
+
+      input[type="range"]::-moz-range-thumb {
+        width: 20px;
+        height: 20px;
+        border-radius: var(--radius-full);
+        background: var(--accent-primary);
+        border: 2px solid var(--bg-surface);
+        cursor: pointer;
+        transition: box-shadow var(--transition-fast);
+        box-shadow: 0 0 6px rgba(var(--accent-primary-rgb), 0.3);
+      }
+
+      input[type="range"]:hover::-webkit-slider-thumb,
+      input[type="range"]:focus::-webkit-slider-thumb {
+        box-shadow:
+          0 0 8px rgba(var(--accent-primary-rgb), 0.5),
+          0 0 20px rgba(var(--accent-primary-rgb), 0.25);
+      }
+
+      input[type="range"]:hover::-moz-range-thumb,
+      input[type="range"]:focus::-moz-range-thumb {
+        box-shadow:
+          0 0 8px rgba(var(--accent-primary-rgb), 0.5),
+          0 0 20px rgba(var(--accent-primary-rgb), 0.25);
+      }
+
+      input[type="range"]:focus-visible {
+        outline: none;
+      }
+
+      input[type="range"]:focus-visible::-webkit-slider-thumb {
+        box-shadow:
+          0 0 0 1px rgba(var(--accent-primary-rgb), 0.2),
+          0 0 8px rgba(var(--accent-primary-rgb), 0.5),
+          0 0 20px rgba(var(--accent-primary-rgb), 0.25);
+      }
+
+      input[type="range"]:focus-visible::-moz-range-thumb {
+        box-shadow:
+          0 0 0 1px rgba(var(--accent-primary-rgb), 0.2),
+          0 0 8px rgba(var(--accent-primary-rgb), 0.5),
+          0 0 20px rgba(var(--accent-primary-rgb), 0.25);
+      }
+
+      input[type="range"]::-moz-range-track {
+        height: 6px;
+        border-radius: var(--radius-full);
+        background: transparent;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        input[type="range"],
+        input[type="range"]::-webkit-slider-thumb,
+        input[type="range"]::-moz-range-thumb { transition: none; }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.value = 0;
+    this.min = 0;
+    this.max = 100;
+    this.step = 1;
+    this.disabled = false;
+    this.label = '';
+  }
+
+  get _fillPercent() {
+    const range = this.max - this.min;
+    if (range === 0) return 0;
+    return ((this.value - this.min) / range) * 100;
+  }
+
+  _onInput(e) {
+    this.value = Number(e.target.value);
+    this.dispatchEvent(new CustomEvent('arc-input', {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _onChange(e) {
+    this.value = Number(e.target.value);
+    this.dispatchEvent(new CustomEvent('arc-change', {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  render() {
+    return html`
+      <div class="slider" part="slider">
+        ${this.label ? html`
+          <div class="slider__header" part="header">
+            <label class="slider__label" part="label">${this.label}</label>
+            <span class="slider__value" part="value">${this.value}</span>
+          </div>
+        ` : ''}
+        <div class="slider__track" part="track">
+          <input
+            type="range"
+            .value=${String(this.value)}
+            min=${this.min}
+            max=${this.max}
+            step=${this.step}
+            ?disabled=${this.disabled}
+            aria-label=${this.label || 'Slider'}
+            aria-valuemin=${this.min}
+            aria-valuemax=${this.max}
+            aria-valuenow=${this.value}
+            style="--fill-percent: ${this._fillPercent}%"
+            @input=${this._onInput}
+            @change=${this._onChange}
+            part="input"
+          />
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-slider', ArcSlider);