@arclux/arc-ui 1.3.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arclux/arc-ui",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "ARC UI — Lit Web Components implementing the Arclight design system.",
   "type": "module",
   "main": "src/index.js",
@@ -149,6 +149,7 @@
     "./menu-item": "./src/shared/menu-item.js",
     "./menu-divider": "./src/shared/menu-divider.js",
     "./tokens": "./src/tokens.js",
+    "./tokens.css": "./src/tokens.css",
     "./icons/phosphor": "./src/icons/phosphor.js",
     "./icons/lucide": "./src/icons/lucide.js",
     "./icons/types": "./src/icons/types.d.ts"

package/src/button-styles.js

@@ -0,0 +1,50 @@
+import { css } from 'lit';
+
+/**
+ * Shared button variant styles for primary / secondary / ghost.
+ *
+ * Each consuming component still defines:
+ * - Its own default variant (Button → primary, IconButton → ghost)
+ * - Its own :active transform scale
+ * - Sizes, layout, and component-specific rules
+ */
+export const buttonVariantStyles = css`
+  /* ── Primary ── */
+  :host([variant="primary"]) .btn {
+    background: var(--accent-primary);
+    color: var(--bg-deep);
+    border-color: var(--accent-primary);
+  }
+  :host([variant="primary"]) .btn:hover {
+    box-shadow: var(--glow-primary);
+  }
+
+  /* ── 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);
+  }
+
+  /* ── 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);
+  }
+
+  /* ── Focus ── */
+  .btn:focus-visible { outline: none; box-shadow: var(--focus-glow); }
+
+  /* ── Disabled ── */
+  :host([disabled]) .btn { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
+`;

package/src/card-styles.js

@@ -0,0 +1,42 @@
+import { css } from 'lit';
+
+/**
+ * Shared card shell + hover styles for Card / FeatureCard.
+ *
+ * Provides the 1px-padding border trick, hover gradient border,
+ * inner box-shadow glow, and focus ring. Each consumer keeps its
+ * own inner layout, content, and responsive overrides.
+ */
+export const cardHoverStyles = css`
+  .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;
+  }
+
+  .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);
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    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); }
+`;

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

@@ -1,14 +1,18 @@
 import { LitElement, html, css } from 'lit';
 import { tokenStyles } from '../shared-styles.js';
+import { statusVars } from '../status-styles.js';
 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 = [
     tokenStyles,
+    statusVars,
     css`
       :host { display: block; }
 
@@ -18,8 +22,8 @@ export class ArcCallout extends LitElement {
         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);
+        border: 1px solid rgba(var(--_status-rgb), 0.12);
+        background: rgba(var(--_status-rgb), 0.04);
         font-family: var(--font-body);
         font-size: var(--text-sm);
         line-height: 1.7;
@@ -36,6 +40,7 @@ export class ArcCallout extends LitElement {
         flex-shrink: 0;
         display: flex;
         align-items: center;
+        color: var(--_status-color);
       }
 
       .callout__label {
@@ -44,43 +49,42 @@ export class ArcCallout extends LitElement {
         font-weight: 600;
         letter-spacing: 1.5px;
         text-transform: uppercase;
+        color: var(--_status-color);
       }
 
       .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);
+      .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;
       }
-      :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);
+      .callout__dismiss:hover {
+        opacity: 1;
+        background: rgba(var(--_status-rgb), 0.08);
       }
-      :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);
+      .callout__dismiss:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-glow);
       }
-      :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(.dismissed) {
+        display: none;
       }
-      :host([variant="danger"]) .callout__icon { color: var(--color-error); }
-      :host([variant="danger"]) .callout__label { color: var(--color-error); }
 
       @media (prefers-reduced-motion: reduce) {
         :host *,
@@ -97,6 +101,8 @@ export class ArcCallout extends LitElement {
   constructor() {
     super();
     this.variant = 'info';
+    this.dismissible = false;
+    this._dismissed = false;
   }
 
   /** @private */
@@ -121,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">
@@ -129,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

@@ -1,50 +1,41 @@
 import { LitElement, html, css } from 'lit';
 import { tokenStyles } from '../shared-styles.js';
+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 = [
     tokenStyles,
+    cardHoverStyles,
     css`
       :host { display: block; }
 
-      .card {
-        position: relative;
-        border-radius: var(--radius-lg);
-        padding: 1px;
+      .card { height: 100%; }
+
+      /* Suppress hover effect when no href and not interactive */
+      :host(:not([href]):not([interactive])) .card:hover {
         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));
+      :host(:not([href]):not([interactive])) .card:hover .card__inner {
+        box-shadow: none;
       }
 
+      :host([interactive]) .card { cursor: pointer; }
+
       .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;
-        display: flex;
-        flex-direction: column;
-        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); }
+      /* 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;
@@ -77,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/feature-card.js

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from 'lit';
 import { tokenStyles } from '../shared-styles.js';
+import { cardHoverStyles } from '../card-styles.js';
 
 export class ArcFeatureCard extends LitElement {
   static properties = {
@@ -11,42 +12,18 @@ export class ArcFeatureCard extends LitElement {
 
   static styles = [
     tokenStyles,
+    cardHoverStyles,
     css`
       :host { display: block; height: 100%; }
 
-      .card {
-        position: relative;
-        border-radius: var(--radius-lg);
-        height: 100%;
-        padding: 1px;
-        background: var(--border-subtle);
-        transition: background var(--transition-slow);
-        text-decoration: none;
-        display: flex;
-        flex-direction: column;
-      }
-
-      .card:hover {
-        background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.3), rgba(var(--accent-secondary-rgb),0.15), var(--border-default));
-      }
+      .card { height: 100%; }
 
       .card__inner {
-        position: relative;
-        background: var(--bg-card);
-        border-radius: calc(var(--radius-lg) - 1px);
         padding: var(--space-xl) var(--space-lg);
-        display: flex;
-        flex-direction: column;
         gap: var(--space-md);
-        flex: 1;
-        transition: box-shadow var(--transition-slow);
         z-index: 1;
       }
 
-      .card:hover .card__inner {
-        box-shadow: inset 0 1px 0 var(--bg-hover), var(--glow-card-hover);
-      }
-
       .card__icon {
         width: 44px;
         height: 44px;
@@ -96,8 +73,6 @@ export class ArcFeatureCard extends LitElement {
 
       .card:hover .card__rule { opacity: 0.5; width: 48px; }
 
-      .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); }
       }

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>
     `;
   }
 }