@arclux/arc-ui 1.0.0

package/src/feedback/popover.js

@@ -0,0 +1,184 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcPopover extends LitElement {
+  static properties = {
+    open:     { type: Boolean, reflect: true },
+    position: { type: String, reflect: true },
+    trigger:  { type: String },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: inline-block;
+        position: relative;
+      }
+
+      .popover__trigger {
+        display: inline-block;
+        cursor: pointer;
+      }
+
+      .popover__panel {
+        position: absolute;
+        z-index: 100;
+        min-width: 200px;
+        background: var(--bg-card);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-md);
+        padding: var(--space-md);
+        box-shadow: var(--shadow-overlay);
+        opacity: 0;
+        visibility: hidden;
+        transform: scale(0.95);
+        transition:
+          opacity var(--transition-base),
+          visibility var(--transition-base),
+          transform var(--transition-base);
+        pointer-events: none;
+      }
+
+      :host([open]) .popover__panel {
+        opacity: 1;
+        visibility: visible;
+        transform: scale(1);
+        pointer-events: auto;
+      }
+
+      /* Positions */
+      :host(:not([position])) .popover__panel,
+      :host([position="bottom"]) .popover__panel {
+        top: calc(100% + var(--space-sm));
+        left: 50%;
+        transform: translateX(-50%) scale(0.95);
+      }
+      :host([open]:not([position])) .popover__panel,
+      :host([open][position="bottom"]) .popover__panel {
+        transform: translateX(-50%) scale(1);
+      }
+
+      :host([position="top"]) .popover__panel {
+        bottom: calc(100% + var(--space-sm));
+        left: 50%;
+        transform: translateX(-50%) scale(0.95);
+      }
+      :host([open][position="top"]) .popover__panel {
+        transform: translateX(-50%) scale(1);
+      }
+
+      :host([position="left"]) .popover__panel {
+        right: calc(100% + var(--space-sm));
+        top: 50%;
+        transform: translateY(-50%) scale(0.95);
+      }
+      :host([open][position="left"]) .popover__panel {
+        transform: translateY(-50%) scale(1);
+      }
+
+      :host([position="right"]) .popover__panel {
+        left: calc(100% + var(--space-sm));
+        top: 50%;
+        transform: translateY(-50%) scale(0.95);
+      }
+      :host([open][position="right"]) .popover__panel {
+        transform: translateY(-50%) scale(1);
+      }
+
+      @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.open = false;
+    this.position = 'bottom';
+    this.trigger = '';
+    this._onDocumentClick = this._onDocumentClick.bind(this);
+    this._onKeyDown = this._onKeyDown.bind(this);
+  }
+
+  updated(changed) {
+    if (changed.has('open')) {
+      if (this.open) {
+        // Defer so the opening click doesn't immediately close
+        requestAnimationFrame(() => {
+          document.addEventListener('click', this._onDocumentClick);
+        });
+        document.addEventListener('keydown', this._onKeyDown);
+      } else {
+        document.removeEventListener('click', this._onDocumentClick);
+        document.removeEventListener('keydown', this._onKeyDown);
+      }
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('click', this._onDocumentClick);
+    document.removeEventListener('keydown', this._onKeyDown);
+  }
+
+  _onDocumentClick(e) {
+    const path = e.composedPath();
+    if (!path.includes(this)) {
+      this._close();
+    }
+  }
+
+  _onKeyDown(e) {
+    if (e.key === 'Escape') {
+      this._close();
+    }
+  }
+
+  _toggle() {
+    this.open = !this.open;
+    this.dispatchEvent(new CustomEvent(this.open ? 'arc-open' : 'arc-close', {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _close() {
+    if (!this.open) return;
+    this.open = false;
+    this.dispatchEvent(new CustomEvent('arc-close', {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  render() {
+    return html`
+      <div
+        class="popover__trigger"
+        @click=${this._toggle}
+        aria-haspopup="true"
+        aria-expanded=${this.open ? 'true' : 'false'}
+        part="trigger"
+      >
+        <slot name="trigger"></slot>
+      </div>
+      <div
+        class="popover__panel"
+        role="dialog"
+        aria-hidden=${this.open ? 'false' : 'true'}
+        part="panel"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-popover', ArcPopover);

package/src/feedback/progress.js

@@ -0,0 +1,169 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcProgress extends LitElement {
+  static properties = {
+    value:         { type: Number },
+    variant:       { type: String, reflect: true },
+    size:          { type: String, reflect: true },
+    indeterminate: { type: Boolean, reflect: true },
+    label:         { type: String },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; }
+
+      .progress__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);
+        margin-bottom: var(--space-xs);
+        display: block;
+      }
+
+      /* Bar */
+      .progress__track {
+        width: 100%;
+        border-radius: var(--radius-full);
+        background: var(--border-subtle);
+        overflow: hidden;
+      }
+
+      :host([size="sm"]) .progress__track { height: 4px; }
+      :host(:not([size])) .progress__track,
+      :host([size="md"]) .progress__track { height: 8px; }
+      :host([size="lg"]) .progress__track { height: 12px; }
+
+      .progress__fill {
+        height: 100%;
+        border-radius: var(--radius-full);
+        background: var(--gradient-accent-text);
+        transition: width var(--transition-base);
+        box-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.3);
+      }
+
+      :host([indeterminate]) .progress__fill {
+        width: 30% !important;
+        animation: progress-indeterminate 1.5s ease-in-out infinite;
+      }
+
+      /* Spinner */
+      .progress__spinner {
+        display: inline-block;
+      }
+
+      :host([size="sm"]) .progress__spinner { width: 20px; height: 20px; }
+      :host(:not([size])) .progress__spinner,
+      :host([size="md"]) .progress__spinner { width: 32px; height: 32px; }
+      :host([size="lg"]) .progress__spinner { width: 48px; height: 48px; }
+
+      .progress__spinner svg {
+        width: 100%;
+        height: 100%;
+        animation: spinner-rotate 1.4s linear infinite;
+      }
+
+      .progress__spinner-track {
+        fill: none;
+        stroke: var(--border-subtle);
+        stroke-width: 3;
+      }
+
+      .progress__spinner-fill {
+        fill: none;
+        stroke: var(--accent-primary);
+        stroke-width: 3;
+        stroke-linecap: round;
+        stroke-dasharray: 80, 200;
+        stroke-dashoffset: 0;
+        animation: spinner-dash 1.4s ease-in-out infinite;
+      }
+
+      @keyframes progress-indeterminate {
+        0%   { transform: translateX(-100%); }
+        100% { transform: translateX(400%); }
+      }
+
+      @keyframes spinner-rotate {
+        100% { transform: rotate(360deg); }
+      }
+
+      @keyframes spinner-dash {
+        0%   { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
+        50%  { stroke-dasharray: 80, 200; stroke-dashoffset: -35; }
+        100% { stroke-dasharray: 80, 200; stroke-dashoffset: -125; }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .progress__fill,
+        .progress__spinner svg,
+        .progress__spinner-fill {
+          animation: none;
+        }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.value = 0;
+    this.variant = 'bar';
+    this.size = 'md';
+    this.indeterminate = false;
+    this.label = '';
+  }
+
+  render() {
+    const clampedValue = Math.max(0, Math.min(100, this.value));
+
+    if (this.variant === 'spinner') {
+      return html`
+        <div part="progress">
+          ${this.label ? html`<span class="progress__label" part="label">${this.label}</span>` : ''}
+          <div
+            class="progress__spinner"
+            role="progressbar"
+            aria-valuenow=${this.indeterminate ? undefined : clampedValue}
+            aria-valuemin="0"
+            aria-valuemax="100"
+            aria-label=${this.label || 'Loading'}
+            part="spinner"
+          >
+            <svg viewBox="0 0 44 44">
+              <circle class="progress__spinner-track" cx="22" cy="22" r="20"></circle>
+              <circle class="progress__spinner-fill" cx="22" cy="22" r="20"></circle>
+            </svg>
+          </div>
+        </div>
+      `;
+    }
+
+    return html`
+      <div part="progress">
+        ${this.label ? html`<span class="progress__label" part="label">${this.label}</span>` : ''}
+        <div
+          class="progress__track"
+          role="progressbar"
+          aria-valuenow=${this.indeterminate ? undefined : clampedValue}
+          aria-valuemin="0"
+          aria-valuemax="100"
+          aria-label=${this.label || 'Progress'}
+          part="track"
+        >
+          <div
+            class="progress__fill"
+            style="width: ${this.indeterminate ? '30' : clampedValue}%"
+            part="fill"
+          ></div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-progress', ArcProgress);

package/src/feedback/sheet.js

@@ -0,0 +1,249 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcSheet extends LitElement {
+  static properties = {
+    open:    { type: Boolean, reflect: true },
+    side:    { type: String, reflect: true },
+    heading: { type: String },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: contents; }
+
+      .sheet__backdrop {
+        position: fixed;
+        inset: 0;
+        background: var(--overlay-backdrop);
+        backdrop-filter: blur(4px);
+        z-index: 1000;
+        opacity: 0;
+        visibility: hidden;
+        transition:
+          opacity var(--duration-exit) ease,
+          visibility var(--duration-exit) ease;
+      }
+
+      :host([open]) .sheet__backdrop {
+        opacity: 1;
+        visibility: visible;
+        transition-duration: var(--duration-enter);
+      }
+
+      .sheet__panel {
+        position: fixed;
+        z-index: 1001;
+        background: var(--bg-card);
+        border: 1px solid var(--border-subtle);
+        box-shadow: var(--shadow-overlay);
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+        transition: transform var(--duration-exit) var(--ease-out-expo);
+      }
+
+      :host([open]) .sheet__panel {
+        transition-duration: var(--duration-enter);
+      }
+
+      /* Bottom sheet */
+      :host(:not([side])) .sheet__panel,
+      :host([side="bottom"]) .sheet__panel {
+        bottom: 0;
+        left: 0;
+        right: 0;
+        max-height: 80vh;
+        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+        transform: translateY(100%);
+      }
+
+      :host([open]:not([side])) .sheet__panel,
+      :host([open][side="bottom"]) .sheet__panel {
+        transform: translateY(0);
+      }
+
+      /* Right sheet */
+      :host([side="right"]) .sheet__panel {
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 400px;
+        max-width: 90vw;
+        border-radius: var(--radius-xl) 0 0 var(--radius-xl);
+        transform: translateX(100%);
+      }
+
+      :host([open][side="right"]) .sheet__panel {
+        transform: translateX(0);
+      }
+
+      .sheet__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--space-lg) var(--space-xl);
+        border-bottom: 1px solid var(--border-subtle);
+        flex-shrink: 0;
+      }
+
+      .sheet__heading {
+        font-family: var(--font-body);
+        font-size: var(--text-md);
+        font-weight: 600;
+        color: var(--text-primary);
+        margin: 0;
+      }
+
+      .sheet__close {
+        background: none;
+        border: none;
+        color: var(--text-ghost);
+        cursor: pointer;
+        font-size: var(--text-md);
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--radius-sm);
+        transition: color var(--transition-fast), background var(--transition-fast);
+        line-height: 1;
+      }
+
+      .sheet__close:hover {
+        color: var(--text-primary);
+        background: var(--bg-hover);
+      }
+
+      .sheet__close:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-ring);
+      }
+
+      .sheet__body {
+        padding: var(--space-lg) var(--space-xl);
+        color: var(--text-secondary);
+        font-size: var(--body-size);
+        line-height: var(--body-lh);
+        flex: 1;
+        overflow-y: auto;
+      }
+
+      .sheet__footer {
+        padding: var(--space-md) var(--space-xl);
+        border-top: 1px solid var(--border-subtle);
+        display: flex;
+        justify-content: flex-end;
+        gap: var(--space-sm);
+        flex-shrink: 0;
+      }
+
+      /* Handle for bottom sheet */
+      :host(:not([side])) .sheet__handle,
+      :host([side="bottom"]) .sheet__handle {
+        display: flex;
+        justify-content: center;
+        padding: var(--space-sm) 0 0;
+      }
+
+      :host([side="right"]) .sheet__handle { display: none; }
+
+      .sheet__handle-bar {
+        width: 40px;
+        height: 4px;
+        border-radius: var(--radius-full);
+        background: var(--border-bright);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .sheet__backdrop,
+        .sheet__panel { transition: none; }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.open = false;
+    this.side = 'bottom';
+    this.heading = '';
+    this._handleKeydown = this._handleKeydown.bind(this);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('keydown', this._handleKeydown);
+    document.body.style.overflow = '';
+  }
+
+  _handleKeydown(e) {
+    if (e.key === 'Escape') {
+      this._close();
+    }
+  }
+
+  _close() {
+    this.open = false;
+    this.dispatchEvent(new CustomEvent('arc-close', { bubbles: true, composed: true }));
+  }
+
+  _backdropClick(e) {
+    if (e.target === e.currentTarget) {
+      this._close();
+    }
+  }
+
+  updated(changed) {
+    if (changed.has('open')) {
+      if (this.open) {
+        document.addEventListener('keydown', this._handleKeydown);
+        document.body.style.overflow = 'hidden';
+        this.dispatchEvent(new CustomEvent('arc-open', { bubbles: true, composed: true }));
+        this.updateComplete.then(() => {
+          const closeBtn = this.shadowRoot.querySelector('.sheet__close');
+          closeBtn?.focus();
+        });
+      } else {
+        document.removeEventListener('keydown', this._handleKeydown);
+        document.body.style.overflow = '';
+      }
+    }
+  }
+
+  render() {
+    return html`
+      <div
+        class="sheet__backdrop"
+        @click=${this._backdropClick}
+        part="backdrop"
+      ></div>
+      <div
+        class="sheet__panel"
+        role="dialog"
+        aria-modal="true"
+        aria-label=${this.heading || 'Sheet'}
+        part="panel"
+      >
+        <div class="sheet__handle" part="handle">
+          <div class="sheet__handle-bar"></div>
+        </div>
+        <div class="sheet__header" part="header">
+          <slot name="header">
+            <h2 class="sheet__heading">${this.heading}</h2>
+          </slot>
+          <button class="sheet__close" aria-label="Close" @click=${this._close} part="close">&times;</button>
+        </div>
+        <div class="sheet__body" part="body">
+          <slot></slot>
+        </div>
+        <div class="sheet__footer" part="footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-sheet', ArcSheet);