@arclux/arc-ui 1.0.0

package/src/content/truncate.js

@@ -0,0 +1,161 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcTruncate extends LitElement {
+  static properties = {
+    lines:    { type: Number, reflect: true },
+    expanded: { type: Boolean, reflect: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; }
+
+      .truncate__content {
+        color: var(--text-secondary);
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+        line-height: var(--body-lh);
+      }
+
+      .truncate__content--clamped {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      .truncate__toggle {
+        display: inline-block;
+        margin-top: var(--space-xs);
+        background: none;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        font-family: var(--font-accent);
+        font-weight: 600;
+        font-size: var(--text-xs);
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        color: var(--accent-primary);
+        transition: color var(--transition-fast);
+      }
+
+      .truncate__toggle:hover {
+        color: var(--text-primary);
+      }
+
+      .truncate__toggle:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-ring);
+        border-radius: var(--radius-sm);
+      }
+
+      @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.lines = 3;
+    this.expanded = false;
+    this._overflows = false;
+    this._resizeObserver = null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._resizeObserver = new ResizeObserver(() => this._checkOverflow());
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._resizeObserver?.disconnect();
+    this._resizeObserver = null;
+  }
+
+  firstUpdated() {
+    const content = this.shadowRoot.querySelector('.truncate__content');
+    if (content) {
+      this._resizeObserver?.observe(content);
+    }
+    this._checkOverflow();
+  }
+
+  updated(changed) {
+    if (changed.has('lines') || changed.has('expanded')) {
+      this._checkOverflow();
+    }
+  }
+
+  _checkOverflow() {
+    const content = this.shadowRoot.querySelector('.truncate__content');
+    if (!content) return;
+
+    if (this.expanded) {
+      // When expanded, we need to temporarily clamp to check if it would overflow
+      const prev = content.style.webkitLineClamp;
+      const prevDisplay = content.style.display;
+      const prevOrient = content.style.webkitBoxOrient;
+      const prevOverflow = content.style.overflow;
+
+      content.style.display = '-webkit-box';
+      content.style.webkitBoxOrient = 'vertical';
+      content.style.overflow = 'hidden';
+      content.style.webkitLineClamp = String(this.lines);
+
+      this._overflows = content.scrollHeight > content.clientHeight;
+
+      content.style.webkitLineClamp = prev;
+      content.style.display = prevDisplay;
+      content.style.webkitBoxOrient = prevOrient;
+      content.style.overflow = prevOverflow;
+    } else {
+      // When clamped, CSS handles the clamp; check if content overflows
+      this._overflows = content.scrollHeight > content.clientHeight;
+    }
+
+    this.requestUpdate();
+  }
+
+  _toggle() {
+    this.expanded = !this.expanded;
+    this.dispatchEvent(new CustomEvent('arc-toggle', {
+      detail: { expanded: this.expanded },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  render() {
+    const clamped = !this.expanded;
+    const clampStyle = clamped ? `-webkit-line-clamp: ${this.lines};` : '';
+
+    return html`
+      <div
+        class="truncate__content ${clamped ? 'truncate__content--clamped' : ''}"
+        style=${clampStyle}
+        part="content"
+      >
+        <slot></slot>
+      </div>
+      ${this._overflows || this.expanded ? html`
+        <button
+          class="truncate__toggle"
+          @click=${this._toggle}
+          part="toggle"
+        >${this.expanded ? 'Show less' : 'Show more'}</button>
+      ` : ''}
+    `;
+  }
+}
+
+customElements.define('arc-truncate', ArcTruncate);

package/src/content/value-card.js

@@ -0,0 +1,94 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcValueCard extends LitElement {
+  static properties = {
+    icon:        { type: String },
+    heading:     { type: String },
+    description: { type: String },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: flex; flex-direction: column; height: 100%; }
+
+      .card {
+        position: relative;
+        display: flex;
+        align-items: flex-start;
+        gap: var(--space-lg);
+        padding: var(--space-lg);
+        flex: 1;
+        border: 1px solid var(--border-subtle);
+        border-radius: var(--radius-lg);
+        transition: border-color var(--transition-base), box-shadow var(--transition-base);
+      }
+
+      .card:hover {
+        border-color: var(--border-bright);
+        box-shadow: 0 0 20px rgba(var(--accent-secondary-rgb),0.06);
+      }
+
+      .card__icon {
+        flex-shrink: 0;
+        color: var(--accent-secondary);
+        font-size: 24px; /* icon size, not text */
+        line-height: 1;
+        padding-top: 2px;
+      }
+
+      .card__text {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-sm);
+      }
+
+      .card__title {
+        font-size: 17px; /* heading size, keep hardcoded */
+        font-weight: 600;
+        color: var(--text-primary);
+        margin: 0;
+      }
+
+      .card__desc {
+        color: var(--text-secondary);
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        line-height: 1.7;
+        margin: 0;
+      }
+
+      @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.icon = '';
+    this.heading = '';
+    this.description = '';
+  }
+
+  render() {
+    return html`
+      <div class="card" part="card">
+        <div class="card__icon" part="icon"><slot name="icon">${this.icon}</slot></div>
+        <div class="card__text">
+          <h3 class="card__title" part="title">${this.heading}</h3>
+          <p class="card__desc" part="description">${this.description}</p>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-value-card', ArcValueCard);

package/src/feedback/alert.js

@@ -0,0 +1,187 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcAlert extends LitElement {
+  static properties = {
+    variant:     { type: String, reflect: true },
+    dismissible: { type: Boolean },
+    heading:     { type: String },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; }
+
+      .alert {
+        position: relative;
+        display: flex;
+        gap: var(--space-md);
+        padding: var(--space-lg);
+        border-radius: var(--radius-lg);
+        border: 1px solid var(--border-subtle);
+        background: var(--bg-card);
+        overflow: hidden;
+      }
+
+      /* Top gradient rule */
+      .alert::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background: var(--gradient-divider);
+      }
+
+      :host([variant="info"]) .alert::before {
+        background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
+        box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.15);
+      }
+      :host([variant="success"]) .alert::before {
+        background: linear-gradient(90deg, transparent, var(--color-success), transparent);
+        box-shadow: 0 0 12px rgba(var(--color-success-rgb), 0.15);
+      }
+      :host([variant="warning"]) .alert::before {
+        background: linear-gradient(90deg, transparent, var(--color-warning), transparent);
+        box-shadow: 0 0 12px rgba(var(--color-warning-rgb), 0.15);
+      }
+      :host([variant="error"]) .alert::before {
+        background: linear-gradient(90deg, transparent, var(--color-error), transparent);
+        box-shadow: 0 0 12px rgba(var(--color-error-rgb), 0.15);
+      }
+
+      .alert__icon-wrap {
+        flex-shrink: 0;
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--radius-md);
+        font-size: var(--text-md);
+        transition: box-shadow var(--transition-base);
+      }
+
+      :host([variant="info"]) .alert__icon-wrap {
+        background: rgba(var(--accent-primary-rgb), 0.08);
+        border: 1px solid rgba(var(--accent-primary-rgb), 0.15);
+        color: var(--accent-primary);
+        box-shadow: 0 0 16px rgba(var(--accent-primary-rgb), 0.1);
+      }
+      :host([variant="success"]) .alert__icon-wrap {
+        background: rgba(var(--color-success-rgb), 0.08);
+        border: 1px solid rgba(var(--color-success-rgb), 0.15);
+        color: var(--color-success);
+        box-shadow: 0 0 16px rgba(var(--color-success-rgb), 0.1);
+      }
+      :host([variant="warning"]) .alert__icon-wrap {
+        background: rgba(var(--color-warning-rgb), 0.08);
+        border: 1px solid rgba(var(--color-warning-rgb), 0.15);
+        color: var(--color-warning);
+        box-shadow: 0 0 16px rgba(var(--color-warning-rgb), 0.1);
+      }
+      :host([variant="error"]) .alert__icon-wrap {
+        background: rgba(var(--color-error-rgb), 0.08);
+        border: 1px solid rgba(var(--color-error-rgb), 0.15);
+        color: var(--color-error);
+        box-shadow: 0 0 16px rgba(var(--color-error-rgb), 0.1);
+      }
+
+      .alert__body { flex: 1; min-width: 0; }
+
+      .alert__heading {
+        font-family: var(--font-body);
+        font-weight: 600;
+        font-size: var(--text-md);
+        color: var(--text-primary);
+        margin: 0 0 var(--space-xs);
+      }
+
+      .alert__content {
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        line-height: 1.6;
+        color: var(--text-secondary);
+      }
+
+      .alert__dismiss {
+        position: absolute;
+        top: var(--space-sm);
+        right: var(--space-sm);
+        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;
+      }
+
+      .alert__dismiss:hover {
+        color: var(--text-primary);
+        background: var(--bg-hover);
+      }
+
+      .alert__dismiss:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-ring);
+      }
+
+      @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 = 'info';
+    this.dismissible = false;
+    this.heading = '';
+  }
+
+  _getIcon() {
+    switch (this.variant) {
+      case 'success': return '\u2713';
+      case 'warning': return '\u26A0';
+      case 'error':   return '\u2717';
+      default:        return '\u2139';
+    }
+  }
+
+  _dismiss() {
+    this.dispatchEvent(new CustomEvent('arc-dismiss', { bubbles: true, composed: true }));
+    this.style.display = 'none';
+  }
+
+  render() {
+    return html`
+      <div class="alert" role="alert" part="alert">
+        <div class="alert__icon-wrap" part="icon">${this._getIcon()}</div>
+        <div class="alert__body">
+          ${this.heading ? html`<p class="alert__heading" part="heading">${this.heading}</p>` : ''}
+          <div class="alert__content" part="content"><slot></slot></div>
+        </div>
+        ${this.dismissible ? html`
+          <button class="alert__dismiss" aria-label="Dismiss" @click=${this._dismiss} part="dismiss">&times;</button>
+        ` : ''}
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-alert', ArcAlert);

package/src/feedback/command-item.js

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