@arclux/arc-ui 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arclux/arc-ui",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "ARC UI — Lit Web Components implementing the Arclight design system.",
   "type": "module",
   "main": "src/index.js",

package/src/content/accordion.js

@@ -4,6 +4,7 @@ import './accordion-item.js';
 
 export class ArcAccordion extends LitElement {
   static properties = {
+    multiple:   { type: Boolean, reflect: true },
     _items:     { state: true },
     _openItems: { state: true },
   };
@@ -98,6 +99,7 @@ export class ArcAccordion extends LitElement {
 
   constructor() {
     super();
+    this.multiple = false;
     this._items = [];
     this._openItems = new Set();
   }
@@ -112,6 +114,7 @@ export class ArcAccordion extends LitElement {
     if (next.has(index)) {
       next.delete(index);
     } else {
+      if (!this.multiple) next.clear();
       next.add(index);
     }
     this._openItems = next;

package/src/content/avatar.js

@@ -3,15 +3,17 @@ 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 },
+    src:    { type: String },
+    name:   { type: String, reflect: true },
+    size:   { type: String, reflect: true },
+    shape:  { type: String, reflect: true },
+    status: { type: String, reflect: true },
   };
 
   static styles = [
     tokenStyles,
     css`
-      :host { display: inline-flex; }
+      :host { display: inline-flex; position: relative; }
 
       .avatar {
         display: inline-flex;
@@ -48,10 +50,36 @@ export class ArcAvatar extends LitElement {
         user-select: none;
       }
 
+      /* Shape variants */
+      :host([shape="square"]) .avatar,
+      :host([shape="square"]) .avatar__img { border-radius: var(--radius-md); }
+      :host([shape="rounded"]) .avatar,
+      :host([shape="rounded"]) .avatar__img { border-radius: var(--radius-lg); }
+
       :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); }
 
+      /* Status indicator */
+      .avatar__status {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        width: 10px;
+        height: 10px;
+        border-radius: var(--radius-full);
+        border: 2px solid var(--bg-deep);
+        box-sizing: border-box;
+      }
+
+      :host([size="sm"]) .avatar__status { width: 8px; height: 8px; }
+      :host([size="lg"]) .avatar__status { width: 14px; height: 14px; border-width: 3px; }
+
+      :host([status="online"]) .avatar__status { background: var(--color-success); }
+      :host([status="offline"]) .avatar__status { background: var(--text-ghost); }
+      :host([status="busy"]) .avatar__status { background: var(--color-error); }
+      :host([status="away"]) .avatar__status { background: var(--color-warning); }
+
       @media (prefers-reduced-motion: reduce) {
         :host *,
         :host *::before,
@@ -69,6 +97,8 @@ export class ArcAvatar extends LitElement {
     this.src = '';
     this.name = '';
     this.size = 'md';
+    this.shape = 'circle';
+    this.status = '';
   }
 
   /** @private */
@@ -85,6 +115,7 @@ export class ArcAvatar extends LitElement {
       <div class="avatar" part="avatar" role="img" aria-label=${this.name || 'Avatar'}>
         ${content}
       </div>
+      ${this.status ? html`<span class="avatar__status" part="status" aria-label=${this.status}></span>` : ''}
     `;
   }
 }

package/src/content/badge.js

@@ -4,6 +4,7 @@ import { tokenStyles } from '../shared-styles.js';
 export class ArcBadge extends LitElement {
   static properties = {
     variant: { type: String, reflect: true },
+    size:    { type: String, reflect: true },
     color:   { type: String },
   };
 
@@ -74,6 +75,10 @@ export class ArcBadge extends LitElement {
       :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); }
 
+      /* Sizes */
+      :host([size="sm"]) .badge { font-size: calc(var(--text-xs) - 1px); padding: 2px var(--space-xs); }
+      :host([size="lg"]) .badge { font-size: var(--text-sm); padding: var(--space-sm) var(--space-md); }
+
       @media (prefers-reduced-motion: reduce) {
         :host *,
         :host *::before,
@@ -89,6 +94,7 @@ export class ArcBadge extends LitElement {
   constructor() {
     super();
     this.variant = 'default';
+    this.size = 'md';
     this.color = '';
   }
 

package/src/content/callout.js

@@ -5,7 +5,9 @@ import './icon.js';
 
 export class ArcCallout extends LitElement {
   static properties = {
-    variant: { type: String, reflect: true },
+    variant:     { type: String, reflect: true },
+    dismissible: { type: Boolean, reflect: true },
+    _dismissed:  { state: true },
   };
 
   static styles = [
@@ -54,6 +56,36 @@ export class ArcCallout extends LitElement {
         min-width: 0;
       }
 
+      .callout__dismiss {
+        margin-left: auto;
+        background: none;
+        border: none;
+        color: var(--text-muted);
+        cursor: pointer;
+        padding: var(--space-xs);
+        border-radius: var(--radius-sm);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0.6;
+        transition: opacity var(--transition-fast), background var(--transition-fast);
+        flex-shrink: 0;
+      }
+
+      .callout__dismiss:hover {
+        opacity: 1;
+        background: rgba(var(--_status-rgb), 0.08);
+      }
+
+      .callout__dismiss:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-glow);
+      }
+
+      :host(.dismissed) {
+        display: none;
+      }
+
       @media (prefers-reduced-motion: reduce) {
         :host *,
         :host *::before,
@@ -69,6 +101,8 @@ export class ArcCallout extends LitElement {
   constructor() {
     super();
     this.variant = 'info';
+    this.dismissible = false;
+    this._dismissed = false;
   }
 
   /** @private */
@@ -93,7 +127,15 @@ export class ArcCallout extends LitElement {
     return labels[this.variant] || labels.info;
   }
 
+  _dismiss() {
+    this._dismissed = true;
+    this.classList.add('dismissed');
+    this.dispatchEvent(new CustomEvent('arc-dismiss', { bubbles: true, composed: true }));
+  }
+
   render() {
+    if (this._dismissed) return html``;
+
     return html`
       <div class="callout" part="callout" role="note">
         <div class="callout__header" part="header">
@@ -101,6 +143,13 @@ export class ArcCallout extends LitElement {
             <slot name="icon"><arc-icon name=${this._getDefaultIcon()} size="sm"></arc-icon></slot>
           </span>
           <span class="callout__label" part="label">${this._getLabel()}</span>
+          ${this.dismissible ? html`
+            <button class="callout__dismiss" @click=${this._dismiss} aria-label="Dismiss" part="dismiss">
+              <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+                <path d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"/>
+              </svg>
+            </button>
+          ` : ''}
         </div>
         <div class="callout__content" part="content">
           <slot></slot>

package/src/content/card.js

@@ -4,8 +4,10 @@ import { cardHoverStyles } from '../card-styles.js';
 
 export class ArcCard extends LitElement {
   static properties = {
-    href: { type: String },
-    _hasFooter: { state: true },
+    href:        { type: String },
+    padding:     { type: String, reflect: true },
+    interactive: { type: Boolean, reflect: true },
+    _hasFooter:  { state: true },
   };
 
   static styles = [
@@ -16,18 +18,25 @@ export class ArcCard extends LitElement {
 
       .card { height: 100%; }
 
-      /* Suppress hover effect when no href */
-      :host(:not([href])) .card:hover {
+      /* Suppress hover effect when no href and not interactive */
+      :host(:not([href]):not([interactive])) .card:hover {
         background: var(--border-subtle);
       }
-      :host(:not([href])) .card:hover .card__inner {
+      :host(:not([href]):not([interactive])) .card:hover .card__inner {
         box-shadow: none;
       }
 
+      :host([interactive]) .card { cursor: pointer; }
+
       .card__inner {
         padding: var(--space-xl) var(--space-lg);
       }
 
+      /* Padding variants */
+      :host([padding="none"]) .card__inner { padding: 0; }
+      :host([padding="sm"]) .card__inner { padding: var(--space-md) var(--space-sm); }
+      :host([padding="lg"]) .card__inner { padding: var(--space-2xl) var(--space-xl); }
+
       .card__body {
         flex: 1;
       }
@@ -59,6 +68,8 @@ export class ArcCard extends LitElement {
   constructor() {
     super();
     this.href = '';
+    this.padding = 'md';
+    this.interactive = false;
     this._hasFooter = false;
   }
 

package/src/content/divider.js

@@ -3,9 +3,10 @@ import { tokenStyles } from '../shared-styles.js';
 
 export class ArcDivider extends LitElement {
   static properties = {
-    variant: { type: String, reflect: true },
-    align: { type: String, reflect: true },
+    variant:  { type: String, reflect: true },
+    align:    { type: String, reflect: true },
     vertical: { type: Boolean, reflect: true },
+    label:    { type: String },
   };
 
   static styles = [
@@ -128,6 +129,33 @@ export class ArcDivider extends LitElement {
         background: linear-gradient(180deg, transparent, rgba(var(--text-primary-rgb),0.35), transparent);
       }
 
+      /* Labeled divider */
+      .divider--labeled {
+        display: flex;
+        align-items: center;
+        gap: var(--space-md);
+        height: auto;
+        background: none !important;
+        box-shadow: none !important;
+      }
+
+      .divider__line {
+        flex: 1;
+        height: 1px;
+        background: var(--gradient-divider);
+      }
+
+      .divider__label {
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        font-weight: 600;
+        letter-spacing: 1.5px;
+        text-transform: uppercase;
+        color: var(--text-muted);
+        white-space: nowrap;
+        flex-shrink: 0;
+      }
+
       @keyframes divider-shimmer {
         0%, 100% { background-position: 200% 0; }
         50% { background-position: -100% 0; }
@@ -143,9 +171,19 @@ export class ArcDivider extends LitElement {
     super();
     this.variant = 'subtle';
     this.vertical = false;
+    this.label = '';
   }
 
   render() {
+    if (this.label && !this.vertical) {
+      return html`
+        <div class="divider divider--labeled" role="separator" part="divider">
+          <span class="divider__line" part="line"></span>
+          <span class="divider__label" part="label">${this.label}</span>
+          <span class="divider__line" part="line"></span>
+        </div>
+      `;
+    }
     return html`<div class="divider" role="separator" aria-orientation=${this.vertical ? 'vertical' : 'horizontal'} part="divider"></div>`;
   }
 }

package/src/content/skeleton.js

@@ -6,6 +6,7 @@ export class ArcSkeleton extends LitElement {
     variant: { type: String, reflect: true },
     width:   { type: String },
     height:  { type: String },
+    count:   { type: Number },
   };
 
   static styles = [
@@ -43,6 +44,12 @@ export class ArcSkeleton extends LitElement {
         border-radius: var(--radius-md);
       }
 
+      .skeleton-group {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-sm);
+      }
+
       @media (prefers-reduced-motion: reduce) {
         :host *,
         :host *::before,
@@ -60,24 +67,28 @@ export class ArcSkeleton extends LitElement {
     this.variant = 'text';
     this.width = '';
     this.height = '';
+    this.count = 1;
   }
 
-  render() {
+  _renderOne() {
     const styles = [
       this.width ? `width:${this.width}` : '',
       this.height ? `height:${this.height}` : '',
       this.variant === 'circle' && !this.height && this.width ? `height:${this.width}` : '',
     ].filter(Boolean).join(';');
 
+    return html`<div class="skeleton" part="skeleton" style=${styles}></div>`;
+  }
+
+  render() {
+    const n = Math.max(1, this.count);
+    if (n === 1) {
+      return html`<div role="status" aria-label="Loading" aria-busy="true">${this._renderOne()}</div>`;
+    }
     return html`
-      <div
-        class="skeleton"
-        part="skeleton"
-        role="status"
-        aria-label="Loading"
-        aria-busy="true"
-        style=${styles}
-      ></div>
+      <div class="skeleton-group" role="status" aria-label="Loading" aria-busy="true">
+        ${Array.from({ length: n }, () => this._renderOne())}
+      </div>
     `;
   }
 }

package/src/content/stat.js

@@ -3,8 +3,10 @@ import { tokenStyles } from '../shared-styles.js';
 
 export class ArcStat extends LitElement {
   static properties = {
-    value: { type: String },
-    label: { type: String },
+    value:  { type: String },
+    label:  { type: String },
+    trend:  { type: String, reflect: true },
+    change: { type: String },
   };
 
   static styles = [
@@ -49,6 +51,25 @@ export class ArcStat extends LitElement {
         text-transform: uppercase;
         color: var(--text-muted);
       }
+
+      .stat__trend {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        font-family: var(--font-mono);
+        font-size: var(--text-sm);
+        font-weight: 500;
+        margin-top: var(--space-xs);
+      }
+
+      :host([trend="up"]) .stat__trend { color: var(--color-success); }
+      :host([trend="down"]) .stat__trend { color: var(--color-error); }
+      :host([trend="neutral"]) .stat__trend { color: var(--text-muted); }
+
+      .stat__trend-arrow {
+        width: 12px;
+        height: 12px;
+      }
     `,
   ];
 
@@ -56,14 +77,26 @@ export class ArcStat extends LitElement {
     super();
     this.value = '';
     this.label = '';
+    this.trend = '';
+    this.change = '';
   }
 
   render() {
+    const arrowUp = html`<svg class="stat__trend-arrow" viewBox="0 0 16 16" fill="currentColor"><path d="M8 3.5l4.5 5H3.5z"/></svg>`;
+    const arrowDown = html`<svg class="stat__trend-arrow" viewBox="0 0 16 16" fill="currentColor"><path d="M8 12.5l4.5-5H3.5z"/></svg>`;
+    const dash = html`<svg class="stat__trend-arrow" viewBox="0 0 16 16" fill="currentColor"><rect x="3" y="7" width="10" height="2" rx="1"/></svg>`;
+
     return html`
       <div class="stat" part="stat">
         <span class="stat__value" part="value">${this.value}</span>
         <span class="stat__rule"></span>
         <span class="stat__label" part="label">${this.label}</span>
+        ${this.trend ? html`
+          <span class="stat__trend" part="trend">
+            ${this.trend === 'up' ? arrowUp : this.trend === 'down' ? arrowDown : dash}
+            ${this.change || ''}
+          </span>
+        ` : ''}
       </div>
     `;
   }

package/src/content/tag.js

@@ -4,6 +4,7 @@ import { tokenStyles } from '../shared-styles.js';
 export class ArcTag extends LitElement {
   static properties = {
     variant:   { type: String, reflect: true },
+    size:      { type: String, reflect: true },
     removable: { type: Boolean, reflect: true },
     disabled:  { type: Boolean, reflect: true },
     color:     { type: String },
@@ -70,6 +71,10 @@ export class ArcTag extends LitElement {
       :host([variant="warning"]) .tag:hover { box-shadow: 0 0 12px rgba(var(--color-warning-rgb), 0.15); }
       :host([variant="danger"]) .tag:hover { box-shadow: 0 0 12px rgba(var(--color-error-rgb), 0.15); }
 
+      /* Sizes */
+      :host([size="sm"]) .tag { font-size: calc(var(--text-xs) - 1px); padding: 2px var(--space-sm); letter-spacing: 1.5px; }
+      :host([size="lg"]) .tag { font-size: var(--text-sm); padding: var(--space-sm) var(--space-lg); }
+
       .tag__label {
         display: inline-flex;
         align-items: center;
@@ -118,6 +123,7 @@ export class ArcTag extends LitElement {
   constructor() {
     super();
     this.variant = 'default';
+    this.size = 'md';
     this.removable = false;
     this.disabled = false;
     this.color = '';

package/src/feedback/alert.js

@@ -6,6 +6,7 @@ import { getStatusIcon } from '../status-utils.js';
 export class ArcAlert extends LitElement {
   static properties = {
     variant:     { type: String, reflect: true },
+    compact:     { type: Boolean, reflect: true },
     dismissible: { type: Boolean },
     heading:     { type: String },
   };
@@ -72,6 +73,12 @@ export class ArcAlert extends LitElement {
         color: var(--text-secondary);
       }
 
+      /* Compact variant */
+      :host([compact]) .alert { padding: var(--space-sm) var(--space-md); gap: var(--space-sm); }
+      :host([compact]) .alert__icon-wrap { width: 24px; height: 24px; font-size: var(--text-sm); }
+      :host([compact]) .alert__heading { font-size: var(--text-sm); margin-bottom: 2px; }
+      :host([compact]) .alert__content { font-size: var(--text-xs); }
+
       .alert__dismiss {
         position: absolute;
         top: var(--space-sm);
@@ -116,6 +123,7 @@ export class ArcAlert extends LitElement {
   constructor() {
     super();
     this.variant = 'info';
+    this.compact = false;
     this.dismissible = false;
     this.heading = '';
   }

package/src/feedback/modal.js

@@ -3,10 +3,11 @@ import { tokenStyles } from '../shared-styles.js';
 
 export class ArcModal extends LitElement {
   static properties = {
-    open:     { type: Boolean, reflect: true },
-    heading:  { type: String },
-    size:     { type: String, reflect: true },
-    closable: { type: Boolean },
+    open:       { type: Boolean, reflect: true },
+    heading:    { type: String },
+    size:       { type: String, reflect: true },
+    fullscreen: { type: Boolean, reflect: true },
+    closable:   { type: Boolean },
   };
 
   static styles = [
@@ -58,6 +59,19 @@ export class ArcModal extends LitElement {
       :host([size="md"]) .modal__dialog { max-width: 560px; }
       :host([size="lg"]) .modal__dialog { max-width: 720px; }
 
+      :host([fullscreen]) .modal__dialog {
+        max-width: none;
+        max-height: none;
+        width: 100%;
+        height: 100%;
+        border-radius: 0;
+        border: none;
+      }
+
+      :host([fullscreen]) .modal__backdrop {
+        padding: 0;
+      }
+
       .modal__header {
         display: flex;
         align-items: center;
@@ -127,6 +141,7 @@ export class ArcModal extends LitElement {
     this.open = false;
     this.heading = '';
     this.size = 'md';
+    this.fullscreen = false;
     this.closable = true;
     this._handleKeydown = this._handleKeydown.bind(this);
   }

package/src/feedback/progress.js

@@ -7,6 +7,7 @@ export class ArcProgress extends LitElement {
     variant:       { type: String, reflect: true },
     size:          { type: String, reflect: true },
     indeterminate: { type: Boolean, reflect: true },
+    showValue:     { type: Boolean, attribute: 'show-value', reflect: true },
     label:         { type: String },
   };
 
@@ -84,6 +85,19 @@ export class ArcProgress extends LitElement {
         animation: spinner-dash 1.4s ease-in-out infinite;
       }
 
+      .progress__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        margin-bottom: var(--space-xs);
+      }
+
+      .progress__value {
+        font-family: var(--font-mono);
+        font-size: var(--text-xs);
+        color: var(--text-muted);
+      }
+
       @keyframes progress-indeterminate {
         0%   { transform: translateX(-100%); }
         100% { transform: translateX(400%); }
@@ -115,6 +129,7 @@ export class ArcProgress extends LitElement {
     this.variant = 'bar';
     this.size = 'md';
     this.indeterminate = false;
+    this.showValue = false;
     this.label = '';
   }
 
@@ -143,9 +158,16 @@ export class ArcProgress extends LitElement {
       `;
     }
 
+    const hasHeader = this.label || (this.showValue && !this.indeterminate);
+
     return html`
       <div part="progress">
-        ${this.label ? html`<span class="progress__label" part="label">${this.label}</span>` : ''}
+        ${hasHeader ? html`
+          <div class="progress__header">
+            ${this.label ? html`<span class="progress__label" style="margin-bottom:0" part="label">${this.label}</span>` : html`<span></span>`}
+            ${this.showValue && !this.indeterminate ? html`<span class="progress__value" part="value">${clampedValue}%</span>` : ''}
+          </div>
+        ` : ''}
         <div
           class="progress__track"
           role="progressbar"

package/src/feedback/toast.js

@@ -110,6 +110,26 @@ export class ArcToast extends LitElement {
 
       .toast__dismiss:hover { color: var(--text-primary); }
 
+      .toast__action {
+        background: none;
+        border: none;
+        color: var(--_status-color);
+        cursor: pointer;
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        font-weight: 600;
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        padding: var(--space-xs) var(--space-sm);
+        border-radius: var(--radius-sm);
+        transition: background var(--transition-fast);
+        white-space: nowrap;
+      }
+
+      .toast__action:hover {
+        background: rgba(var(--_status-rgb), 0.1);
+      }
+
       .toast.is-exiting {
         animation: toast-out 200ms ease-in forwards;
       }
@@ -145,16 +165,21 @@ export class ArcToast extends LitElement {
     this._counter = 0;
   }
 
-  show({ message, variant = 'info', duration }) {
+  show({ message, variant = 'info', duration, action, actionLabel, persistent = false }) {
     const id = ++this._counter;
     const dur = duration ?? this.duration;
-    this._toasts = [...this._toasts, { id, message, variant }];
+    this._toasts = [...this._toasts, { id, message, variant, action, actionLabel }];
 
-    if (dur > 0) {
+    if (!persistent && dur > 0) {
       setTimeout(() => this._dismiss(id), dur);
     }
   }
 
+  _handleAction(toast) {
+    if (toast.action) toast.action();
+    this._dismiss(toast.id);
+  }
+
   _dismiss(id) {
     if (!this._toasts.some(t => t.id === id)) return;
     const el = this.shadowRoot.querySelector(`[data-toast-id="${id}"]`);
@@ -183,6 +208,9 @@ export class ArcToast extends LitElement {
           <div class="toast" style=${statusStyle(t.variant)} data-toast-id=${t.id} part="toast">
             <span class="toast__icon" aria-hidden="true">${getStatusIcon(t.variant)}</span>
             <span class="toast__message">${t.message}</span>
+            ${t.actionLabel ? html`
+              <button class="toast__action" @click=${() => this._handleAction(t)} part="action">${t.actionLabel}</button>
+            ` : ''}
             <button class="toast__dismiss" @click=${() => this._dismiss(t.id)} aria-label="Dismiss">&times;</button>
           </div>
         `)}