@arclux/arc-ui 1.1.0 → 1.3.0

package/package.json

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

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 },
+    color:   { type: String },
   };
 
   static styles = [
@@ -15,11 +16,11 @@ export class ArcBadge extends LitElement {
         display: inline-flex;
         align-items: center;
         gap: var(--space-xs);
-        font-family: var(--font-accent);
-        font-weight: 600;
+        font-family: var(--font-mono);
+        font-weight: 500;
         font-size: var(--text-xs);
-        letter-spacing: 2px;
-        text-transform: uppercase;
+        letter-spacing: normal;
+        text-transform: none;
         color: var(--text-muted);
         padding: var(--space-xs) var(--space-sm);
         border: 1px solid var(--border-default);
@@ -88,10 +89,18 @@ export class ArcBadge extends LitElement {
   constructor() {
     super();
     this.variant = 'default';
+    this.color = '';
   }
 
   render() {
-    return html`<span class="badge" part="badge"><slot></slot></span>`;
+    const colorStyle = this.color
+      ? `border-color: rgba(${this.color}, 0.2); color: rgb(${this.color}); background: rgba(${this.color}, 0.06);`
+      : '';
+
+    return html`<span class="badge" part="badge" style=${colorStyle}
+      @mouseenter=${this.color ? (e) => { e.currentTarget.style.boxShadow = `0 0 12px rgba(${this.color}, 0.15)`; } : null}
+      @mouseleave=${this.color ? (e) => { e.currentTarget.style.boxShadow = ''; } : null}
+    ><slot></slot></span>`;
   }
 }
 

package/src/content/tag.js

@@ -6,6 +6,7 @@ export class ArcTag extends LitElement {
     variant:   { type: String, reflect: true },
     removable: { type: Boolean, reflect: true },
     disabled:  { type: Boolean, reflect: true },
+    color:     { type: String },
   };
 
   static styles = [
@@ -24,13 +25,12 @@ export class ArcTag extends LitElement {
         letter-spacing: 2px;
         text-transform: uppercase;
         color: var(--text-muted);
-        padding: var(--space-xs) calc(var(--space-sm) + var(--space-xs));
+        padding: var(--space-sm) calc(var(--space-sm) + var(--space-xs));
         border: 1px solid var(--border-default);
         border-radius: var(--radius-full);
         background: var(--bg-hover);
         transition: box-shadow var(--transition-base), border-color var(--transition-base);
         line-height: 1.4;
-        min-height: var(--touch-min);
       }
 
       :host([variant="primary"]) .tag {
@@ -120,6 +120,7 @@ export class ArcTag extends LitElement {
     this.variant = 'default';
     this.removable = false;
     this.disabled = false;
+    this.color = '';
   }
 
   _remove(e) {
@@ -132,8 +133,15 @@ export class ArcTag extends LitElement {
   }
 
   render() {
+    const colorStyle = this.color
+      ? `border-color: rgba(${this.color}, 0.2); color: rgb(${this.color}); background: rgba(${this.color}, 0.06);`
+      : '';
+
     return html`
-      <span class="tag" part="tag">
+      <span class="tag" part="tag" style=${colorStyle}
+        @mouseenter=${this.color ? (e) => { e.currentTarget.style.boxShadow = `0 0 12px rgba(${this.color}, 0.15)`; } : null}
+        @mouseleave=${this.color ? (e) => { e.currentTarget.style.boxShadow = ''; } : null}
+      >
         <span class="tag__label" part="label"><slot></slot></span>
         ${this.removable ? html`
           <button

package/src/input/button.js

@@ -3,11 +3,13 @@ import { tokenStyles } from '../shared-styles.js';
 
 export class ArcButton extends LitElement {
   static properties = {
-    variant:  { type: String, reflect: true },
-    size:     { type: String, reflect: true },
-    href:     { type: String },
-    disabled: { type: Boolean, reflect: true },
-    type:     { type: String },
+    variant:    { type: String, reflect: true },
+    size:       { type: String, reflect: true },
+    href:       { type: String },
+    disabled:   { type: Boolean, reflect: true },
+    type:       { type: String },
+    _hasPrefix: { state: true },
+    _hasSuffix: { state: true },
   };
 
   static styles = [
@@ -95,6 +97,21 @@ export class ArcButton extends LitElement {
       /* Disabled */
       :host([disabled]) .btn { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
 
+      /* Prefix / Suffix */
+      .btn__prefix,
+      .btn__suffix {
+        display: inline-flex;
+        align-items: center;
+      }
+
+      .btn__prefix--empty,
+      .btn__suffix--empty { display: none; }
+
+      ::slotted([slot="prefix"]),
+      ::slotted([slot="suffix"]) {
+        display: flex;
+      }
+
       @media (prefers-reduced-motion: reduce) {
         :host *,
         :host *::before,
@@ -114,13 +131,35 @@ export class ArcButton extends LitElement {
     this.href = '';
     this.disabled = false;
     this.type = 'button';
+    this._hasPrefix = false;
+    this._hasSuffix = false;
+  }
+
+  _onPrefixSlotChange(e) {
+    this._hasPrefix = e.target.assignedNodes({ flatten: true }).length > 0;
+  }
+
+  _onSuffixSlotChange(e) {
+    this._hasSuffix = e.target.assignedNodes({ flatten: true }).length > 0;
+  }
+
+  _renderContent() {
+    return html`
+      <span class="btn__prefix ${this._hasPrefix ? '' : 'btn__prefix--empty'}">
+        <slot name="prefix" @slotchange=${this._onPrefixSlotChange}></slot>
+      </span>
+      <slot></slot>
+      <span class="btn__suffix ${this._hasSuffix ? '' : 'btn__suffix--empty'}">
+        <slot name="suffix" @slotchange=${this._onSuffixSlotChange}></slot>
+      </span>
+    `;
   }
 
   render() {
     if (this.href) {
-      return html`<a class="btn" href=${this.href} part="button"><slot></slot></a>`;
+      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"><slot></slot></button>`;
+    return html`<button class="btn" type=${this.type} ?disabled=${this.disabled} part="button">${this._renderContent()}</button>`;
   }
 }
 

package/src/input/input.js

@@ -16,6 +16,8 @@ export class ArcInput extends LitElement {
     required:    { type: Boolean },
     multiline:   { type: Boolean },
     rows:        { type: Number },
+    _hasPrefix:  { state: true },
+    _hasSuffix:  { state: true },
   };
 
   static styles = [
@@ -38,15 +40,12 @@ export class ArcInput extends LitElement {
         color: var(--text-muted);
       }
 
-      .input-group__field {
-        font-family: var(--font-body);
-        font-size: var(--body-size);
-        font-weight: 300;
-        color: var(--text-primary);
+      .input-group__wrapper {
+        display: flex;
+        align-items: center;
         background: var(--bg-surface);
         border: 1px solid var(--border-default);
         border-radius: var(--radius-md);
-        padding: var(--space-sm) var(--space-md);
         transition:
           border-color var(--transition-fast),
           box-shadow var(--transition-fast),
@@ -55,17 +54,53 @@ export class ArcInput extends LitElement {
         width: 100%;
       }
 
-      textarea.input-group__field { resize: vertical; }
-
-      .input-group__field::placeholder { color: var(--text-ghost); }
-      .input-group__field:hover:not(:focus) { border-color: var(--border-bright); }
-      .input-group__field:focus {
-        outline: none;
+      .input-group__wrapper:hover:not(:focus-within) { border-color: var(--border-bright); }
+      .input-group__wrapper:focus-within {
         border-color: rgba(var(--accent-primary-rgb), 0.4);
         box-shadow: var(--focus-glow);
         background: var(--bg-card);
       }
-      .input-group__field:disabled { opacity: 0.4; cursor: not-allowed; }
+
+      :host([disabled]) .input-group__wrapper { opacity: 0.4; cursor: not-allowed; }
+
+      .input-group__field {
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+        font-weight: 300;
+        color: var(--text-primary);
+        background: transparent;
+        border: none;
+        padding: var(--space-sm) var(--space-md);
+        box-sizing: border-box;
+        width: 100%;
+        min-width: 0;
+      }
+
+      .input-group__field:focus { outline: none; }
+      .input-group__field::placeholder { color: var(--text-ghost); }
+      .input-group__field:disabled { cursor: not-allowed; }
+
+      textarea.input-group__field { resize: vertical; }
+
+      .input-group__prefix,
+      .input-group__suffix {
+        display: flex;
+        align-items: center;
+        color: var(--text-muted);
+        flex-shrink: 0;
+      }
+
+      .input-group__prefix { padding-left: var(--space-md); }
+      .input-group__suffix { padding-right: var(--space-md); }
+
+      .input-group__prefix--empty,
+      .input-group__suffix--empty { display: none; }
+
+      ::slotted([slot="prefix"]),
+      ::slotted([slot="suffix"]) {
+        width: 20px;
+        height: 20px;
+      }
 
       @media (prefers-reduced-motion: reduce) {
         :host *,
@@ -92,6 +127,8 @@ export class ArcInput extends LitElement {
     this.multiline = false;
     this.rows = 5;
     this._fieldId = `arc-input-${++inputIdCounter}`;
+    this._hasPrefix = false;
+    this._hasSuffix = false;
   }
 
   updated(changed) {
@@ -112,6 +149,14 @@ export class ArcInput extends LitElement {
     this.dispatchEvent(new CustomEvent('arc-change', { detail: { value: this.value }, bubbles: true, composed: true }));
   }
 
+  _onPrefixSlotChange(e) {
+    this._hasPrefix = e.target.assignedNodes({ flatten: true }).length > 0;
+  }
+
+  _onSuffixSlotChange(e) {
+    this._hasSuffix = e.target.assignedNodes({ flatten: true }).length > 0;
+  }
+
   render() {
     const id = this.name || this._fieldId;
     const field = this.multiline
@@ -149,7 +194,15 @@ export class ArcInput extends LitElement {
     return html`
       <div class="input-group">
         ${this.label ? html`<label class="input-group__label" for=${id} part="label">${this.label}</label>` : ''}
-        ${field}
+        <div class="input-group__wrapper" part="wrapper">
+          <div class="input-group__prefix ${this._hasPrefix ? '' : 'input-group__prefix--empty'}" part="prefix">
+            <slot name="prefix" @slotchange=${this._onPrefixSlotChange}></slot>
+          </div>
+          ${field}
+          <div class="input-group__suffix ${this._hasSuffix ? '' : 'input-group__suffix--empty'}" part="suffix">
+            <slot name="suffix" @slotchange=${this._onSuffixSlotChange}></slot>
+          </div>
+        </div>
       </div>
     `;
   }

package/src/input/toggle.js

@@ -81,11 +81,11 @@ export class ArcToggle extends LitElement {
       }
 
       .toggle__label {
-        font-family: var(--font-accent);
-        font-size: var(--text-xs);
-        font-weight: 600;
-        letter-spacing: 1px;
-        text-transform: uppercase;
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+        font-weight: 400;
+        letter-spacing: normal;
+        text-transform: none;
         color: var(--text-muted);
         user-select: none;
       }