@arclux/arc-ui 1.0.0

package/src/content/avatar-group.js

@@ -0,0 +1,101 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+/**
+ * @arc-prism hybrid — stacked layout works without JS; overflow "+N" counter requires JS
+ */
+export class ArcAvatarGroup extends LitElement {
+  static properties = {
+    max:     { type: Number },
+    overlap: { type: String, reflect: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: inline-flex; }
+
+      .group {
+        display: flex;
+        align-items: center;
+      }
+
+      ::slotted(*) {
+        position: relative;
+        box-sizing: border-box;
+        box-shadow: 0 0 0 3px var(--bg-deep);
+        border-radius: var(--radius-full);
+        transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+      }
+
+      ::slotted(:hover) {
+        transform: translateY(-2px) scale(1.08);
+        z-index: 100 !important;
+        box-shadow: 0 0 0 3px var(--bg-deep), 0 4px 12px rgba(0, 0, 0, 0.3);
+      }
+
+      .group__overflow {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-family: var(--font-accent);
+        font-weight: 600;
+        font-size: var(--text-sm);
+        letter-spacing: 0.5px;
+        color: var(--text-ghost);
+        user-select: none;
+        padding-left: var(--space-sm);
+      }
+
+      :host([overlap="sm"]) .group__overflow { padding-left: var(--space-xs); }
+      :host([overlap="lg"]) .group__overflow { padding-left: var(--space-md); }
+
+      @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.max = Infinity;
+    this.overlap = 'md';
+  }
+
+  /** @private */
+  _handleSlotChange(e) {
+    const nodes = e.target.assignedElements();
+    const overflow = nodes.length - this.max;
+    const margins = { sm: -8, md: -12, lg: -16 };
+    const ml = margins[this.overlap] ?? margins.md;
+
+    nodes.forEach((node, i) => {
+      node.style.display = i < this.max ? '' : 'none';
+      node.style.zIndex = nodes.length - i;
+      node.style.marginLeft = i === 0 ? '0' : `${ml}px`;
+    });
+
+    const counter = this.shadowRoot.querySelector('.group__overflow');
+    if (counter) {
+      counter.style.display = overflow > 0 ? '' : 'none';
+      counter.textContent = `+${overflow}`;
+    }
+  }
+
+  render() {
+    return html`
+      <div class="group" part="group" role="group" aria-label="Avatar group">
+        <slot @slotchange=${this._handleSlotChange}></slot>
+        <span class="group__overflow" part="overflow" style="display:none"></span>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-avatar-group', ArcAvatarGroup);

package/src/content/avatar.js

@@ -0,0 +1,92 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcAvatar extends LitElement {
+  static properties = {
+    src:  { type: String },
+    name: { type: String, reflect: true },
+    size: { type: String, reflect: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: inline-flex; }
+
+      .avatar {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--radius-full);
+        border: 1px solid var(--border-default);
+        overflow: hidden;
+        background: var(--bg-elevated);
+        transition: border-color var(--transition-base), box-shadow var(--transition-base);
+      }
+
+      .avatar:hover {
+        border-color: var(--border-bright);
+        box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.15);
+      }
+
+      :host([size="sm"]) .avatar { width: 32px; height: 32px; }
+      :host([size="md"]) .avatar { width: 40px; height: 40px; }
+      :host([size="lg"]) .avatar { width: 56px; height: 56px; }
+
+      .avatar__img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: var(--radius-full);
+      }
+
+      .avatar__initials {
+        font-family: var(--font-accent);
+        font-weight: 600;
+        color: var(--text-primary);
+        text-transform: uppercase;
+        user-select: none;
+      }
+
+      :host([size="sm"]) .avatar__initials { font-size: var(--text-xs); }
+      :host([size="md"]) .avatar__initials { font-size: var(--text-sm); }
+      :host([size="lg"]) .avatar__initials { font-size: var(--text-lg); }
+
+      @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.src = '';
+    this.name = '';
+    this.size = 'md';
+  }
+
+  /** @private */
+  _getInitials() {
+    return this.name ? this.name.charAt(0).toUpperCase() : '?';
+  }
+
+  render() {
+    const content = this.src
+      ? html`<img class="avatar__img" part="img" src=${this.src} alt=${this.name || 'Avatar'} />`
+      : html`<span class="avatar__initials" part="initials">${this._getInitials()}</span>`;
+
+    return html`
+      <div class="avatar" part="avatar" role="img" aria-label=${this.name || 'Avatar'}>
+        ${content}
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-avatar', ArcAvatar);

package/src/content/badge.js

@@ -0,0 +1,98 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcBadge extends LitElement {
+  static properties = {
+    variant: { type: String, reflect: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: inline-flex; }
+
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-xs);
+        font-family: var(--font-accent);
+        font-weight: 600;
+        font-size: var(--text-xs);
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: var(--text-muted);
+        padding: var(--space-xs) var(--space-sm);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-sm);
+        background: var(--bg-hover);
+        transition: box-shadow 200ms ease, border-color 200ms ease;
+        line-height: 1.4;
+      }
+
+      :host([variant="primary"]) .badge {
+        border-color: var(--accent-primary-border);
+        color: var(--accent-primary);
+        background: rgba(var(--accent-primary-rgb), 0.06);
+      }
+
+      :host([variant="secondary"]) .badge {
+        border-color: var(--accent-secondary-border);
+        color: var(--accent-secondary);
+        background: rgba(var(--accent-secondary-rgb), 0.06);
+      }
+
+      :host([variant="success"]) .badge {
+        border-color: rgba(var(--color-success-rgb), 0.2);
+        color: var(--color-success);
+        background: rgba(var(--color-success-rgb), 0.06);
+      }
+
+      :host([variant="warning"]) .badge {
+        border-color: rgba(var(--color-warning-rgb), 0.2);
+        color: var(--color-warning);
+        background: rgba(var(--color-warning-rgb), 0.06);
+      }
+
+      :host([variant="error"]) .badge {
+        border-color: rgba(var(--color-error-rgb), 0.2);
+        color: var(--color-error);
+        background: rgba(var(--color-error-rgb), 0.06);
+      }
+
+      :host([variant="info"]) .badge {
+        border-color: rgba(var(--color-info-rgb), 0.2);
+        color: var(--color-info);
+        background: rgba(var(--color-info-rgb), 0.06);
+      }
+
+      :host(:hover) .badge { border-color: var(--border-bright); }
+      :host([variant="primary"]:hover) .badge { box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.15); }
+      :host([variant="secondary"]:hover) .badge { box-shadow: 0 0 12px rgba(var(--accent-secondary-rgb), 0.15); }
+      :host([variant="success"]:hover) .badge { box-shadow: 0 0 12px rgba(var(--color-success-rgb), 0.15); }
+      :host([variant="warning"]:hover) .badge { box-shadow: 0 0 12px rgba(var(--color-warning-rgb), 0.15); }
+      :host([variant="error"]:hover) .badge { box-shadow: 0 0 12px rgba(var(--color-error-rgb), 0.15); }
+      :host([variant="info"]:hover) .badge { box-shadow: 0 0 12px rgba(var(--color-info-rgb), 0.15); }
+
+      @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 = 'default';
+  }
+
+  render() {
+    return html`<span class="badge" part="badge"><slot></slot></span>`;
+  }
+}
+
+customElements.define('arc-badge', ArcBadge);

package/src/content/callout.js

@@ -0,0 +1,141 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+import './icon.js';
+
+export class ArcCallout extends LitElement {
+  static properties = {
+    variant: { type: String, reflect: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; }
+
+      .callout {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-sm);
+        padding: var(--space-md) var(--space-lg);
+        border-radius: var(--radius-md);
+        border: 1px solid var(--border-default);
+        background: var(--bg-card);
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        line-height: 1.7;
+        color: var(--text-secondary);
+      }
+
+      .callout__header {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+      }
+
+      .callout__icon {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+      }
+
+      .callout__label {
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        font-weight: 600;
+        letter-spacing: 1.5px;
+        text-transform: uppercase;
+      }
+
+      .callout__content {
+        min-width: 0;
+      }
+
+      /* ── Info ── */
+      :host([variant="info"]) .callout {
+        border-color: rgba(var(--accent-primary-rgb), 0.12);
+        background: rgba(var(--accent-primary-rgb), 0.04);
+      }
+      :host([variant="info"]) .callout__icon { color: var(--accent-primary); }
+      :host([variant="info"]) .callout__label { color: var(--accent-primary); }
+
+      /* ── Warning ── */
+      :host([variant="warning"]) .callout {
+        border-color: rgba(var(--color-warning-rgb), 0.15);
+        background: rgba(var(--color-warning-rgb), 0.04);
+      }
+      :host([variant="warning"]) .callout__icon { color: var(--color-warning); }
+      :host([variant="warning"]) .callout__label { color: var(--color-warning); }
+
+      /* ── Tip ── */
+      :host([variant="tip"]) .callout {
+        border-color: rgba(var(--color-success-rgb), 0.15);
+        background: rgba(var(--color-success-rgb), 0.04);
+      }
+      :host([variant="tip"]) .callout__icon { color: var(--color-success); }
+      :host([variant="tip"]) .callout__label { color: var(--color-success); }
+
+      /* ── Danger ── */
+      :host([variant="danger"]) .callout {
+        border-color: rgba(var(--color-error-rgb), 0.15);
+        background: rgba(var(--color-error-rgb), 0.04);
+      }
+      :host([variant="danger"]) .callout__icon { color: var(--color-error); }
+      :host([variant="danger"]) .callout__label { 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.variant = 'info';
+  }
+
+  /** @private */
+  _getDefaultIcon() {
+    const icons = {
+      info:    'info',
+      warning: 'warning',
+      tip:     'lightbulb',
+      danger:  'x-circle',
+    };
+    return icons[this.variant] || icons.info;
+  }
+
+  /** @private */
+  _getLabel() {
+    const labels = {
+      info:    'Note',
+      warning: 'Warning',
+      tip:     'Tip',
+      danger:  'Danger',
+    };
+    return labels[this.variant] || labels.info;
+  }
+
+  render() {
+    return html`
+      <div class="callout" part="callout" role="note">
+        <div class="callout__header" part="header">
+          <span class="callout__icon" part="icon" aria-hidden="true">
+            <slot name="icon"><arc-icon name=${this._getDefaultIcon()} size="sm"></arc-icon></slot>
+          </span>
+          <span class="callout__label" part="label">${this._getLabel()}</span>
+        </div>
+        <div class="callout__content" part="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-callout', ArcCallout);

package/src/content/card.js

@@ -0,0 +1,75 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcCard extends LitElement {
+  static properties = {
+    href: { type: String },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; }
+
+      .card {
+        position: relative;
+        border-radius: var(--radius-lg);
+        padding: 1px;
+        background: var(--border-subtle);
+        transition: background var(--transition-slow);
+        text-decoration: none;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      :host([href]) .card:hover {
+        background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.3), rgba(var(--accent-secondary-rgb),0.15), var(--border-default));
+      }
+
+      .card__inner {
+        position: relative;
+        background: var(--bg-card);
+        border-radius: calc(var(--radius-lg) - 1px);
+        padding: var(--space-xl) var(--space-lg);
+        flex: 1;
+        min-height: 0;
+        transition: box-shadow var(--transition-slow);
+      }
+
+      .card:hover .card__inner {
+        box-shadow: inset 0 1px 0 var(--bg-hover), var(--glow-card-hover);
+      }
+
+      .card:focus-visible { outline: none; box-shadow: var(--focus-glow); border-radius: var(--radius-lg); }
+
+      @media (max-width: 768px) {
+        .card__inner { padding: var(--space-lg) var(--space-md); }
+      }
+
+      @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.href = '';
+  }
+
+  render() {
+    if (this.href) {
+      return html`<a class="card" href=${this.href} part="card"><div class="card__inner" part="inner"><slot></slot></div></a>`;
+    }
+    return html`<div class="card" part="card"><div class="card__inner" part="inner"><slot></slot></div></div>`;
+  }
+}
+
+customElements.define('arc-card', ArcCard);