Changelog

Release history for ARC UI. All packages are versioned together.

v2.1.0 — Export Namespace Fix

Resolves a namespace collision where @arclux/arc-ui/input imported the input category barrel instead of the arc-input component.

Breaking Changes

Category barrel exports moved — Tier barrel imports like @arclux/arc-ui/input, @arclux/arc-ui/content, etc. are now under @arclux/arc-ui/categories/ (e.g. @arclux/arc-ui/categories/input). No known consumers were using the old paths.

New

@arclux/arc-ui/input — Now correctly registers the arc-input component, matching the convention used by all other components.

v2.0.1 — Export Fixes & Build Pipeline

Fixes 43 missing package exports and consolidates the build pipeline into a single orchestrator with automatic export syncing so missing exports can never slip through again.

Bug Fixes

43 missing package exports — The exports map in @arclux/arc-ui was missing entries for all 14 new v2 components and 29 older components. Imports like @arclux/arc-ui/prose now resolve correctly.

Infrastructure

Unified generate pipeline — Replaced 5 chained npm scripts with a single scripts/generate.js orchestrator. Runs tokens → registrations → brand → Prism → exports with per-step timing output and fail-fast error handling.
Automatic export syncing — New scripts/generate-exports.js scans all .register.js files and adds any missing entries to package.json exports during pnpm generate. Missing exports can no longer slip through.

v2.0.0 — Design System Overhaul

A major release adding 14 new components, theme presets, category-level package exports, a type scale overhaul, and a comprehensive quality pass across the entire library. Standardizes token usage, fixes subtle bugs, improves mobile interactions, and brings the full sci-fi luminescence vocabulary to every interactive surface.

New Data Components

arc-diff — Line-based text diff viewer with inline and side-by-side modes. Uses a longest-common-subsequence algorithm to highlight added, removed, and unchanged lines with color-coded backgrounds.
arc-key-value — Key-value pair list with horizontal and stacked layout modes. Pairs render with uppercase accent-font labels and optional dividers. Hover highlights each pair row.
arc-countdown-timer — Live countdown to a target date with segmented day/hour/minute/second cards. Numbers use gradient accent text with tabular-nums alignment. Dispatches arc-expired when the countdown reaches zero.
arc-comparison — Multi-column comparison table for pricing tiers and feature matrices. Accepts JSON-driven features and column values. Boolean values render as check/cross icons. Supports a highlighted column with accent styling.
arc-sparkline — Tiny inline SVG line or bar chart for embedding metrics in tables, stats, and cards. Supports area fill, custom colors, and a draw-in stroke animation on load.
arc-description-list — Structured term/detail pair list in a responsive grid. Supports multi-column layouts with automatic vertical dividers and collapses to a single column below 640px.

New Typography Components

arc-blockquote — Styled pull-quote with a top gradient accent line, decorative opening-quote glyph, and optional citation footer. Supports a default and accent variant with gradient text.
arc-prose — Long-form content wrapper that applies typographic rhythm to slotted HTML. Styles headings, paragraphs, lists, links, code blocks, images, and tables with consistent spacing and token-driven typography. Three size variants: sm, md, lg.
arc-typewriter — Character-by-character text reveal animation with configurable speed, delay, and looping. Blinking accent-colored cursor fades out on completion. Dispatches arc-complete and exposes a replay() method.
arc-gradient-text — Inline text wrapper that applies gradient fills declaratively. Five built-in variants (accent, display, sunset, ocean, custom) plus an animated mode that cycles the gradient position. Includes a subtle drop-shadow glow.
arc-number-format — Locale-aware number formatter powered by Intl.NumberFormat. Supports number, currency, percent, and compact notation types with configurable decimals and locale. Uses tabular-nums for column alignment.
arc-time-ago — Auto-updating relative time display (“3 minutes ago”, “yesterday”). Uses Intl.RelativeTimeFormat with an adaptive update interval that slows as the timestamp ages. Renders a semantic <time> element with a full-date title tooltip.

New Input Components

arc-time-picker — Time selection dropdown with scrollable hour, minute, and AM/PM columns. Supports 12h and 24h display formats, configurable step increments (1/5/15/30 minutes), and min/max time constraints. Matches the DatePicker interaction pattern with keyboard navigation and outside-click dismiss.
arc-range-slider — Dual-thumb slider for selecting a value range. Custom-rendered track with pointer-capture drag, snap-to-step, and full keyboard support (ArrowKeys, Home/End). Both thumbs emit arc-input during drag and arc-change on release with { low, high } detail. Same glow effects as the single Slider.

Theme Presets

Minimal theme (@arclux/arc-ui/themes/minimal) — Strips all glow effects, gradient backgrounds, and depth shadows. Replaces the sci-fi aesthetic with a clean, flat look while preserving layout and spacing. Import after base.css.
High Contrast theme (@arclux/arc-ui/themes/high-contrast) — WCAG AAA compliant with 7:1+ contrast ratios. Brightened text, stronger borders, bolder focus rings (3px solid), and larger interactive targets (36px minimum). Includes both dark and light mode overrides.

Semantic Token Layer

A new semantic token layer adds ~25 CSS custom properties that describe purpose rather than appearance. All interactive colors now use --interactive (aliased to --accent-primary), all surface backgrounds use --surface-*, and feedback composites (error/success/warning/info borders, glows, and subtle backgrounds) are available as ready-made tokens. The semantic layer is additive — both old and new token names remain available — but all ~170 component files have been migrated to the semantic names internally.

Interactive tokens — --interactive, --interactive-rgb, --interactive-hover, --interactive-active, --interactive-focus, --interactive-focus-ring, --interactive-muted. Override --interactive at :root to retheme every clickable element at once.
Surface tokens — --surface-base, --surface-primary, --surface-raised, --surface-overlay, --surface-hover. A clear elevation hierarchy for page background → content → cards → dropdowns.
Divider tokens — --divider and --divider-glow distinguish separator lines from component edge borders.
Feedback composites — --feedback-{error,success,warning,info}-{subtle,border,glow}. Pre-composed background, border, and glow values for each feedback level, eliminating manual rgba() composition in components.
Theme preset integration — Minimal theme overrides flatten --interactive-hover/--interactive-active to none and simplifies --interactive-focus to a 2px ring. High Contrast theme strengthens all --interactive-focus and --feedback-*-glow values.

Category Package Exports

Import by category — New package entry points: @arclux/arc-ui/content, /data, /typography, /input, /feedback, /navigation, /layout, /shared. Import an entire tier with a single import statement. Existing per-component imports remain unchanged.

Vertical Tabs

New orientation prop on Tabs — arc-tabs now accepts orientation="vertical" to render the tab list as a sidebar column with the panel to the right. Arrow key navigation automatically switches to up/down. Works with both underline and pills variants. Default remains horizontal.

Nested TOC & Sidebar Support

New level prop on SpyLink and SidebarLink — Both arc-spy-link and arc-sidebar-link now accept a level number prop (default 0) for visual nesting. Links with level > 0 render with progressive indentation and a smaller, dimmed font (--text-xs / --text-ghost). Active state highlighting overrides the dimmed color automatically. Zero breaking changes — existing flat lists default to level 0 and render identically.

Typography & Token Changes

Text size floor raised to 16px — --text-sm bumped from 14px to 16px; --text-md and --body-size bumped from 15px to 17px. All body and secondary text across the library is now larger and more readable.
Code font size set to 14px — --code-size is now a fixed 14px (was 13px). Slightly smaller than body text for clear visual distinction in inline code and code blocks.
Sidebar & TOC widened to 280px — arc-sidebar default width and arc-app-shell sidebar/TOC columns bumped from 260px to 280px to accommodate the larger text.

Visual Elevation

A systematic pass bringing the full sci-fi luminescence vocabulary — glow lines, entrance animations, inset shadows, and spring easing — to workhorse components that previously had minimal interaction treatments.

Glow line dividers — Card (body/footer), Accordion (between items), Modal (header & footer), and Tooltip (popup top) now use --glow-line-gradient pseudo-element dividers instead of flat border-color separators.
Dropdown entrance animations — Select, Combobox, and Multi-Select dropdowns now animate in with a 120ms slide-fade (opacity + translateY), matching the Date Picker. Each dropdown also gets a glow-line accent at the top edge. Respects prefers-reduced-motion.
Form field hover glow — Input, Select, Textarea, Combobox, and Multi-Select now show var(--glow-hover) on hover alongside the existing border-color change. Checkbox unchecked state gains a subtle accent glow on hover.
Inset shadow on recessed surfaces — New --shadow-inset token (inset 0 1px 3px rgba(0,0,0,0.25)) applied to all form field backgrounds, giving them a pressed-in depth. Combines with glow-hover and focus-glow via comma-separated box-shadows.
Checkbox spring-pop — Check icon now uses a check-pop keyframe (scale 0.5 → 1.15 → 1) with --ease-out-expo instead of a linear scale transition. Respects prefers-reduced-motion.
Toggle thumb spring easing — Toggle thumb transition uses 300ms var(--ease-out-expo) for a natural overshoot feel on slide.
Skeleton shimmer accent tint — Skeleton shimmer highlight now uses rgba(var(--accent-primary-rgb), 0.04) instead of var(--border-subtle), giving loading states a faint accent-colored pulse.
Active state spring easing — Button, Icon Button, and Theme Toggle release transitions now use var(--ease-out-expo) for the transform property, giving the scale-up a springy bounce-back.

Interaction Polish

A second visual pass adding hover glows, active press feedback, and pulse animations to 10 components that previously had flat or minimal interaction states. All enhancements are CSS-only and respect prefers-reduced-motion.

Accordion — Trigger hover glow, scale(0.98) active press, expo easing on chevron rotation.
Tabs — Active tab glow on both underline and pills variants, scale(0.95) press, expo transform easing.
ListItem — Hover glow, scale(0.98) press with expo easing, selected state inset glow.
Select — Option scale(0.97) active press, expo chevron easing, dropdown zoom-in entrance (scale(0.96) start).
Breadcrumb — Hover background with accent tint and glow, rounded corners, scale(0.95) press.
Pagination — Hover glow on inactive pages, scale(0.93) active press, expo transform easing.
Radio Group — Hover glow on radio circles with subtle border-color shift.
Sidebar — Section toggle hover glow, link hover inset glow.
Stepper — Completed step glow, active step pulse animation.
Avatar — scale(1.05) hover lift, online status pulse animation.

Mobile Navigation Menu

Thematic mobile triggers — Mobile menu items are now bordered cards with accent glow, matching the desktop navigation style. Supports default, primary, and muted variants.
Tap feedback — All mobile triggers and child links show an instant scale(0.98) press state with accent tint on tap.
Swipe-to-close — Swiping up on the mobile panel (when scrolled to top) dismisses the menu.
GPU-accelerated animation — Panel open/close animation replaced from max-height to clip-path for smoother performance on mobile devices.
Smooth sub-menu expand — Replaced the max-height: 500px hack with CSS grid-template-rows: 0fr → 1fr for properly measured expand/collapse transitions.
ARIA improvements — Mobile panel now declares role="dialog", aria-modal="true", and aria-label.

Layout

Page Header top padding removed — arc-page-header no longer adds var(--space-lg) top padding, eliminating the extra margin on component doc pages. The app shell content area already provides consistent top spacing.

Bug Fixes

Sidebar toggle event collision — The arc-toggle rename to arc-sidebar-toggle fixes a latent bug where arc-toggle events from nested Collapsible or TreeView components could bubble up and incorrectly trigger the app-shell sidebar.
Breadcrumb active item alignment — The current (last) breadcrumb item now has matching padding and min-height with link items, fixing a visual offset.
Marquee ResizeObserver leak — _setupResizeObserver now disconnects any existing observer before creating a new one, preventing duplicate observers.
Tree-view keyboard performance — Arrow key navigation now queries the DOM once per keypress instead of twice.
Pagination aria-current — Non-current pages now omit the aria-current attribute entirely instead of setting it to "false".
Hotkey render — render() now returns Lit’s nothing sentinel instead of undefined.
DatePicker lazy init — new Date() computation moved from constructor to connectedCallback for lazy initialization.
Timeline line gap — Fixed a 4px gap between timeline dots and their connecting lines.

Style Consistency

Transition token adoption — Replaced hardcoded transition durations in Accordion, Collapsible, Sidebar, DatePicker, and ThemeToggle with var(--transition-fast) or var(--transition-slow).
Hover glow standardization — Components that independently defined 0 0 12px rgba(accent, 0.15) now reference var(--glow-hover).
Breakpoint documentation — Added token-equivalent comments to 9 hardcoded media queries across 8 components.

New Tokens

--z-dropdown, --z-tooltip, --z-overlay, --z-modal, --z-toast, --z-max — Semantic z-index scale. All 22 components with z-index values now reference these tokens instead of hardcoding numbers.
--glow-hover — Standardized hover glow (0 0 12px rgba(var(--accent-primary-rgb), 0.15)). Used by Avatar, Tag, Badge, NavigationMenu, and available for consumer use.

Breaking Changes

Text size scale — --text-sm is now 16px (was 14px), --text-md is now 17px (was 15px), --code-size is now 14px (was 13px). Components using these tokens will render larger text.
Z-index token restructure — Replaced the old numeric scale (--z-sticky, --z-drawer, --z-popover, values 100–700) with a semantic scale: --z-dropdown (1000), --z-tooltip (1100), --z-overlay (1200), --z-modal (1300), --z-toast (1400), --z-max (9999). If you referenced the old token names in your CSS, update them.
Disabled opacity standardized to 0.5 — 25 components previously used opacity: 0.4 for disabled states. All now use 0.5, matching the --opacity-disabled token. Disabled elements will appear slightly more visible than before.
Event renames — Three custom events have been renamed for clarity:
- arc-trigger → arc-hotkey-trigger (Hotkey)
- arc-toggle (top-bar/app-shell sidebar) → arc-sidebar-toggle
- arc-item-click → arc-item-select (List, ListItem)
Note: arc-toggle events from Collapsible, Truncate, TreeView, and SidebarSection are unchanged.

Tree-Shaking

sideEffects: false — Added to all 7 framework packages (React, Vue, Svelte, Angular, Solid, Preact, HTML). Bundlers can now reliably tree-shake unused components from framework wrapper imports.

Docs

Front page overhaul — Tabbed code examples (React/Vue/Svelte/HTML), “What’s New in v2” highlight section, animated stat counters, glow-line section dividers, and a Prism visual replacing the bare frameworks strip.
OG image refresh — Gradient title, framework pills, varied accent stat colors, and tighter layout spacing.

Internal

22 components updated from hardcoded z-index values to semantic tokens.
25 components updated from opacity: 0.4 to 0.5 in disabled states.
5 components updated from hardcoded transition durations to token references.
4 components updated to use var(--glow-hover) instead of inline shadow definitions.

v1.11.0 — Footer Containment & Layout Improvements

Adds a contained layout mode to the footer (matching the top bar) and converts the docs site footer to use arc-footer.

Footer

New contained attribute — Constrains footer content using arc-container with the same breakpoints as the top bar. Accepts sm, md (default), lg, or xl. The footer background stays full-width.
Built-in horizontal padding — Full-width mode now applies padding-inline: var(--space-lg) to the footer content.

Docs

Footer rewrite — Replaced the custom SiteFooter.astro markup with <arc-footer> using its slot-based API (logo, default columns, legal).
CSP headers — Added _headers file to allow blob: fonts and Cloudflare Insights under Content-Security-Policy.

v1.10.2 — Top Bar Containment & Brand Integration

Adds a contained layout mode to the top bar and replaces custom footer branding with @arclux/brand components.

Top Bar

New contained attribute — Constrains top-bar content to the same breakpoints as arc-container. Accepts sm (720px), md (1120px, default), lg (1400px), or xl (1600px). The bar background stays full-width.
Built-in horizontal padding — Full-width mode now applies padding-inline: var(--space-lg) to the content area, removing the need for external ::part(content) overrides.

Docs

Footer branding — Replaced the custom inline SVG “by Arclight” markup with the <arclight-by> component from @arclux/brand.

v1.10.1 — Tier Reorganization & API Cleanup

Splits the overloaded content/ tier into three focused categories, removes the last deprecated API, and aligns token naming between JavaScript and CSS.

Content Tier Split

New data/ tier (14 components) — Structured data display: animated-number, badge, data-table, list, list-item, meter, stat, step, stepper, table, tag, timeline, timeline-item, value-card.
New typography/ tier (6 components) — Text rendering & formatting: code-block, highlight, kbd, markdown, text, truncate.
content/ retains 27 presentational components (accordion, avatar, card, carousel, icon, etc.).
All framework wrappers (React, Vue, Svelte, Angular, Solid, Preact) regenerated with new directory structure.

Deprecation Removal

Tabs items property removed — The deprecated items array prop and its legacy rendering path have been deleted. Use <arc-tab> children exclusively.

Token Naming Alignment

Renamed JS token keys: accentBlue → accentPrimary, accentViolet → accentSecondary.
Renamed glow keys: glow.blue → glow.primary, glow.violet → glow.secondary, glowLine.blue → glowLine.primary.
CSS variable names unchanged (--accent-primary, --accent-secondary) — JS now matches CSS.

Slot Naming Standardization

Empty State — Renamed slot action → actions (consistent with cta-banner, top-bar, fieldset).
Status Bar — Renamed slots left/right → start/end (consistent with toolbar, RTL-friendly).

Code Block Improvements

Fixed copy button scroll — Copy button no longer scrolls with code content on horizontal overflow. It stays pinned to the top-right of the code area.
Copy button transparency — Copy button is now semi-transparent with backdrop blur by default, becoming fully opaque on hover. Code beneath is visible.
Basic variant layout — Copy button uses inline flex layout so the block grows naturally on mobile instead of overlapping.
Fixed window variant footer — Status bar metadata (language, line count) now renders correctly after slot rename.

Scroll Spy Improvements

Sticky heading — The “On this page” heading now sticks to the top of the TOC when scrolling through long link lists.
Heading redesign — Gradient accent text, surface background, border, and glow-on-hover treatment.
Scroll to top — Clicking the heading smooth-scrolls both the page and the TOC back to the top.

Docs Site

Homepage code blocks — Replaced custom hero install and code example markup with native <arc-code-block> components (basic and window variants).

v1.10.0 — The Big Component Update

40 new components in a single release. Layout primitives, navigation patterns, form helpers, content building blocks, and feedback overlays — basically everything we kept saying "we'll add that later" about. Later is now.

New Components — Layout

Center (arc-center) — Content centering primitive with max-width, intrinsic centering, and text-center modes.
Cluster (arc-cluster) — Flex-wrap primitive for tags, chips, and button groups with token gap spacing.
Dock (arc-dock) — Edge-snapped auto-hide panel with hover-reveal and spring easing.
Float Bar (arc-float-bar) — Floating toolbar anchored to viewport bottom with backdrop blur. For bulk actions and unsaved-changes prompts.
Aspect Grid (arc-aspect-grid) — CSS grid with uniform aspect-ratio cells.
Inset (arc-inset) — Padding primitive with optional negative-margin bleed.
Masonry (arc-masonry) — CSS-columns masonry layout. No JavaScript, just columns and gap.
Responsive Switcher (arc-responsive-switcher) — Container-query layout switcher: row above threshold, column below.
Sticky (arc-sticky) — Sticky wrapper with IntersectionObserver-based stuck detection and arc-stuck event.

New Components — Navigation

Anchor Nav (arc-anchor-nav) — In-page link bar with IntersectionObserver-driven active state. Horizontal or vertical.
Bottom Nav (arc-bottom-nav) — Mobile bottom navigation bar with icon + label items and backdrop blur.
Breadcrumb Menu (arc-breadcrumb-menu) — Breadcrumb segments that double as dropdown triggers for sibling navigation.
Command Bar (arc-command-bar) — Always-visible search input designed for toolbar placement.
Page Indicator (arc-page-indicator) — Dot-based position indicator for carousels and onboarding flows.
Rail (arc-rail) — Ultra-narrow icon-only vertical navigation strip. Think VS Code activity bar.
Skip Link (arc-skip-link) — Accessible skip-to-content link, invisible until focused.
Speed Dial (arc-speed-dial) — FAB that fans out secondary icon actions with staggered animation.
Stepper Nav (arc-stepper-nav) — Full wizard navigation controller with Back/Next/Skip and validation gates.

New Components — Content

Separator (arc-separator) — Semantic role="separator" with optional centered label text. Variants: line, dashed, dotted, fade.
Image (arc-image) — Responsive image with loading skeleton shimmer, fade-in transition, and error fallback.
Scroll Indicator (arc-scroll-indicator) — Sticky progress bar showing scroll position. rAF-throttled for smooth performance.
List (arc-list) — Container for list items with keyboard navigation and single/multiple selection.
List Item (arc-list-item) — List item with prefix/suffix/description slots.
Virtual List (arc-virtual-list) — Renders only visible items for 10K+ row datasets.

New Components — Input

Label (arc-label) — Form label with required indicator, description slot, and tooltip slot.
Fieldset (arc-fieldset) — Form group with native <fieldset> + <legend>, error messages, and card variant.
Switch Group (arc-switch-group) — Groups arc-toggle children with propagated size and disabled.
Button Group (arc-button-group) — Connected button borders with propagated size and variant.
Input Group (arc-input-group) — Prefix/suffix addon slots with connected borders and shared focus glow.
Hotkey (arc-hotkey) — Invisible keyboard shortcut listener with modifier combos and chord sequences.

New Components — Feedback

Announcement (arc-announcement) — ARIA live-region wrapper for screen-reader announcements. No visual output.
Banner (arc-banner) — Full-width persistent notification strip with status variants and dismiss.
Confirm (arc-confirm) — Programmatic confirmation dialog with static open() returning Promise<boolean>.
Connection Status (arc-connection-status) — Auto online/offline detector with amber pulse animation.
Guided Tour (arc-guided-tour) — Multi-step onboarding overlay composing spotlight + tooltip.
Inline Message (arc-inline-message) — Compact icon + text feedback with status variants.
Loading Overlay (arc-loading-overlay) — Semi-transparent loading cover with centered spinner.
Progress Toast (arc-progress-toast) — Toast with embedded progress bar and imperative show/update/complete API.
Snackbar (arc-snackbar) — Bottom-anchored notification with imperative show() API and action button.
Spotlight (arc-spotlight) — Element-highlighting overlay for onboarding and feature discovery.

Enhancements

Avatar — Image loading now shows a shimmer skeleton, fades in on load, and falls back to initials on error.
Data Table — New virtual and row-height props enable row virtualization for large datasets.
Dropdown Menu — Internal divider rendering now uses arc-separator.
Context Menu — Internal divider rendering now uses arc-separator.

See you in v1.10.1 when we inevitably fix half of these.

v1.9.2 — Top Bar Container Alignment

Bug Fixes

Top bar content alignment — arc-top-bar now uses the same centering strategy as arc-container (max-width + margin-inline: auto + padding-inline) so nav content aligns pixel-perfect with page content at every viewport width. Consumers no longer need ::part(topbar) padding overrides.

v1.9.1 — Fix Icon Loading in Production Builds

Bug Fixes

Icons broken in production — v1.9.0's dynamic imports used template literal paths that Vite/Rollup can't resolve from node_modules, causing 404s in production builds. Replaced with generated resolver maps containing static import() paths per icon, which bundlers can analyze and chunk correctly.

v1.9.0 — Per-Icon Lazy Loading

Icons are now loaded on demand — each icon is its own ~500-byte module, dynamically imported when first used. Previously, importing arc-icon eagerly pulled in both Phosphor (817KB) and Lucide (736KB) regardless of how many icons you actually used. Now, 0KB of icon data is loaded upfront, and only the icons your app renders are fetched.

New

Per-icon lazy loading — <arc-icon name="star"> dynamically imports only star.js (~500 bytes), not the entire library. Bundlers tree-shake unused icons automatically.
Per-icon subpath exports — Individual icons are available via @arclux/arc-ui/icons/phosphor/star and @arclux/arc-ui/icons/lucide/arrow-right for direct static imports.
Full-library opt-in — import icons from '@arclux/arc-ui/icons/phosphor' still works for use cases that need all icons (e.g. icon pickers).

Breaking Changes

iconRegistry.get() is now async — Returns a Promise<string | null> instead of a string. This only affects code that calls get() directly; <arc-icon> handles this internally.
iconRegistry.list() is now async — Returns a Promise<string[]>. Update any direct callers to await the result.

Bundle Impact

0 icons used — Before: +1.6MB. After: +0KB.
1 icon used — Before: +1.6MB. After: ~500 bytes (lazy).
10 icons used — Before: +1.6MB. After: ~5KB (lazy).
Full library (explicit import) — Before: +1.6MB. After: +817KB (opt-in).

v1.8.6 — Theme Toggle Icon-Only Size Fix

Bug Fixes

Theme toggle icon-only size — No, actually fixed this time. Restored 36px dimensions to match arc-icon-button, with --touch-min as a floor for mobile.

v1.8.5 — Theme Toggle Padding Fix

Bug Fixes

Theme toggle padding — Restored desktop padding on arc-theme-toggle after v1.8.4 got a little too enthusiastic with the touch target tokens.

v1.8.4 — Mobile Touch Targets, Code Block Fix

Improvements

Mobile touch targets — 8 interactive components now scale up on touch devices via --touch-min / --touch-pad tokens: arc-icon-button, arc-toggle, arc-input, arc-select, arc-pagination, arc-theme-toggle, arc-tag, and arc-chip.
Touch token tuning — Mobile touch targets set to 36px min-height / 8px padding (up from 24px/4px desktop defaults).

Bug Fixes

Code block basic variant — Single-line code now vertically centers alongside the copy button instead of sitting at the top.

v1.8.3 — Rename tokens.css → base.css, FOUC Prevention

Breaking Changes

Renamed tokens.css → base.css — The stylesheet contains design tokens, theme overrides, and touch media queries. Update imports from @arclux/arc-ui/tokens.css to @arclux/arc-ui/base.css.

New

FOUC prevention — base.css adds :not(:defined) { opacity: 0 } and each component's :host includes transition: opacity 150ms ease, so unregistered elements are hidden and fade in smoothly when their JS loads.

Infrastructure

Prism 1.2.2 — Updated @arclux/prism with renamed baseCSS config key.

v1.8.2 — Missing Subpath Exports

Adds missing per-component subpath exports and removes unused tier-level exports.

Bug Fixes

Missing subpath exports — Added ./cta-banner and ./input to package.json exports so import '@arclux/arc-ui/cta-banner' and import '@arclux/arc-ui/input' resolve correctly for tree-shaking.

Cleanup

Removed tier exports — Dropped ./content, ./feedback, ./navigation, ./layout, and ./shared tier-level subpath exports. Use per-component imports (@arclux/arc-ui/button) or the barrel (@arclux/arc-ui) instead.

v1.8.1 — Tree-Shaking Bugfix

Fixes named barrel imports like import { ArcButton } from '@arclux/arc-ui' being tree-shaken away by Vite/Rollup, causing components to silently not render.

Bug Fixes

Barrel now registers components — Tier index files (content/index.js, input/index.js, etc.) now re-export from .register.js files instead of pure class files. This means named imports through the barrel correctly call customElements.define() and are preserved by bundlers via the sideEffects field.
Stale docs imports — Fixed several docs pages still showing the pre-v1.8.0 import '@arclux/arc-ui' pattern which no longer registers components. Updated getting-started, frameworks, and data-table examples to use import '@arclux/arc-ui/register' or per-component imports.
CDN script tags — Fixed CDN <script> examples in getting-started and frameworks pages to point to @arclux/arc-ui/register instead of the bare entry point.

Docs

Import patterns callout — Getting-started page now documents the three import patterns and their tree-shaking trade-offs.

v1.8.0 — Tree-Shakeable Components

Component source files are now side-effect-free, enabling bundlers to tree-shake unused components. Registration is handled by generated .register.js files.

Breaking Changes

No auto-registration — import '@arclux/arc-ui' no longer registers custom elements as a side effect. Named imports still work and are now tree-shakeable. If you relied on the side-effect registration, switch to import '@arclux/arc-ui/register'.

New Consumer API

import { ArcButton } from '@arclux/arc-ui' — named class import. Registers all components via the barrel (not tree-shakeable). Fixed in v1.8.1 to actually call customElements.define().
import '@arclux/arc-ui/register' — registers all components (replaces bare side-effect import).
import '@arclux/arc-ui/button' — single component, auto-registered with its dependencies.

Infrastructure

Side-effect-free sources — Removed customElements.define() from all 117 component source files. Added @tag and @requires JSDoc annotations for metadata.
Registration generator — New scripts/generate-registrations.js produces per-component .register.js files and a top-level register.js during pnpm generate.
sideEffects — package.json now declares "sideEffects": ["./src/*/*.register.js", "./src/register.js"] so bundlers can drop unused modules.
Prism v1.2.1 — Parser extracts tag names from @tag JSDoc with fallback to customElements.define(). Ignore patterns support leading wildcards.

Docs

Homepage live demo — Expanded from 5 showcase cards to 10, covering buttons, badges & tags, inputs, feedback, toggles & checks, rating & slider, navigation (tabs + breadcrumb), data (avatars + stepper), accordion, and controls (segmented control + pagination).

Bug Fixes

Dashboard Grid — Fixed non-responsive layout when explicit columns attribute is set. The grid now uses auto-fill with a derived minimum column width so it wraps naturally on narrow viewports instead of forcing a fixed column count.

v1.7.2 — Themeable Syntax Highlighting

Enhancements

Code Block — Switched from baked hex Shiki themes to a CSS custom-properties theme. Syntax colors now derive from design tokens (--accent-primary, --accent-secondary, --color-success, etc.) so consumers can override them alongside the rest of the palette.
Code Block — Shiki core and regex engine are now lazy-loaded on first use, removing ~600KB from the initial bundle.

Infrastructure

Removed 9 redundant per-page import '@arclux/arc-ui' script tags — BaseLayout already loads the library globally.

v1.7.1 — Token Consolidation

Infrastructure

Single source of truth — Removed the duplicate tokens.js from the web-components package. shared/tokens.js is now the only token file.
Code Block — Fixed cross-package runtime import of shared/tokens.js that broke external consumers.

v1.7.0 — Code Block Variants

Code Block gains three visual variants and built-in Shiki syntax highlighting.

New Props

NavItem — Replaced muted boolean with a variant prop (default | primary | muted). The new primary variant renders accent-colored text and border in the resting state with a stronger glow on hover and active.
Code Block — Added variant prop with three modes:
- default — Header bar with filename (left) and language label (top-right), no status bar footer.
- window — macOS-style title bar with colored traffic-light orbs, centered filename, elevated shadow, and status bar footer with language + line count.
- basic — Minimal: no header, no footer, compact padding, inline copy button. Ideal for single-line snippets.

Enhancements

Code Block — Integrated Shiki syntax highlighting using fine-grained imports (shiki/core + shiki/engine/javascript) — no WASM, tree-shakable, with lazy per-language loading from @shikijs/langs.
Code Block — Custom arc-dark and arc-light syntax themes derived from the design token palette. Keywords use accent blue, strings use success green, constants use accent violet, and all colors cascade from shared/tokens.js.
Code Block — Dual-theme support via CSS light-dark() — syntax colors switch automatically with the site theme, no re-render needed.
Code Block — filename prop now reflects to the HTML attribute.
Code Block — Default variant moved language label from the status bar into the header bar (top-right) and removed the status bar footer for a cleaner look.
Code Block — Copy button repositioned inside the code body so it sits in the same spot across default and window variants.

Infrastructure

Tokens — Added color-scheme: dark / color-scheme: light to the generated token CSS, enabling the CSS light-dark() function across all components.

Fixes

Copy Button — Replaced hardcoded dark backdrop (rgba(black, 0.6)) with theme-aware --bg-elevated token so the button renders correctly in light mode.

v1.6.0 — New Component Props

New props across six components — semantic status variants for Badge, layout controls for Divider, and form-critical props for Input, Button, and Select.

New Props

Badge — Added success, warning, error, and info semantic variants. Added color prop for custom RGB colors.
Divider — Added align prop (left/right) for asymmetric gradient origins and vertical prop for inline separators.
Input — Added value prop for controlled-component patterns and rows prop for multiline textarea height.
Button — Added type prop (button/submit/reset) for native form submission behavior.
Select — Added open prop for programmatic dropdown control.

Fixes

Accordion — Removed incorrect items prop from docs that never existed in the component.

v1.5.2 — Bug Fixes

Bug Fixes

Accordion chevron — Replaced the tiny Unicode triangle character with an 18px SVG chevron icon for proper sizing and crisp rendering.

v1.5.1 — Bug Fixes

Bug Fixes

Shadow DOM CSS reset — Added a universal reset (margin: 0; padding: 0; box-sizing: border-box) to the shared style module injected into every component. Consumer CSS resets (* { margin: 0 }) cannot cross shadow DOM boundaries, so browser user-agent defaults (e.g. h2 { margin: 0.83em 0 }) were leaking into component internals.
Boolean prop reflection — 11 boolean properties were missing reflect: true, preventing them from syncing back to HTML attributes when set via JavaScript. Affected props: Alert dismissible, Modal closable, Input required / multiline, DataTable sortable / selectable, ScrollToTop smooth, Form novalidate / error-summary, Link external, FileUpload multiple.

v1.5.0 — Utility Props Sweep

A comprehensive pass adding utility props across the entire component library. Most additions are pure CSS — no breaking changes.

New Props — High Impact

Button — loading prop shows a spinner and disables the button for async operations.
Input — error prop for inline validation messages with red border styling. size prop (sm/md/lg).
Card — padding prop (none/sm/md/lg) and interactive boolean for clickable cards without href.
Tabs — align prop (start/center/end) and variant prop (underline/pills).
Avatar — status indicator dot (online/offline/busy/away) and shape prop (circle/square/rounded).
Badge / Tag — size prop (sm/md/lg) for both components.
Container — size prop (sm/md/lg/xl/full) for max-width control. padding prop (none/sm/md/lg).
Breadcrumb — separator prop for custom separator characters (/, >, •).
TopBar — nav-align prop (left/center/right) to pin navigation within the center slot.

New Props — Form Controls

Checkbox / Toggle / RadioGroup — size prop (sm/md/lg) for all three.
Select — size prop (sm/md/lg) and error prop for validation state.
Textarea — size prop (sm/md/lg) and auto-resize boolean that grows the textarea to fit content.

New Props — Content & Navigation

Divider — label prop for labeled dividers (e.g. "OR" between form sections).
Stat — trend prop (up/down/neutral) with arrow indicator and change prop for percentage display.
Callout — dismissible boolean adds a close button and fires arc-dismiss.
Link — underline prop (hover/always/never) for fine-grained underline control.
Progress — show-value boolean displays the current percentage.
Sidebar — position prop (left/right) moves the border to the opposite edge.
Footer — align prop (left/center) for centered footer layouts.

New Props — Feedback & Layout

Modal — fullscreen boolean for full-viewport modals on mobile.
Alert — compact boolean reduces padding and font sizes for inline use.
Toast — show() now accepts actionLabel, action callback, and persistent to prevent auto-dismiss.
Accordion — multiple boolean allows multiple panels open simultaneously.
Skeleton — count prop renders multiple stacked skeleton items.
Pagination — compact boolean shows only prev/next with a "current / total" label.

Docs

See Also links — Every component page now shows a "See Also" section linking to related components and guide pages. Guide pages also cross-link to each other. Helps users discover related components and navigate between docs naturally.

v1.4.0 — Component Composition & Token Infrastructure

Refactors

Shared style modules — Extracted reusable style sheets into composable modules that multiple components import:
- button-styles.js — variant styles (secondary, ghost, focus, disabled) shared by Button, IconButton, and Chip
- card-styles.js — hover glow and gradient border shared by Card and FeatureCard
- status-styles.js — status color CSS custom properties shared by Alert, Callout, and Toast
- status-utils.js — status icon resolver shared by Alert, Callout, and Toast
Callout — Now uses status color tokens for border and background tinting instead of neutral card styling. Icon color matches the variant.
TopBar — Added inner content wrapper to separate backdrop/border from flex layout, exposing a content CSS part.

Infrastructure

Token single source of truth — shared/tokens.js is now the sole source. tokens.css is generated from it. pnpm generate runs token generation then Prism.
Fixed focus-glow drift — Shadow DOM fallbacks had different --focus-ring and --focus-glow values than the CSS file. Both now derive from tokens.focus.
Light theme completeness — lightTokens now includes gradient, glow-line, and utility overrides that were previously only in hand-maintained CSS.

v1.3.0 — Visual Refinements

Enhancements

Badge — Switched to mono font with no uppercase for a quieter, code-like appearance. Added color prop accepting an RGB triplet (same API as Tag).
Tag — Increased vertical padding for more visual prominence. Removed min-height constraint so tags are naturally taller than badges when side by side.
Toggle — Label now uses the primary body font instead of the accent font, with normal casing.

Docs

Component page header: tier and interactivity labels now use arc-tag with custom color props instead of arc-badge.

v1.2.0 — Component Enhancements

Enhancements

Input — Added prefix and suffix slots for placing icons or inline adornments inside the field box. The input/textarea is now wrapped in a flex container that holds the border and focus styles.
Tag — Added color prop accepting an RGB triplet (e.g. "77, 126, 247") for custom category colours. Overrides variant colours for border, text, background, and hover glow.
Button — Added prefix and suffix slots for icons alongside the button label. Both <button> and <a> render paths support slots.

v1.1.0 — New Components & Enhancements

New Component

CTA Banner (arc-cta-banner) — Full-width call-to-action banner with gradient background, eyebrow text, headline, and actions slot. Replaces inline CSS patterns on landing pages.

Enhancements

Card — Added footer slot for action buttons, links, or metadata. Hides automatically when empty.
PageHeader — Replaced semantic slots (breadcrumb, actions, tabs) with positional slots (above, aside, below). Added border prop to opt-in to the bottom border (now off by default).
Form — Added loading prop to prevent double-submit, disabled prop that propagates to all child controls, error-summary with rendered error list, formData in event detail, and arc-reset event.
NavItem — Added muted prop for subdued navigation items that render with lighter text and no border. Supported in both desktop and mobile views.

Docs

Homepage CTA section now uses arc-cta-banner, removing ~50 lines of inline CSS.
Fixed navigation menu preview dropdown overflow and hover bleed.
Fixed container preview overflow by using simulated layout.
Dashboard grid preview: labels now use accent font (Tektur), numbers use body font (Host Grotesk).

v1.0.0 — Initial Release

The first stable release of ARC UI. Includes 152 components across 5 tiers, framework wrappers for React, Vue, Svelte, Angular, Solid, and Preact, standalone CSS output, and a comprehensive design token system with dark and light themes.

Components

All 152 components ship as Lit web components with zero external dependencies beyond Lit itself.

Data

Animated Number Badge Comparison Countdown Timer Data Table Description List Diff Key Value List Meter Sparkline Stat Stepper Table Tag Timeline Value Card

Typography

Blockquote Code Block Gradient Text Highlight Kbd Markdown Number Format Prose Text Time Ago Truncate Typewriter

Framework Wrappers

Generated by Prism, our custom code generator that reads the Lit source and produces idiomatic bindings for each framework:

@arclux/arc-ui-react — React 18+ via @lit/react
@arclux/arc-ui-vue — Vue 3.3+
@arclux/arc-ui-svelte — Svelte 5+
@arclux/arc-ui-angular — Angular 17+ standalone components
@arclux/arc-ui-solid — Solid 1.8+
@arclux/arc-ui-preact — Preact 10.19+
@arclux/arc-ui-html — Standalone CSS + HTML examples

Design Tokens

The v1.0 token set includes 90+ CSS custom properties covering color, typography, spacing, shadows, gradients, glows, z-index, breakpoints, motion, and focus styles. Both dark and light themes are fully defined. See the Tokens page for the full reference.