@arclux/arc-ui 1.3.0 → 1.5.0

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

@@ -1,15 +1,19 @@
 import { LitElement, html, css } from 'lit';
 import { tokenStyles } from '../shared-styles.js';
+import { statusVars } from '../status-styles.js';
+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 },
   };
 
   static styles = [
     tokenStyles,
+    statusVars,
     css`
       :host { display: block; }
 
@@ -32,24 +36,8 @@ export class ArcAlert extends LitElement {
         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);
+        background: linear-gradient(90deg, transparent, var(--_status-color), transparent);
+        box-shadow: 0 0 12px rgba(var(--_status-rgb), 0.15);
       }
 
       .alert__icon-wrap {
@@ -62,31 +50,10 @@ export class ArcAlert extends LitElement {
         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);
+        background: rgba(var(--_status-rgb), 0.08);
+        border: 1px solid rgba(var(--_status-rgb), 0.15);
+        color: var(--_status-color);
+        box-shadow: 0 0 16px rgba(var(--_status-rgb), 0.1);
       }
 
       .alert__body { flex: 1; min-width: 0; }
@@ -106,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);
@@ -150,19 +123,11 @@ export class ArcAlert extends LitElement {
   constructor() {
     super();
     this.variant = 'info';
+    this.compact = false;
     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';
@@ -171,7 +136,7 @@ export class ArcAlert extends LitElement {
   render() {
     return html`
       <div class="alert" role="alert" part="alert">
-        <div class="alert__icon-wrap" part="icon">${this._getIcon()}</div>
+        <div class="alert__icon-wrap" part="icon">${getStatusIcon(this.variant)}</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>

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

@@ -1,5 +1,18 @@
 import { LitElement, html, css } from 'lit';
 import { tokenStyles } from '../shared-styles.js';
+import { getStatusIcon } from '../status-utils.js';
+
+/** Returns inline style string setting --_status-color/rgb for a given variant */
+function statusStyle(variant) {
+  const map = {
+    info:    { color: 'var(--accent-primary)',  rgb: 'var(--accent-primary-rgb)' },
+    success: { color: 'var(--color-success)',   rgb: 'var(--color-success-rgb)' },
+    warning: { color: 'var(--color-warning)',   rgb: 'var(--color-warning-rgb)' },
+    error:   { color: 'var(--color-error)',     rgb: 'var(--color-error-rgb)' },
+  };
+  const v = map[variant] || map.info;
+  return `--_status-color:${v.color};--_status-rgb:${v.rgb}`;
+}
 
 export class ArcToast extends LitElement {
   static properties = {
@@ -71,33 +84,16 @@ export class ArcToast extends LitElement {
         left: 0;
         right: 0;
         height: 2px;
-        background: var(--gradient-divider);
-      }
-
-      .toast--info::after {
-        background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
-      }
-      .toast--success::after {
-        background: linear-gradient(90deg, transparent, var(--color-success), transparent);
-      }
-      .toast--warning::after {
-        background: linear-gradient(90deg, transparent, var(--color-warning), transparent);
-      }
-      .toast--error::after {
-        background: linear-gradient(90deg, transparent, var(--color-error), transparent);
+        background: linear-gradient(90deg, transparent, var(--_status-color), transparent);
       }
 
       .toast__icon {
         font-size: var(--text-sm);
         flex-shrink: 0;
         line-height: 1;
+        color: var(--_status-color);
       }
 
-      .toast--info .toast__icon    { color: var(--accent-primary); }
-      .toast--success .toast__icon { color: var(--color-success); }
-      .toast--warning .toast__icon { color: var(--color-warning); }
-      .toast--error .toast__icon   { color: var(--color-error); }
-
       .toast__message { flex: 1; }
 
       .toast__dismiss {
@@ -114,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;
       }
@@ -149,25 +165,21 @@ export class ArcToast extends LitElement {
     this._counter = 0;
   }
 
-  _getIcon(variant) {
-    switch (variant) {
-      case 'success': return '\u2713';
-      case 'warning': return '\u26A0';
-      case 'error':   return '\u2717';
-      default:        return '\u2139';
-    }
-  }
-
-  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}"]`);
@@ -193,9 +205,12 @@ export class ArcToast extends LitElement {
     return html`
       <div class="toast-container" role="status" aria-live="polite" aria-atomic="false" part="container">
         ${this._toasts.map(t => html`
-          <div class="toast toast--${t.variant}" data-toast-id=${t.id} part="toast">
-            <span class="toast__icon" aria-hidden="true">${this._getIcon(t.variant)}</span>
+          <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>
         `)}

package/src/input/button.js

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from 'lit';
 import { tokenStyles } from '../shared-styles.js';
+import { buttonVariantStyles } from '../button-styles.js';
 
 export class ArcButton extends LitElement {
   static properties = {
@@ -7,6 +8,7 @@ export class ArcButton extends LitElement {
     size:       { type: String, reflect: true },
     href:       { type: String },
     disabled:   { type: Boolean, reflect: true },
+    loading:    { type: Boolean, reflect: true },
     type:       { type: String },
     _hasPrefix: { state: true },
     _hasSuffix: { state: true },
@@ -14,9 +16,30 @@ export class ArcButton extends LitElement {
 
   static styles = [
     tokenStyles,
+    buttonVariantStyles,
     css`
       :host { display: inline-flex; }
-      :host([disabled]) { pointer-events: none; }
+      :host([disabled]),
+      :host([loading]) { pointer-events: none; }
+
+      :host([loading]) .btn { opacity: 0.7; }
+
+      .btn__spinner {
+        display: none;
+        width: 14px;
+        height: 14px;
+        border: 2px solid currentColor;
+        border-top-color: transparent;
+        border-radius: var(--radius-full);
+        animation: arc-btn-spin 600ms linear infinite;
+      }
+
+      :host([loading]) .btn__spinner { display: inline-block; }
+      :host([loading]) .btn__label { opacity: 0.6; }
+
+      @keyframes arc-btn-spin {
+        to { transform: rotate(360deg); }
+      }
 
       .btn {
         display: inline-flex;
@@ -48,55 +71,26 @@ export class ArcButton extends LitElement {
       :host([size="md"]) .btn { font-size: var(--text-xs); padding: var(--space-sm) var(--space-lg); }
       :host([size="lg"]) .btn { font-size: var(--text-xs); padding: var(--space-md) var(--space-xl); letter-spacing: 3px; }
 
-      /* Primary */
-      :host(:not([variant])) .btn,
-      :host([variant="primary"]) .btn {
+      /* Default → primary */
+      :host(:not([variant])) .btn {
         background: var(--accent-primary);
         color: var(--bg-deep);
         border-color: var(--accent-primary);
       }
-      :host(:not([variant])) .btn:hover,
-      :host([variant="primary"]) .btn:hover { box-shadow: var(--glow-primary); }
+      :host(:not([variant])) .btn:hover { box-shadow: var(--glow-primary); }
+
+      /* :active scale */
       :host(:not([variant])) .btn:active,
       :host([variant="primary"]) .btn:active { transform: scale(0.97); box-shadow: 0 0 8px rgba(var(--accent-primary-rgb),0.5); }
-
-      /* Secondary */
-      :host([variant="secondary"]) .btn {
-        background: transparent;
-        color: var(--text-primary);
-        border-color: var(--border-default);
-      }
-      :host([variant="secondary"]) .btn:hover {
-        border-color: var(--accent-primary);
-        color: var(--accent-primary);
-        box-shadow: 0 0 20px var(--accent-primary-ring);
-      }
       :host([variant="secondary"]) .btn:active {
         transform: scale(0.97);
         background: rgba(var(--accent-primary-rgb),0.05);
       }
-
-      /* Ghost */
-      :host([variant="ghost"]) .btn {
-        background: transparent;
-        color: var(--text-muted);
-        border-color: transparent;
-      }
-      :host([variant="ghost"]) .btn:hover {
-        color: var(--text-primary);
-        background: var(--bg-hover);
-      }
       :host([variant="ghost"]) .btn:active {
         transform: scale(0.97);
         background: var(--bg-elevated);
       }
 
-      /* Focus */
-      .btn:focus-visible { outline: none; box-shadow: var(--focus-glow); }
-
-      /* Disabled */
-      :host([disabled]) .btn { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
-
       /* Prefix / Suffix */
       .btn__prefix,
       .btn__suffix {
@@ -130,6 +124,7 @@ export class ArcButton extends LitElement {
     this.size = 'md';
     this.href = '';
     this.disabled = false;
+    this.loading = false;
     this.type = 'button';
     this._hasPrefix = false;
     this._hasSuffix = false;
@@ -145,10 +140,11 @@ export class ArcButton extends LitElement {
 
   _renderContent() {
     return html`
+      ${this.loading ? html`<span class="btn__spinner" aria-hidden="true"></span>` : ''}
       <span class="btn__prefix ${this._hasPrefix ? '' : 'btn__prefix--empty'}">
         <slot name="prefix" @slotchange=${this._onPrefixSlotChange}></slot>
       </span>
-      <slot></slot>
+      <span class="btn__label"><slot></slot></span>
       <span class="btn__suffix ${this._hasSuffix ? '' : 'btn__suffix--empty'}">
         <slot name="suffix" @slotchange=${this._onSuffixSlotChange}></slot>
       </span>
@@ -159,7 +155,7 @@ export class ArcButton extends LitElement {
     if (this.href) {
       return html`<a class="btn" href=${this.href} part="button">${this._renderContent()}</a>`;
     }
-    return html`<button class="btn" type=${this.type} ?disabled=${this.disabled} part="button">${this._renderContent()}</button>`;
+    return html`<button class="btn" type=${this.type} ?disabled=${this.disabled || this.loading} aria-busy=${this.loading ? 'true' : 'false'} part="button">${this._renderContent()}</button>`;
   }
 }
 

package/src/input/checkbox.js

@@ -8,6 +8,7 @@ export class ArcCheckbox extends LitElement {
     checked:       { type: Boolean, reflect: true },
     indeterminate: { type: Boolean, reflect: true },
     disabled:      { type: Boolean, reflect: true },
+    size:          { type: String, reflect: true },
     label:         { type: String },
     name:          { type: String },
     value:         { type: String },
@@ -77,6 +78,14 @@ export class ArcCheckbox extends LitElement {
         user-select: none;
       }
 
+      /* Sizes */
+      :host([size="sm"]) .checkbox__box { width: 14px; height: 14px; }
+      :host([size="sm"]) .checkbox__icon { width: 10px; height: 10px; }
+      :host([size="sm"]) .checkbox__label { font-size: var(--text-sm); }
+      :host([size="lg"]) .checkbox__box { width: 22px; height: 22px; }
+      :host([size="lg"]) .checkbox__icon { width: 14px; height: 14px; }
+      :host([size="lg"]) .checkbox__label { font-size: var(--text-md); }
+
       .checkbox__box:focus-visible {
         outline: none;
         box-shadow: var(--focus-glow);
@@ -100,6 +109,7 @@ export class ArcCheckbox extends LitElement {
     this.checked = false;
     this.indeterminate = false;
     this.disabled = false;
+    this.size = 'md';
     this.label = '';
     this.name = '';
     this.value = '';