@arclux/arc-ui 1.5.2 → 1.6.0

package/package.json

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

package/src/content/card.js

@@ -29,13 +29,13 @@ export class ArcCard extends LitElement {
       :host([interactive]) .card { cursor: pointer; }
 
       .card__inner {
-        padding: var(--space-xl) var(--space-lg);
+        padding: 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); }
+      :host([padding="sm"]) .card__inner { padding: var(--space-sm); }
+      :host([padding="lg"]) .card__inner { padding: var(--space-xl); }
 
       .card__body {
         flex: 1;

package/src/content/feature-card.js

@@ -8,6 +8,7 @@ export class ArcFeatureCard extends LitElement {
     heading:     { type: String },
     description: { type: String },
     href:        { type: String },
+    action:      { type: String, reflect: true },
   };
 
   static styles = [
@@ -19,7 +20,7 @@ export class ArcFeatureCard extends LitElement {
       .card { height: 100%; }
 
       .card__inner {
-        padding: var(--space-xl) var(--space-lg);
+        padding: var(--space-lg);
         gap: var(--space-md);
         z-index: 1;
       }
@@ -63,6 +64,35 @@ export class ArcFeatureCard extends LitElement {
         margin: 0;
       }
 
+      .card__action {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        font-weight: 600;
+        letter-spacing: 1.5px;
+        text-transform: uppercase;
+        color: var(--text-ghost);
+        transition: color var(--transition-fast), gap var(--transition-fast);
+      }
+
+      .card:hover .card__action {
+        color: var(--accent-primary);
+        gap: 10px;
+      }
+
+      .card__action-arrow {
+        display: inline-block;
+        width: 14px;
+        height: 14px;
+        transition: transform var(--transition-fast);
+      }
+
+      .card:hover .card__action-arrow {
+        transform: translateX(2px);
+      }
+
       .card__rule {
         width: 32px;
         height: 1px;
@@ -74,7 +104,7 @@ export class ArcFeatureCard extends LitElement {
       .card:hover .card__rule { opacity: 0.5; width: 48px; }
 
       @media (max-width: 768px) {
-        .card__inner { padding: var(--space-lg) var(--space-md); }
+        .card__inner { padding: var(--space-md); }
       }
 
       @media (prefers-reduced-motion: reduce) {
@@ -95,6 +125,7 @@ export class ArcFeatureCard extends LitElement {
     this.heading = '';
     this.description = '';
     this.href = '';
+    this.action = '';
   }
 
   render() {
@@ -103,6 +134,14 @@ export class ArcFeatureCard extends LitElement {
         <div class="card__icon" part="icon"><slot name="icon">${this.icon}</slot></div>
         <h3 class="card__title" part="title">${this.heading}</h3>
         <p class="card__desc" part="description">${this.description}</p>
+        ${this.action && this.href ? html`
+          <span class="card__action" part="action">
+            ${this.action}
+            <svg class="card__action-arrow" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+              <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </span>
+        ` : ''}
         <span class="card__rule"></span>
       </div>
     `;

package/src/input/file-upload.js

@@ -24,7 +24,7 @@ export class ArcFileUpload extends LitElement {
         align-items: center;
         justify-content: center;
         gap: var(--space-sm);
-        padding: var(--space-xl) var(--space-lg);
+        padding: var(--space-lg);
         border: 2px dashed var(--border-default);
         border-radius: var(--radius-lg);
         background: var(--bg-surface);