@arclux/arc-ui 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Arclight Digital, LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,64 @@
+# @arclux/arc-ui
+
+Lit web components implementing the Arclight design system. This is the canonical source -- all framework wrapper packages are generated from these components by [Prism](../../prism.config.js).
+
+## Installation
+
+```bash
+npm install @arclux/arc-ui lit
+```
+
+## Usage
+
+```js
+// Import all components
+import '@arclux/arc-ui';
+
+// Or import individually for smaller bundles
+import '@arclux/arc-ui/button';
+import '@arclux/arc-ui/card';
+```
+
+```html
+<arc-button variant="primary">Get Started</arc-button>
+
+<arc-card>
+  <h3>Card Title</h3>
+  <p>Card content.</p>
+</arc-card>
+
+<arc-input label="Email" type="email" placeholder="you@example.com"></arc-input>
+```
+
+## Styling
+
+Components use Shadow DOM. Override styles via CSS custom properties or `::part()` selectors:
+
+```css
+arc-button {
+  --accent-primary: #3b82f6;
+}
+```
+
+## Framework Wrappers
+
+If you are using a framework, prefer the dedicated wrapper package:
+
+| Framework | Package |
+|-----------|---------|
+| React     | [`@arclux/arc-ui-react`](../react/) |
+| Vue 3     | [`@arclux/arc-ui-vue`](../vue/) |
+| Svelte 5  | [`@arclux/arc-ui-svelte`](../svelte/) |
+| Angular   | [`@arclux/arc-ui-angular`](../angular/) |
+| Solid     | [`@arclux/arc-ui-solid`](../solid/) |
+| Preact    | [`@arclux/arc-ui-preact`](../preact/) |
+| Plain HTML/CSS | [`@arclux/arc-ui-html`](../html/) |
+
+## Documentation
+
+Full component docs and interactive examples: [arcui.dev](https://arcui.dev)
+
+## Links
+
+- [Root README](../../README.md)
+- [License](../../LICENSE)

package/package.json

@@ -0,0 +1,186 @@
+{
+  "name": "@arclux/arc-ui",
+  "version": "1.0.0",
+  "description": "ARC UI — Lit Web Components implementing the Arclight design system.",
+  "type": "module",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "default": "./src/index.js"
+    },
+    "./content": {
+      "types": "./types/index.d.ts",
+      "default": "./src/content/index.js"
+    },
+    "./input": "./src/input/input.js",
+    "./feedback": {
+      "types": "./types/index.d.ts",
+      "default": "./src/feedback/index.js"
+    },
+    "./navigation": {
+      "types": "./types/index.d.ts",
+      "default": "./src/navigation/index.js"
+    },
+    "./layout": {
+      "types": "./types/index.d.ts",
+      "default": "./src/layout/index.js"
+    },
+    "./shared": {
+      "types": "./types/index.d.ts",
+      "default": "./src/shared/index.js"
+    },
+    "./accordion": "./src/content/accordion.js",
+    "./accordion-item": "./src/content/accordion-item.js",
+    "./animated-number": "./src/content/animated-number.js",
+    "./aspect-ratio": "./src/content/aspect-ratio.js",
+    "./avatar": "./src/content/avatar.js",
+    "./avatar-group": "./src/content/avatar-group.js",
+    "./badge": "./src/content/badge.js",
+    "./callout": "./src/content/callout.js",
+    "./card": "./src/content/card.js",
+    "./carousel": "./src/content/carousel.js",
+    "./code-block": "./src/content/code-block.js",
+    "./collapsible": "./src/content/collapsible.js",
+    "./color-swatch": "./src/content/color-swatch.js",
+    "./column": "./src/content/column.js",
+    "./data-table": "./src/content/data-table.js",
+    "./divider": "./src/content/divider.js",
+    "./empty-state": "./src/content/empty-state.js",
+    "./feature-card": "./src/content/feature-card.js",
+    "./highlight": "./src/content/highlight.js",
+    "./icon": "./src/content/icon.js",
+    "./icon-library": "./src/content/icon-library.js",
+    "./icon-registry": "./src/content/icon-registry.js",
+    "./infinite-scroll": "./src/content/infinite-scroll.js",
+    "./kbd": "./src/content/kbd.js",
+    "./markdown": "./src/content/markdown.js",
+    "./marquee": "./src/content/marquee.js",
+    "./meter": "./src/content/meter.js",
+    "./scroll-area": "./src/content/scroll-area.js",
+    "./skeleton": "./src/content/skeleton.js",
+    "./spinner": "./src/content/spinner.js",
+    "./stack": "./src/content/stack.js",
+    "./stat": "./src/content/stat.js",
+    "./step": "./src/content/step.js",
+    "./stepper": "./src/content/stepper.js",
+    "./table": "./src/content/table.js",
+    "./tag": "./src/content/tag.js",
+    "./text": "./src/content/text.js",
+    "./timeline": "./src/content/timeline.js",
+    "./timeline-item": "./src/content/timeline-item.js",
+    "./truncate": "./src/content/truncate.js",
+    "./value-card": "./src/content/value-card.js",
+    "./button": "./src/input/button.js",
+    "./calendar": "./src/input/calendar.js",
+    "./checkbox": "./src/input/checkbox.js",
+    "./chip": "./src/input/chip.js",
+    "./color-picker": "./src/input/color-picker.js",
+    "./combobox": "./src/input/combobox.js",
+    "./copy-button": "./src/input/copy-button.js",
+    "./date-picker": "./src/input/date-picker.js",
+    "./file-upload": "./src/input/file-upload.js",
+    "./form": "./src/input/form.js",
+    "./icon-button": "./src/input/icon-button.js",
+    "./multi-select": "./src/input/multi-select.js",
+    "./number-input": "./src/input/number-input.js",
+    "./otp-input": "./src/input/otp-input.js",
+    "./pin-input": "./src/input/pin-input.js",
+    "./radio": "./src/input/radio.js",
+    "./radio-group": "./src/input/radio-group.js",
+    "./rating": "./src/input/rating.js",
+    "./search": "./src/input/search.js",
+    "./segmented-control": "./src/input/segmented-control.js",
+    "./select": "./src/input/select.js",
+    "./slider": "./src/input/slider.js",
+    "./sortable-list": "./src/input/sortable-list.js",
+    "./suggestion": "./src/input/suggestion.js",
+    "./textarea": "./src/input/textarea.js",
+    "./theme-toggle": "./src/input/theme-toggle.js",
+    "./toggle": "./src/input/toggle.js",
+    "./alert": "./src/feedback/alert.js",
+    "./command-item": "./src/feedback/command-item.js",
+    "./command-palette": "./src/feedback/command-palette.js",
+    "./context-menu": "./src/feedback/context-menu.js",
+    "./dialog": "./src/feedback/dialog.js",
+    "./dropdown-menu": "./src/feedback/dropdown-menu.js",
+    "./hover-card": "./src/feedback/hover-card.js",
+    "./modal": "./src/feedback/modal.js",
+    "./notification-panel": "./src/feedback/notification-panel.js",
+    "./popover": "./src/feedback/popover.js",
+    "./progress": "./src/feedback/progress.js",
+    "./sheet": "./src/feedback/sheet.js",
+    "./toast": "./src/feedback/toast.js",
+    "./tooltip": "./src/feedback/tooltip.js",
+    "./breadcrumb": "./src/navigation/breadcrumb.js",
+    "./breadcrumb-item": "./src/navigation/breadcrumb-item.js",
+    "./drawer": "./src/navigation/drawer.js",
+    "./footer": "./src/navigation/footer.js",
+    "./link": "./src/navigation/link.js",
+    "./nav-item": "./src/navigation/nav-item.js",
+    "./navigation-menu": "./src/navigation/navigation-menu.js",
+    "./pagination": "./src/navigation/pagination.js",
+    "./scroll-spy": "./src/navigation/scroll-spy.js",
+    "./scroll-to-top": "./src/navigation/scroll-to-top.js",
+    "./sidebar": "./src/navigation/sidebar.js",
+    "./sidebar-link": "./src/navigation/sidebar-link.js",
+    "./sidebar-section": "./src/navigation/sidebar-section.js",
+    "./spy-link": "./src/navigation/spy-link.js",
+    "./tab": "./src/navigation/tab.js",
+    "./tabs": "./src/navigation/tabs.js",
+    "./top-bar": "./src/navigation/top-bar.js",
+    "./tree-item": "./src/navigation/tree-item.js",
+    "./tree-view": "./src/navigation/tree-view.js",
+    "./app-shell": "./src/layout/app-shell.js",
+    "./auth-shell": "./src/layout/auth-shell.js",
+    "./container": "./src/layout/container.js",
+    "./dashboard-grid": "./src/layout/dashboard-grid.js",
+    "./page-header": "./src/layout/page-header.js",
+    "./page-layout": "./src/layout/page-layout.js",
+    "./resizable": "./src/layout/resizable.js",
+    "./section": "./src/layout/section.js",
+    "./settings-layout": "./src/layout/settings-layout.js",
+    "./split-pane": "./src/layout/split-pane.js",
+    "./status-bar": "./src/layout/status-bar.js",
+    "./toolbar": "./src/layout/toolbar.js",
+    "./option": "./src/shared/option.js",
+    "./menu-item": "./src/shared/menu-item.js",
+    "./menu-divider": "./src/shared/menu-divider.js",
+    "./tokens": "./src/tokens.js",
+    "./icons/phosphor": "./src/icons/phosphor.js",
+    "./icons/lucide": "./src/icons/lucide.js",
+    "./icons/types": "./src/icons/types.d.ts"
+  },
+  "files": [
+    "src/",
+    "types/"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "lit": "^3.3.0"
+  },
+  "license": "MIT",
+  "keywords": [
+    "web-components",
+    "lit",
+    "design-system",
+    "arclight"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/arclight-digital/arc-ui",
+    "directory": "packages/web-components"
+  },
+  "homepage": "https://arcui.dev",
+  "bugs": {
+    "url": "https://github.com/arclight-digital/arc-ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "echo 'No build step — plain JS modules'"
+  }
+}

package/src/content/accordion-item.js

@@ -0,0 +1,27 @@
+import { LitElement, html, css } from 'lit';
+
+export class ArcAccordionItem extends LitElement {
+  static properties = {
+    question: { type: String, reflect: true },
+  };
+
+  static styles = css`
+    :host { display: none; }
+  `;
+
+  constructor() {
+    super();
+    this.question = '';
+  }
+
+  /** Answer content from slotted children */
+  get answer() {
+    return this.textContent.trim();
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define('arc-accordion-item', ArcAccordionItem);

package/src/content/accordion.js

@@ -0,0 +1,151 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+import './accordion-item.js';
+
+export class ArcAccordion extends LitElement {
+  static properties = {
+    _items:     { state: true },
+    _openItems: { state: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; }
+
+      .accordion {
+        display: flex;
+        flex-direction: column;
+        gap: 1px;
+        background: var(--border-subtle);
+        border: 1px solid var(--border-subtle);
+        border-radius: var(--radius-lg);
+        overflow: hidden;
+      }
+
+      .accordion__item { background: var(--bg-card); }
+
+      .accordion__trigger {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--space-md);
+        width: 100%;
+        padding: var(--space-lg) var(--space-xl);
+        cursor: pointer;
+        font-family: var(--font-body);
+        font-size: var(--text-md);
+        font-weight: 600;
+        color: var(--text-primary);
+        background: none;
+        border: none;
+        text-align: left;
+        transition: background var(--transition-fast);
+        min-height: var(--touch-min);
+      }
+
+      .accordion__trigger:hover { background: var(--bg-elevated); }
+      .accordion__trigger[aria-expanded="true"] { background: var(--bg-elevated); }
+      .accordion__trigger:focus-visible {
+        outline: none;
+        box-shadow: inset 0 0 0 2px var(--accent-primary);
+        background: var(--bg-elevated);
+      }
+
+      .accordion__chevron {
+        color: var(--text-muted);
+        font-size: var(--text-sm);
+        transition: transform 300ms ease;
+        flex-shrink: 0;
+        display: inline-block;
+      }
+
+      .accordion__trigger[aria-expanded="true"] .accordion__chevron {
+        transform: rotate(180deg);
+      }
+
+      .accordion__content {
+        display: grid;
+        grid-template-rows: 0fr;
+        transition: grid-template-rows 300ms ease;
+      }
+      .accordion__content.is-open { grid-template-rows: 1fr; }
+
+      .accordion__body { overflow: hidden; }
+
+      .accordion__body p {
+        color: var(--text-secondary);
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        line-height: 1.75;
+        padding: var(--space-xs) var(--space-lg) var(--space-md);
+        margin: 0;
+      }
+
+      .accordion__slot-host { display: none; }
+
+      @media (prefers-reduced-motion: reduce) {
+        :host *,
+        :host *::before,
+        :host *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this._items = [];
+    this._openItems = new Set();
+  }
+
+  _onSlotChange(e) {
+    this._items = e.target.assignedElements({ flatten: true })
+      .filter(el => el.tagName === 'ARC-ACCORDION-ITEM');
+  }
+
+  _toggle(index) {
+    const next = new Set(this._openItems);
+    if (next.has(index)) {
+      next.delete(index);
+    } else {
+      next.add(index);
+    }
+    this._openItems = next;
+  }
+
+  render() {
+    return html`
+      <div class="accordion__slot-host">
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+      <div class="accordion" part="accordion">
+        ${this._items.map((item, i) => {
+          const isOpen = this._openItems.has(i);
+          return html`
+            <div class="accordion__item">
+              <button
+                class="accordion__trigger"
+                aria-expanded=${isOpen ? 'true' : 'false'}
+                @click=${() => this._toggle(i)}
+              >
+                <span>${item.question}</span>
+                <span class="accordion__chevron">&#9662;</span>
+              </button>
+              <div class="accordion__content ${isOpen ? 'is-open' : ''}">
+                <div class="accordion__body">
+                  <p>${item.answer}</p>
+                </div>
+              </div>
+            </div>
+          `;
+        })}
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-accordion', ArcAccordion);

package/src/content/animated-number.js

@@ -0,0 +1,160 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcAnimatedNumber extends LitElement {
+  static properties = {
+    value:    { type: Number, reflect: true },
+    duration: { type: Number },
+    format:   { type: String, reflect: true },
+    prefix:   { type: String },
+    suffix:   { type: String },
+    decimals: { type: Number },
+    locale:   { type: String },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: inline-block;
+        font-family: var(--font-mono);
+        font-variant-numeric: tabular-nums;
+      }
+
+      .value {
+        white-space: nowrap;
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.value = 0;
+    this.duration = 1000;
+    this.format = 'number';
+    this.prefix = '';
+    this.suffix = '';
+    this.decimals = 0;
+    this.locale = 'en-US';
+
+    /** @private */
+    this._displayValue = 0;
+    /** @private */
+    this._previousValue = 0;
+    /** @private */
+    this._rafId = null;
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._rafId != null) {
+      cancelAnimationFrame(this._rafId);
+      this._rafId = null;
+    }
+  }
+
+  willUpdate(changed) {
+    if (changed.has('value')) {
+      const oldVal = changed.get('value');
+      this._previousValue = oldVal != null ? oldVal : 0;
+      this._animate(this._previousValue, this.value);
+    }
+  }
+
+  /** Ease-out-expo: fast start, satisfying deceleration. */
+  _easeOutExpo(t) {
+    return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
+  }
+
+  /** Check if the user prefers reduced motion. */
+  _prefersReducedMotion() {
+    return window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+  }
+
+  /** Animate from `from` to `to`. */
+  _animate(from, to) {
+    if (this._rafId != null) {
+      cancelAnimationFrame(this._rafId);
+      this._rafId = null;
+    }
+
+    // Skip animation when motion is reduced or duration is zero
+    if (this._prefersReducedMotion() || this.duration <= 0) {
+      this._displayValue = to;
+      this.requestUpdate();
+      return;
+    }
+
+    const start = performance.now();
+    const delta = to - from;
+
+    const step = (now) => {
+      const elapsed = now - start;
+      const progress = Math.min(elapsed / this.duration, 1);
+      const eased = this._easeOutExpo(progress);
+
+      this._displayValue = from + delta * eased;
+      this.requestUpdate();
+
+      if (progress < 1) {
+        this._rafId = requestAnimationFrame(step);
+      } else {
+        this._displayValue = to;
+        this._rafId = null;
+        this.requestUpdate();
+      }
+    };
+
+    this._rafId = requestAnimationFrame(step);
+  }
+
+  /** Format the current display value using Intl.NumberFormat. */
+  _formatValue(num) {
+    const opts = {
+      minimumFractionDigits: this.decimals,
+      maximumFractionDigits: this.decimals,
+    };
+
+    if (this.format === 'currency') {
+      // Use Intl currency formatting when no custom prefix is supplied
+      if (!this.prefix) {
+        opts.style = 'currency';
+        opts.currency = 'USD';
+      }
+    } else if (this.format === 'percent') {
+      // Intl percent expects 0.5 for 50%, but we treat value as 50 for 50%.
+      // So we format manually to keep the API intuitive.
+    }
+
+    let formatted;
+    try {
+      formatted = new Intl.NumberFormat(this.locale, opts).format(num);
+    } catch {
+      formatted = num.toFixed(this.decimals);
+    }
+
+    // Build the full string with prefix/suffix
+    const parts = [];
+    if (this.prefix) parts.push(this.prefix);
+    parts.push(formatted);
+    if (this.format === 'percent' && !this.suffix) {
+      parts.push('%');
+    } else if (this.suffix) {
+      parts.push(this.suffix);
+    }
+
+    return parts.join('');
+  }
+
+  render() {
+    return html`
+      <span class="value"
+            part="value"
+            role="status"
+            aria-live="polite"
+      >${this._formatValue(this._displayValue)}</span>
+    `;
+  }
+}
+
+customElements.define('arc-animated-number', ArcAnimatedNumber);

package/src/content/aspect-ratio.js

@@ -0,0 +1,78 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcAspectRatio extends LitElement {
+  static properties = {
+    ratio: { type: String, reflect: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; }
+
+      .aspect-ratio {
+        position: relative;
+        width: 100%;
+        overflow: hidden;
+        border-radius: var(--radius-md);
+      }
+
+      .aspect-ratio__inner {
+        width: 100%;
+        height: 100%;
+      }
+
+      ::slotted(*) {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.ratio = '16/9';
+  }
+
+  /**
+   * Parse the ratio string ('W/H') into a CSS-safe aspect-ratio value.
+   * Falls back to 16/9 if the format is invalid.
+   */
+  get _aspectRatio() {
+    const match = this.ratio?.match(/^(\d+(?:\.\d+)?)\s*\/\s*(\d+(?:\.\d+)?)$/);
+    if (!match) return '16 / 9';
+    return `${match[1]} / ${match[2]}`;
+  }
+
+  /**
+   * Compute a padding-top percentage fallback for browsers
+   * that don't support the aspect-ratio CSS property.
+   */
+  get _paddingFallback() {
+    const match = this.ratio?.match(/^(\d+(?:\.\d+)?)\s*\/\s*(\d+(?:\.\d+)?)$/);
+    if (!match) return '56.25%';
+    const w = parseFloat(match[1]);
+    const h = parseFloat(match[2]);
+    if (w === 0) return '56.25%';
+    return `${(h / w) * 100}%`;
+  }
+
+  render() {
+    return html`
+      <div
+        class="aspect-ratio"
+        part="container"
+        style="aspect-ratio: ${this._aspectRatio};"
+      >
+        <div class="aspect-ratio__inner" part="inner">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-aspect-ratio', ArcAspectRatio);