@arclux/arc-ui 1.0.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arclux/arc-ui",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "ARC UI — Lit Web Components implementing the Arclight design system.",
   "type": "module",
   "main": "src/index.js",
@@ -157,7 +157,7 @@
     "src/",
     "types/"
   ],
-  "sideEffects": false,
+  "sideEffects": true,
   "dependencies": {
     "lit": "^3.3.0"
   },

package/src/content/card.js

@@ -4,6 +4,7 @@ import { tokenStyles } from '../shared-styles.js';
 export class ArcCard extends LitElement {
   static properties = {
     href: { type: String },
+    _hasFooter: { state: true },
   };
 
   static styles = [
@@ -34,6 +35,8 @@ export class ArcCard extends LitElement {
         padding: var(--space-xl) var(--space-lg);
         flex: 1;
         min-height: 0;
+        display: flex;
+        flex-direction: column;
         transition: box-shadow var(--transition-slow);
       }
 
@@ -43,6 +46,18 @@ export class ArcCard extends LitElement {
 
       .card:focus-visible { outline: none; box-shadow: var(--focus-glow); border-radius: var(--radius-lg); }
 
+      .card__body {
+        flex: 1;
+      }
+
+      .card__footer {
+        margin-top: var(--space-md);
+      }
+
+      .card__footer--empty {
+        display: none;
+      }
+
       @media (max-width: 768px) {
         .card__inner { padding: var(--space-lg) var(--space-md); }
       }
@@ -62,13 +77,25 @@ export class ArcCard extends LitElement {
   constructor() {
     super();
     this.href = '';
+    this._hasFooter = false;
+  }
+
+  _onFooterSlotChange(e) {
+    this._hasFooter = e.target.assignedNodes({ flatten: true }).length > 0;
   }
 
   render() {
+    const content = html`
+      <div class="card__body" part="body"><slot></slot></div>
+      <div class="card__footer ${this._hasFooter ? '' : 'card__footer--empty'}" part="footer">
+        <slot name="footer" @slotchange=${this._onFooterSlotChange}></slot>
+      </div>
+    `;
+
     if (this.href) {
-      return html`<a class="card" href=${this.href} part="card"><div class="card__inner" part="inner"><slot></slot></div></a>`;
+      return html`<a class="card" href=${this.href} part="card"><div class="card__inner" part="inner">${content}</div></a>`;
     }
-    return html`<div class="card" part="card"><div class="card__inner" part="inner"><slot></slot></div></div>`;
+    return html`<div class="card" part="card"><div class="card__inner" part="inner">${content}</div></div>`;
   }
 }
 

package/src/content/cta-banner.js

@@ -0,0 +1,126 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+/**
+ * @arc-prism content — call-to-action banner with gradient background
+ */
+export class ArcCtaBanner extends LitElement {
+  static properties = {
+    eyebrow:    { type: String },
+    headline:   { type: String },
+    nogradient: { type: Boolean, reflect: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; position: relative; overflow: hidden; }
+
+      .cta {
+        position: relative;
+        padding: var(--space-3xl) var(--space-lg);
+      }
+
+      .cta__bg {
+        position: absolute;
+        inset: 0;
+        background:
+          radial-gradient(ellipse at 30% 50%, rgba(var(--accent-primary-rgb), 0.1), transparent 60%),
+          radial-gradient(ellipse at 70% 50%, rgba(var(--accent-secondary-rgb), 0.08), transparent 60%);
+        pointer-events: none;
+      }
+
+      :host([nogradient]) .cta__bg { display: none; }
+
+      .cta__inner {
+        position: relative;
+        max-width: var(--max-width, 1200px);
+        margin-inline: auto;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        gap: var(--space-md);
+      }
+
+      .cta__eyebrow {
+        font-family: var(--font-accent);
+        font-weight: 600;
+        font-size: var(--text-xs);
+        letter-spacing: 4px;
+        text-transform: uppercase;
+        background: var(--gradient-accent-text);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+      }
+
+      .cta__headline {
+        font-size: clamp(28px, 4vw, 40px);
+        font-weight: 500;
+        letter-spacing: -1px;
+        background: var(--gradient-display-text);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        margin: 0;
+      }
+
+      .cta__body {
+        color: var(--text-secondary);
+        font-size: var(--text-md);
+        max-width: 480px;
+        text-wrap: balance;
+        line-height: 1.7;
+      }
+
+      .cta__body ::slotted(*) { margin: 0; }
+
+      .cta__actions {
+        display: flex;
+        gap: var(--space-md);
+        margin-top: var(--space-sm);
+      }
+
+      @media (max-width: 768px) {
+        .cta { padding: var(--space-xl) var(--space-md); }
+        .cta__actions { flex-direction: column; align-items: center; }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.eyebrow = '';
+    this.headline = '';
+    this.nogradient = false;
+  }
+
+  render() {
+    return html`
+      <div class="cta" part="container">
+        <div class="cta__bg" part="background"></div>
+        <div class="cta__inner" part="inner">
+          ${this.eyebrow ? html`
+            <span class="cta__eyebrow" part="eyebrow">
+              <slot name="eyebrow">${this.eyebrow}</slot>
+            </span>
+          ` : html`<slot name="eyebrow"></slot>`}
+          ${this.headline ? html`
+            <h2 class="cta__headline" part="headline">
+              <slot name="headline">${this.headline}</slot>
+            </h2>
+          ` : html`<slot name="headline"></slot>`}
+          <div class="cta__body" part="body">
+            <slot></slot>
+          </div>
+          <div class="cta__actions" part="actions">
+            <slot name="actions"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-cta-banner', ArcCtaBanner);

package/src/content/index.js

@@ -15,6 +15,7 @@ export { ArcCodeBlock } from './code-block.js';
 export { ArcCollapsible } from './collapsible.js';
 export { ArcColorSwatch } from './color-swatch.js';
 export { ArcColumn } from './column.js';
+export { ArcCtaBanner } from './cta-banner.js';
 export { ArcDataTable } from './data-table.js';
 export { ArcDivider } from './divider.js';
 export { ArcEmptyState } from './empty-state.js';

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 = [
@@ -120,6 +121,7 @@ export class ArcTag extends LitElement {
     this.variant = 'default';
     this.removable = false;
     this.disabled = false;
+    this.color = '';
   }
 
   _remove(e) {
@@ -132,8 +134,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/index.js

@@ -1,7 +1,7 @@
 // ARC UI — Web Components
 // Re-exports from all tiers
 
-export { ArcAccordion, ArcAccordionItem, ArcAnimatedNumber, ArcAspectRatio, ArcAvatar, ArcAvatarGroup, ArcBadge, ArcCallout, ArcCard, ArcCarousel, ArcCodeBlock, ArcCollapsible, ArcColorSwatch, ArcColumn, ArcDataTable, ArcDivider, ArcEmptyState, ArcFeatureCard, ArcHighlight, ArcIcon, ArcIconLibrary, iconRegistry, ArcInfiniteScroll, ArcKbd, ArcMarkdown, ArcMarquee, ArcMeter, ArcScrollArea, ArcSkeleton, ArcSpinner, ArcStack, ArcStat, ArcStep, ArcStepper, ArcTable, ArcTag, ArcText, ArcTimeline, ArcTimelineItem, ArcTruncate, ArcValueCard } from './content/index.js';
+export { ArcAccordion, ArcAccordionItem, ArcAnimatedNumber, ArcAspectRatio, ArcAvatar, ArcAvatarGroup, ArcBadge, ArcCallout, ArcCard, ArcCarousel, ArcCodeBlock, ArcCollapsible, ArcColorSwatch, ArcColumn, ArcDataTable, ArcDivider, ArcEmptyState, ArcFeatureCard, ArcHighlight, ArcIcon, ArcIconLibrary, iconRegistry, ArcInfiniteScroll, ArcKbd, ArcMarkdown, ArcMarquee, ArcMeter, ArcScrollArea, ArcSkeleton, ArcSpinner, ArcStack, ArcStat, ArcStep, ArcStepper, ArcTable, ArcTag, ArcText, ArcTimeline, ArcTimelineItem, ArcTruncate, ArcValueCard , ArcCtaBanner } from './content/index.js';
 export { ArcButton, ArcCalendar, ArcCheckbox, ArcChip, ArcColorPicker, ArcCombobox, ArcCopyButton, ArcDatePicker, ArcFileUpload, ArcForm, ArcIconButton, ArcInput, ArcMultiSelect, ArcNumberInput, ArcOtpInput, ArcPinInput, ArcRadio, ArcRadioGroup, ArcRating, ArcSearch, ArcSegmentedControl, ArcSelect, ArcSlider, ArcSortableList, ArcSuggestion, ArcTextarea, ArcThemeToggle, ArcToggle } from './input/index.js';
 export { ArcAlert, ArcCommandItem, ArcCommandPalette, ArcContextMenu, ArcDialog, ArcDropdownMenu, ArcHoverCard, ArcModal, ArcNotificationPanel, ArcPopover, ArcProgress, ArcSheet, ArcToast, ArcTooltip } from './feedback/index.js';
 export { ArcBreadcrumb, ArcBreadcrumbItem, ArcDrawer, ArcFooter, ArcLink, ArcNavItem, ArcNavigationMenu, ArcPagination, ArcScrollSpy, ArcScrollToTop, ArcSidebar, ArcSidebarLink, ArcSidebarSection, ArcSpyLink, ArcTab, ArcTabs, ArcTopBar, ArcTreeItem, ArcTreeView } from './navigation/index.js';

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/form.js

@@ -1,11 +1,15 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css, nothing } from 'lit';
 import { tokenStyles } from '../shared-styles.js';
 
 export class ArcForm extends LitElement {
   static properties = {
-    action:     { type: String },
-    method:     { type: String },
-    novalidate: { type: Boolean },
+    action:       { type: String },
+    method:       { type: String },
+    novalidate:   { type: Boolean },
+    loading:      { type: Boolean, reflect: true },
+    disabled:     { type: Boolean, reflect: true },
+    errorSummary: { type: Boolean, attribute: 'error-summary' },
+    _errors:      { state: true },
   };
 
   static styles = [
@@ -26,6 +30,45 @@ export class ArcForm extends LitElement {
       ::slotted(*) {
         margin: 0;
       }
+
+      /* Loading state */
+      :host([loading]) .form-layout {
+        pointer-events: none;
+        opacity: 0.7;
+      }
+
+      /* Disabled state */
+      :host([disabled]) .form-layout {
+        pointer-events: none;
+        opacity: 0.5;
+      }
+
+      /* Error summary */
+      .form-errors {
+        border: 1px solid var(--color-error, #ef4444);
+        border-radius: var(--radius-md);
+        background: rgba(239, 68, 68, 0.06);
+        padding: var(--space-sm) var(--space-md);
+        margin-bottom: var(--space-sm);
+      }
+
+      .form-errors__title {
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        font-weight: 600;
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        color: var(--color-error, #ef4444);
+        margin: 0 0 var(--space-xs) 0;
+      }
+
+      .form-errors__list {
+        margin: 0;
+        padding: 0 0 0 var(--space-md);
+        font-size: var(--text-sm);
+        color: var(--color-error, #ef4444);
+        line-height: 1.6;
+      }
     `,
   ];
 
@@ -34,15 +77,18 @@ export class ArcForm extends LitElement {
     this.action = '';
     this.method = '';
     this.novalidate = false;
+    this.loading = false;
+    this.disabled = false;
+    this.errorSummary = true;
+    this._errors = [];
   }
 
-  _collectValues() {
+  /** Gather all form controls and propagate disabled */
+  _getFormControls() {
     const slot = this.shadowRoot.querySelector('slot');
     const children = slot ? slot.assignedElements({ flatten: true }) : [];
-    const values = {};
-    const errors = [];
+    const controls = [];
 
-    const formControls = [];
     const gather = (elements) => {
       for (const el of elements) {
         const tag = el.tagName?.toLowerCase();
@@ -54,7 +100,7 @@ export class ArcForm extends LitElement {
           tag === 'arc-toggle' ||
           tag === 'arc-radio-group'
         ) {
-          formControls.push(el);
+          controls.push(el);
         }
         if (!el.shadowRoot && el.children?.length) {
           gather([...el.children]);
@@ -63,15 +109,42 @@ export class ArcForm extends LitElement {
     };
 
     gather(children);
+    return controls;
+  }
+
+  updated(changed) {
+    super.updated(changed);
+
+    if (changed.has('disabled')) {
+      const controls = this._getFormControls();
+      for (const control of controls) {
+        if (this.disabled) {
+          control.setAttribute('disabled', '');
+        } else {
+          control.removeAttribute('disabled');
+        }
+      }
+    }
+  }
+
+  _collectValues() {
+    const controls = this._getFormControls();
+    const values = {};
+    const formData = new FormData();
+    const errors = [];
 
-    for (const control of formControls) {
+    for (const control of controls) {
       const name = control.getAttribute('name') || control.label || control.tagName.toLowerCase();
       const tag = control.tagName.toLowerCase();
 
       if (tag === 'arc-checkbox' || tag === 'arc-toggle') {
         values[name] = control.checked ?? false;
+        if (control.checked) {
+          formData.append(name, 'on');
+        }
       } else {
         values[name] = control.value ?? '';
+        formData.append(name, control.value ?? '');
       }
 
       const required = control.hasAttribute('required');
@@ -93,14 +166,20 @@ export class ArcForm extends LitElement {
       }
     }
 
-    return { values, errors, valid: errors.length === 0 };
+    return { values, formData, errors, valid: errors.length === 0 };
   }
 
   _handleSubmit(e) {
-    const { values, errors, valid } = this._collectValues();
+    if (this.loading) {
+      e.preventDefault();
+      return;
+    }
+
+    const { values, formData, errors, valid } = this._collectValues();
 
     if (!valid && !this.novalidate) {
       e.preventDefault();
+      this._errors = errors;
       this.dispatchEvent(new CustomEvent('arc-invalid', {
         detail: { errors },
         bubbles: true,
@@ -109,10 +188,12 @@ export class ArcForm extends LitElement {
       return;
     }
 
+    this._errors = [];
+
     // Native form submission — let the browser handle it
     if (this.action) {
       this.dispatchEvent(new CustomEvent('arc-submit', {
-        detail: { values, valid },
+        detail: { values, formData, valid },
         bubbles: true,
         composed: true,
       }));
@@ -123,7 +204,7 @@ export class ArcForm extends LitElement {
     // JS-only mode — prevent default and let the listener handle it
     e.preventDefault();
     this.dispatchEvent(new CustomEvent('arc-submit', {
-      detail: { values, valid },
+      detail: { values, formData, valid },
       bubbles: true,
       composed: true,
     }));
@@ -136,27 +217,26 @@ export class ArcForm extends LitElement {
 
   /** Reset error states on child controls */
   reset() {
-    const slot = this.shadowRoot.querySelector('slot');
-    const children = slot ? slot.assignedElements({ flatten: true }) : [];
+    const controls = this._getFormControls();
 
-    const clearErrors = (elements) => {
-      for (const el of elements) {
-        if (typeof el.error !== 'undefined') {
-          el.error = '';
-        }
-        if (typeof el.value === 'string') {
-          el.value = '';
-        }
-        if (typeof el.checked === 'boolean') {
-          el.checked = false;
-        }
-        if (!el.shadowRoot && el.children?.length) {
-          clearErrors([...el.children]);
-        }
+    for (const control of controls) {
+      if (typeof control.error !== 'undefined') {
+        control.error = '';
       }
-    };
+      if (typeof control.value === 'string') {
+        control.value = '';
+      }
+      if (typeof control.checked === 'boolean') {
+        control.checked = false;
+      }
+    }
+
+    this._errors = [];
 
-    clearErrors(children);
+    this.dispatchEvent(new CustomEvent('arc-reset', {
+      bubbles: true,
+      composed: true,
+    }));
   }
 
   render() {
@@ -169,6 +249,14 @@ export class ArcForm extends LitElement {
         @submit=${this._handleSubmit}
       >
         <div class="form-layout" part="layout">
+          ${this.errorSummary && this._errors.length > 0 ? html`
+            <div class="form-errors" role="alert" part="errors">
+              <p class="form-errors__title">Please fix the following errors</p>
+              <ul class="form-errors__list">
+                ${this._errors.map(err => html`<li>${err.message}</li>`)}
+              </ul>
+            </div>
+          ` : nothing}
           <slot></slot>
         </div>
       </form>

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/layout/page-header.js

@@ -5,6 +5,7 @@ export class ArcPageHeader extends LitElement {
   static properties = {
     heading: { type: String },
     description: { type: String },
+    border: { type: Boolean, reflect: true },
   };
 
   static styles = [
@@ -17,10 +18,13 @@ export class ArcPageHeader extends LitElement {
 
       .page-header {
         padding: var(--space-lg) 0 var(--space-md);
+      }
+
+      :host([border]) .page-header {
         border-bottom: 1px solid var(--border-subtle);
       }
 
-      .page-header__breadcrumb {
+      .page-header__above {
         margin-bottom: var(--space-sm);
       }
 
@@ -35,13 +39,13 @@ export class ArcPageHeader extends LitElement {
       .page-header__heading {
         margin: 0;
         font-family: var(--font-body);
-        font-size: 28px; /* size-variant, keep hardcoded */
+        font-size: 28px;
         font-weight: 700;
         color: var(--text-primary);
         line-height: 1.2;
       }
 
-      .page-header__actions {
+      .page-header__aside {
         display: flex;
         align-items: center;
         gap: var(--space-sm);
@@ -55,7 +59,7 @@ export class ArcPageHeader extends LitElement {
         line-height: 1.5;
       }
 
-      .page-header__tabs {
+      .page-header__below {
         margin-top: var(--space-md);
       }
 
@@ -69,25 +73,26 @@ export class ArcPageHeader extends LitElement {
     super();
     this.heading = '';
     this.description = '';
+    this.border = false;
   }
 
   render() {
     return html`
       <div class="page-header" part="base">
-        <div class="page-header__breadcrumb" part="breadcrumb">
-          <slot name="breadcrumb"></slot>
+        <div class="page-header__above" part="above">
+          <slot name="above"></slot>
         </div>
         <div class="page-header__title-row" part="title-row">
           <h1 class="page-header__heading" part="heading">${this.heading}</h1>
-          <div class="page-header__actions" part="actions">
-            <slot name="actions"></slot>
+          <div class="page-header__aside" part="aside">
+            <slot name="aside"></slot>
           </div>
         </div>
         ${this.description
           ? html`<p class="page-header__description" part="description">${this.description}</p>`
           : ''}
-        <div class="page-header__tabs" part="tabs">
-          <slot name="tabs"></slot>
+        <div class="page-header__below" part="below">
+          <slot name="below"></slot>
         </div>
         <div class="page-header__content" part="content">
           <slot></slot>

package/src/navigation/nav-item.js

@@ -7,6 +7,7 @@ export class ArcNavItem extends LitElement {
   static properties = {
     href:        { type: String, reflect: true },
     active:      { type: Boolean, reflect: true },
+    muted:       { type: Boolean, reflect: true },
     description: { type: String },
   };
 
@@ -18,6 +19,7 @@ export class ArcNavItem extends LitElement {
     super();
     this.href = '';
     this.active = false;
+    this.muted = false;
     this.description = '';
   }
 

package/src/navigation/navigation-menu.js

@@ -71,6 +71,18 @@ export class ArcNavigationMenu extends LitElement {
         box-shadow: inset 0 0 8px rgba(var(--accent-primary-rgb), 0.08), 0 0 12px rgba(var(--accent-primary-rgb), 0.12);
       }
 
+      .nav__trigger--muted {
+        color: var(--text-muted);
+        font-weight: 500;
+        border-color: transparent;
+      }
+
+      .nav__trigger--muted:hover {
+        color: var(--text-secondary);
+        background: transparent;
+        border-color: transparent;
+      }
+
       .nav__trigger:focus-visible {
         outline: none;
         box-shadow: var(--focus-glow);
@@ -112,7 +124,6 @@ export class ArcNavigationMenu extends LitElement {
 
       .nav__dropdown-item {
         display: block;
-        width: 100%;
         text-align: left;
         background: none;
         border: none;
@@ -294,6 +305,15 @@ export class ArcNavigationMenu extends LitElement {
         background: rgba(var(--accent-primary-rgb), 0.1);
       }
 
+      .mobile-trigger--muted {
+        color: var(--text-muted);
+        font-weight: 400;
+      }
+
+      .mobile-trigger--muted:hover {
+        color: var(--text-secondary);
+      }
+
       .mobile-chevron {
         width: 12px;
         height: 12px;
@@ -569,7 +589,7 @@ export class ArcNavigationMenu extends LitElement {
             >
               ${hasChildren ? html`
                 <button
-                  class="nav__trigger nav__trigger--has-children ${isOpen ? 'nav__trigger--open' : ''} ${item.active ? 'nav__trigger--active' : ''}"
+                  class="nav__trigger nav__trigger--has-children ${isOpen ? 'nav__trigger--open' : ''} ${item.active ? 'nav__trigger--active' : ''} ${item.muted ? 'nav__trigger--muted' : ''}"
                   @click=${(e) => this._handleTriggerClick(e, item, i)}
                   aria-expanded=${String(isOpen)}
                   aria-haspopup="true"
@@ -582,7 +602,7 @@ export class ArcNavigationMenu extends LitElement {
                 </button>
               ` : html`
                 <a
-                  class="nav__trigger ${item.active ? 'nav__trigger--active' : ''}"
+                  class="nav__trigger ${item.active ? 'nav__trigger--active' : ''} ${item.muted ? 'nav__trigger--muted' : ''}"
                   href=${item.href}
                   @click=${(e) => this._handleTriggerClick(e, item, i)}
                   part="trigger"
@@ -643,7 +663,7 @@ export class ArcNavigationMenu extends LitElement {
               <li class="mobile-item" style="animation-delay: ${i * 60}ms">
                 ${hasChildren ? html`
                   <button
-                    class="mobile-trigger ${item.active ? 'mobile-trigger--active' : ''}"
+                    class="mobile-trigger ${item.active ? 'mobile-trigger--active' : ''} ${item.muted ? 'mobile-trigger--muted' : ''}"
                     @click=${() => this._toggleMobileDropdown(i)}
                     aria-expanded=${String(isExpanded)}
                   >
@@ -668,7 +688,7 @@ export class ArcNavigationMenu extends LitElement {
                   </div>
                 ` : html`
                   <a
-                    class="mobile-trigger ${item.active ? 'mobile-trigger--active' : ''}"
+                    class="mobile-trigger ${item.active ? 'mobile-trigger--active' : ''} ${item.muted ? 'mobile-trigger--muted' : ''}"
                     href=${item.href}
                     @click=${(e) => this._handleMobileTriggerClick(e, item, i)}
                   >