### Install Dependencies and Start Dev Server

Source: https://github.com/arclight-digital/arc-ui/blob/main/CONTRIBUTING.md

Steps to clone the repository, install dependencies using pnpm, and start the Astro development server.

```bash
git clone https://github.com/<your-username>/arc-ui.git
cd arc-ui
pnpm install

cd demo
npx astro dev
```

--------------------------------

### Installation

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/solid/README.md

Install the necessary packages for @arclux/arc-ui-solid.

```bash
npm install @arclux/arc-ui-solid @arclux/arc-ui
```

--------------------------------

### Development Commands

Source: https://github.com/arclight-digital/arc-ui/blob/main/README.md

Commands for installing dependencies, starting the dev server, and regenerating code.

```bash
pnpm install          # Install dependencies
pnpm dev              # Start Astro docs dev server
pnpm generate         # Regenerate tokens + all framework wrappers
```

--------------------------------

### Installation

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/vue/README.md

Install the necessary packages for @arclux/arc-ui-vue.

```bash
npm install @arclux/arc-ui-vue @arclux/arc-ui
```

--------------------------------

### Installation

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/preact/README.md

Install the preact component wrappers and the core ARC UI package.

```bash
npm install @arclux/arc-ui-preact @arclux/arc-ui
```

--------------------------------

### Installation

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/angular/README.md

Install the necessary packages for @arclux/arc-ui-angular.

```bash
npm install @arclux/arc-ui-angular @arclux/arc-ui
```

--------------------------------

### Installation

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/svelte/README.md

Install the necessary packages for @arclux/arc-ui-svelte.

```bash
npm install @arclux/arc-ui-svelte @arclux/arc-ui
```

--------------------------------

### Inline Code Block Example

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/examples/code-block.inline.html

This example shows how an inline code block is rendered.

```html
.arc-code-block .code-block__copy:hover { color: rgb(232, 232, 236); border-color: rgb(51, 51, 64); }

Filename Language _copied

    Code
```

--------------------------------

### Usage - HTML Examples

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/web-components/README.md

Examples of using arc-button, arc-card, and arc-input components.

```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>
```

--------------------------------

### Installation

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/README.md

Install the @arclux/arc-ui-html package using npm.

```bash
npm install @arclux/arc-ui-html
```

--------------------------------

### Usage

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/solid/README.md

Example of how to use Solid component wrappers from @arclux/arc-ui-solid.

```tsx
import { Button, Card, Input } from '@arclux/arc-ui-solid';

export default function App() {
  return (
    <>
      <Button variant="primary" onClick={() => console.log('clicked')}>
        Get Started
      </Button>
      <Card>
        <h3>Card Title</h3>
        <p>Card content.</p>
      </Card>
      <Input label="Email" type="email" placeholder="you@example.com" />
    </>
  );
}
```

--------------------------------

### Install ARC UI and Lit

Source: https://github.com/arclight-digital/arc-ui/blob/main/README.md

Install the core ARC UI package and Lit for web component development.

```bash
npm install @arclux/arc-ui lit
```

--------------------------------

### Top Bar CSS

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/examples/top-bar.inline.html

CSS for the top bar, including responsive behavior for the menu button.

```css
@media (max-width: 768px) { .arc-top-bar .topbar__menu-btn { display: flex; } } .arc-top-bar .topbar__menu-btn:hover { background: rgba(255, 255, 255, 0.05); }
```

--------------------------------

### Usage

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/angular/README.md

Example of how to use the Angular standalone components.

```typescript
import { Component } from '@angular/core';
import { Button, Card, Input } from '@arclux/arc-ui-angular';

@Component({
  standalone: true,
  imports: [Button, Card, Input],
  template: `
    <arc-button variant="primary" (click)="onClick()">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>
  `,
})
export class AppComponent {
  onClick() {
    console.log('clicked');
  }
}
```

--------------------------------

### Install ARC UI React Package

Source: https://github.com/arclight-digital/arc-ui/blob/main/README.md

Install the specific package for using ARC UI components with React.

```bash
npm install @arclux/arc-ui-react
```

--------------------------------

### Inline Link CSS and HTML

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/examples/link.inline.html

Demonstrates the styling and basic structure for an inline link.

```html
.arc-link .link:hover { text-decoration: underline; text-underline-offset: 3px; } .arc-link[data-variant="muted"] .link:hover { color: rgb(232, 232, 236); } .arc-link[data-variant="nav"] .link:hover { color: rgb(232, 232, 236); text-decoration: none; } .arc-link .link:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(3, 3, 7), 0 0 0 4px rgb(77, 126, 247); border-radius: 2px; } [Link External](#)
```

--------------------------------

### CSS Design Tokens Example

Source: https://github.com/arclight-digital/arc-ui/blob/main/README.md

Example of overriding base CSS custom properties for accent colors to customize the theme.

```css
:root {
  --accent-primary:       rgb(16, 185, 129);
  --accent-primary-rgb:   16, 185, 129;
  --accent-secondary:     rgb(6, 182, 212);
  --accent-secondary-rgb: 6, 182, 212;
}
```

--------------------------------

### HTML Markup Example

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/README.md

Example of HTML markup for an ARC UI button component with variants and size attributes.

```html
<span class="arc-button" data-variant="primary" data-size="lg">
  <button class="btn">Get Started</button>
</span>
```

--------------------------------

### Installation

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/react/README.md

Install the @arclux/arc-ui-react package and its peer dependency @arclux/arc-ui. Requires React version 18.0.0 or higher.

```bash
npm install @arclux/arc-ui-react @arclux/arc-ui
```

--------------------------------

### Button CSS

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/examples/button.inline.html

CSS rules for different button variants and states (hover, active, focus-visible).

```css
.arc-button:not([data-variant]) .btn:hover, .arc-button[data-variant="primary"] .btn:hover { box-shadow: 0 0 8px rgba(77,126,247,0.9), 0 0 20px rgba(77,126,247,0.5), 0 0 44px rgba(77,126,247,0.25), 0 0 80px rgba(77,126,247,0.1); }
.arc-button:not([data-variant]) .btn:active, .arc-button[data-variant="primary"] .btn:active { transform: scale(0.97); box-shadow: 0 0 8px rgba(77, 126, 247,0.5); }
.arc-button[data-variant="secondary"] .btn:hover { border-color: rgb(77, 126, 247); color: rgb(77, 126, 247); box-shadow: 0 0 20px rgba(77, 126, 247, 0.15); }
.arc-button[data-variant="secondary"] .btn:active { transform: scale(0.97); background: rgba(77, 126, 247,0.05); }
.arc-button[data-variant="ghost"] .btn:hover { color: rgb(232, 232, 236); background: rgba(255, 255, 255,0.03); }
.arc-button[data-variant="ghost"] .btn:active { transform: scale(0.97); background: rgba(255, 255, 255,0.06); }
.arc-button .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(3, 3, 7), 0 0 0 4px rgb(77, 126, 247), 0 0 16px rgba(77,126,247,0.3); }
```

--------------------------------

### Install command

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/brand/README.md

Command to add the @arclux/brand package to a project.

```bash
pnpm add @arclux/brand
```

--------------------------------

### Skip Link CSS

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/examples/skip-link.inline.html

CSS styles for the skip link, including focus-visible state.

```css
.arc-skip-link .skip-link:focus-visible {
  transform: translateX(-50%) translateY(0);
  box-shadow: 0 0 0 1px rgba(var(--accent-primary-rgb),0.2), 0 0 6px rgba(var(--accent-primary-rgb),0.35), 0 0 16px rgba(var(--accent-primary-rgb),0.2), 0 0 40px rgba(139, 92, 246,0.12), 0 0 20px rgba(77, 126, 247, 0.3);
  outline: none;
}
```

--------------------------------

### Value Card CSS

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/examples/value-card.inline.html

CSS for the value card component, including a hover effect.

```css
.arc-value-card .card:hover { border-color: rgb(51, 51, 64); box-shadow: 0 0 20px rgba(139, 92, 246,0.06); }
```

--------------------------------

### Usage

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/vue/README.md

Example of how to use @arclux/arc-ui-vue components in a Vue 3 application.

```vue
<script setup>
import { Button, Card, Input } from '@arclux/arc-ui-vue';
</script>

<template>
  <Button variant="primary" @click="console.log('clicked')">
    Get Started
  </Button>

  <Card>
    <h3>Card Title</h3>
    <p>Card content.</p>
  </Card>

  <Input label="Email" type="email" placeholder="you@example.com" />
</template>
```

--------------------------------

### Basic ARC UI Components

Source: https://github.com/arclight-digital/arc-ui/blob/main/README.md

Example of using ARC UI button and card components in HTML.

```html
<arc-button variant="primary">Get Started</arc-button>
<arc-card>
  <span slot="heading">Hello, ARC</span>
  <p>A card with gradient hover borders and ambient glow.</p>
</arc-card>
```

--------------------------------

### Icon Button CSS

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/examples/icon-button.inline.html

CSS rules for styling icon buttons, including hover, active, and focus states for different variants (ghost, secondary, primary).

```css
.arc-icon-button:not([data-variant]) .btn:hover, .arc-icon-button[data-variant="ghost"] .btn:hover { color: rgb(232, 232, 236); background: rgba(255, 255, 255, 0.05); }
.arc-icon-button:not([data-variant]) .btn:active, .arc-icon-button[data-variant="ghost"] .btn:active { transform: scale(0.93); background: rgba(255, 255, 255, 0.08); }
.arc-icon-button[data-variant="secondary"] .btn:hover { border-color: rgb(77, 126, 247); color: rgb(77, 126, 247); box-shadow: 0 0 16px rgba(77, 126, 247, 0.15); }
.arc-icon-button[data-variant="secondary"] .btn:active { transform: scale(0.93); background: rgba(77, 126, 247, 0.05); }
.arc-icon-button[data-variant="primary"] .btn:hover { box-shadow: 0 0 8px rgba(77,126,247,0.9), 0 0 20px rgba(77,126,247,0.5), 0 0 44px rgba(77,126,247,0.25), 0 0 80px rgba(77,126,247,0.1); }
.arc-icon-button[data-variant="primary"] .btn:active { transform: scale(0.93); box-shadow: 0 0 8px rgba(77, 126, 247, 0.5); }
.arc-icon-button .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(3, 3, 7), 0 0 0 4px rgb(77, 126, 247), 0 0 16px rgba(77,126,247,0.3); }
```

--------------------------------

### Meter Inline CSS

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/examples/meter.inline.html

CSS for the meter component, including accessibility adjustments for reduced motion.

```css
@media (prefers-reduced-motion: reduce) { .arc-meter \*, .arc-meter \*::before, .arc-meter \*::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }
```

--------------------------------

### "ARCLIGHT" text in Host Grotesk

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/brand/README.md

Examples of using the `<arclight-wordmark>` component with different sizes.

```html
<arclight-wordmark size="sm"></arclight-wordmark>
<arclight-wordmark size="md"></arclight-wordmark>
<arclight-wordmark size="lg"></arclight-wordmark>
```

--------------------------------

### "BY [logo] ARCLIGHT" attribution badge

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/brand/README.md

Example of using the `<arclight-by>` component.

```html
<arclight-by></arclight-by>
```

--------------------------------

### Logo + wordmark lockup

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/brand/README.md

Examples of using the `<arclight-logo-wordmark>` component with different layouts.

```html
<arclight-logo-wordmark layout="inline"></arclight-logo-wordmark>
<arclight-logo-wordmark layout="stacked"></arclight-logo-wordmark>
```

--------------------------------

### Contact Form Example

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/examples/form.html

This snippet shows the HTML structure for a contact form, including input fields for name, email, subject (with a select dropdown), message, a newsletter subscription checkbox, and radio buttons for priority. It also includes buttons for sending the message and resetting the form.

```html
<form>
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <label for="subject">Subject</label>
  <select id="subject" name="subject">
    <option value="">Select a topic...</option>
    <option value="general">General Inquiry</option>
    <option value="support">Technical Support</option>
    <option value="billing">Billing</option>
    <option value="partnership">Partnership</option>
  </select>

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="4" required></textarea>

  <label>
    <input type="checkbox" name="newsletter"> Subscribe to newsletter
  </label>

  <p>Priority</p>
  <label>
    <input type="radio" name="priority" value="low"> Low
  </label>
  <label>
    <input type="radio" name="priority" value="medium"> Medium
  </label>
  <label>
    <input type="radio" name="priority" value="high"> High
  </label>

  <button type="submit">Send Message</button>
  <button type="reset">Reset</button>
</form>
```

--------------------------------

### Feature Card Inline Styles

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/examples/feature-card.inline.html

This CSS defines the styles for the feature card component, including responsive adjustments and hover effects.

```css
@media (max-width: 768px) { .arc-feature-card .card__inner { padding: 24px 16px; } }
.arc-feature-card .card:hover { background: linear-gradient(135deg, rgba(77, 126, 247,0.3), rgba(139, 92, 246,0.15), rgb(34, 34, 41)); }
.arc-feature-card .card:hover .card__inner { box-shadow: inset 0 1px 0 rgba(255, 255, 255,0.04), 0 4px 24px rgba(0,0,0,0.2); }
.arc-feature-card .card:hover .card__icon { border-color: rgba(77, 126, 247,0.3); box-shadow: 0 0 20px rgba(77, 126, 247, 0.2), 0 0 6px rgba(77, 126, 247, 0.12); transform: translateY(-2px); }
.arc-feature-card .card:hover .card__title { color: #fff; }
.arc-feature-card .card:hover .card__rule { opacity: 0.5; width: 48px; }
.arc-feature-card .card:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(3, 3, 7), 0 0 0 4px rgb(77, 126, 247), 0 0 16px rgba(77,126,247,0.3); border-radius: 14px;
```

--------------------------------

### Standalone logo mark

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/brand/README.md

Examples of using the `<arclight-logo>` component with different sizes.

```html
<arclight-logo size="sm"></arclight-logo>
<arclight-logo size="lg"></arclight-logo>
```

--------------------------------

### Color Swatch Hover Style

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/examples/color-swatch.inline.html

This CSS defines the hover effect for a color swatch, including border color and box shadow.

```css
.arc-color-swatch .swatch__color:hover { border-color: rgb(51, 51, 64); box-shadow: 0 0 12px rgba(77, 126, 247, 0.1); }
```

--------------------------------

### Using ARC UI Components in React

Source: https://github.com/arclight-digital/arc-ui/blob/main/README.md

Example of importing and using ARC UI Button and Card components within a React application.

```tsx
import { Button, Card } from '@arclux/arc-ui-react';

function App() {
  return (
    <Card heading="Hello, ARC">
      <Button variant="primary">Get Started</Button>
    </Card>
  );
}
```

--------------------------------

### "POWERED BY [logo] ARCLIGHT" attribution badge

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/brand/README.md

Examples of using the `<arclight-powered-by>` component with different sizes.

```html
<arclight-powered-by size="sm"></arclight-powered-by>
<arclight-powered-by size="md"></arclight-powered-by>
```

--------------------------------

### Avatar Hover Style

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/examples/avatar.inline.html

This CSS rule defines the visual changes applied when a user hovers over an avatar element.

```css
.arc-avatar .avatar:hover { border-color: rgb(51, 51, 64); box-shadow: 0 0 12px rgba(77, 126, 247, 0.15); }
```

--------------------------------

### Inline Markdown Styling

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/examples/markdown.inline.html

This CSS rule applies styles to elements within the .arc-markdown container, specifically targeting links for underline on hover and handling reduced motion preferences.

```css
@media (prefers-reduced-motion: reduce) { .arc-markdown \*, .arc-markdown \*::before, .arc-markdown \*::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } .arc-markdown .markdown a:hover { text-decoration: underline; }
```

--------------------------------

### Scroll Indicator CSS

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/examples/scroll-indicator.inline.html

This CSS rule ensures the scroll indicator's transition is disabled when the user prefers reduced motion.

```css
@media (prefers-reduced-motion: reduce) { .arc-scroll-indicator .bar__fill { transition: none; } }
```

--------------------------------

### Basic Usage

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/svelte/README.md

Demonstrates how to import and use Button, Card, and Input components from @arclux/arc-ui-svelte.

```svelte
<script>
  import { Button, Card, Input } from '@arclux/arc-ui-svelte';
</script>

<Button variant="primary" on:click={() => console.log('clicked')}> 
  Get Started
</Button>

<Card>
  <h3>Card Title</h3>
  <p>Card content.</p>
</Card>

<Input label="Email" type="email" placeholder="you@example.com" />
```

--------------------------------

### Preview command

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/brand/README.md

Command to run a preview server for the brand package.

```bash
cd packages/brand && pnpm preview
```

--------------------------------

### Project Structure

Source: https://github.com/arclight-digital/arc-ui/blob/main/README.md

Directory structure of the arc-ui project.

```bash
arc-ui/
  shared/
    tokens.js               # Design tokens (JS source of truth)
    base.css                 # Generated from tokens.js
  packages/
    web-components/          # Lit source — canonical component code
    react/                   # Generated by Prism
    vue/                     # Generated by Prism
    svelte/                  # Generated by Prism
    angular/                 # Generated by Prism
    solid/                   # Generated by Prism
    preact/                  # Generated by Prism
    html/css/                # Generated standalone CSS
    html/examples/           # Generated HTML examples
    brand/                   # Logo and brand assets (@arclux/brand)
  docs/                      # Astro documentation site (arcui.dev)
```

--------------------------------

### Importing from Subpaths

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/svelte/README.md

Shows how to import components from specific subpaths for better organization.

```svelte
<script>
  import { Button } from '@arclux/arc-ui-svelte/input';
  import { Card }   from '@arclux/arc-ui-svelte/content';
  import { AppShell } from '@arclux/arc-ui-svelte/layout';
</script>
```

--------------------------------

### Auth Shell Responsive Styles

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/examples/auth-shell.inline.html

CSS rules for making the Auth Shell responsive on smaller screens.

```css
@media (max-width: 768px) { .arc-auth-shell .auth-shell--split { grid-template-columns: 1fr; } } @media (max-width: 768px) { .arc-auth-shell .auth-shell--split .aside-side { display: none; } }
```

--------------------------------

### Prism Generation Command

Source: https://github.com/arclight-digital/arc-ui/blob/main/README.md

Command to generate framework wrappers and tokens.

```bash
pnpm generate
```

--------------------------------

### Usage - Importing Components

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/web-components/README.md

Import all components or individual components for smaller bundles.

```javascript
// Import all components
import '@arclux/arc-ui';

// Or import individually for smaller bundles
import '@arclux/arc-ui/button';
import '@arclux/arc-ui/card';
```

--------------------------------

### Responsive Styles for App Shell

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/examples/app-shell.inline.html

CSS media queries to control the visibility of the table of contents and sidebar based on screen width.

```css
@media (max-width: 1280px) { .arc-app-shell .shell\_\_toc { display: none; } } @media (max-width: 768px) { .arc-app-shell .shell\_\_sidebar { display: none; } } @media (max-width: 768px) { .arc-app-shell(\[sidebar-open\]) .shell\_\_sidebar { display: block; } }
```

--------------------------------

### Usage

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/preact/README.md

Import and use Preact components from the @arclux/arc-ui-preact package.

```tsx
import { Button, Card, Input } from '@arclux/arc-ui-preact';

export function App() {
  return (
    <>
      <Button variant="primary" onClick={() => console.log('clicked')}>
        Get Started
      </Button>
      <Card>
        <h3>Card Title</h3>
        <p>Card content.</p>
      </Card>
      <Input label="Email" type="email" placeholder="you@example.com" />
    </>
  );
}
```

--------------------------------

### Usage - Individual Component CSS

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/README.md

Import individual component CSS files. Design tokens must be loaded separately.

```html
<link rel="stylesheet" href="node_modules/@arclux/arc-ui-html/css/button.css" />
<link rel="stylesheet" href="node_modules/@arclux/arc-ui-html/css/card.css" />
```

--------------------------------

### Importing from subpaths

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/solid/README.md

Components can be imported from specific subpaths for better organization.

```tsx
import { Button } from '@arclux/arc-ui-solid/input';
import { Card }   from '@arclux/arc-ui-solid/content';
import { AppShell } from '@arclux/arc-ui-solid/layout';
```

--------------------------------

### ARC UI via CDN (Zero JS)

Source: https://github.com/arclight-digital/arc-ui/blob/main/README.md

Include ARC UI's CSS for standalone HTML/CSS usage via CDN.

```html
<link rel="stylesheet" href="https://unpkg.com/@arclux/arc-ui-html/css/arc-ui.css">

<button class="arc-button" data-variant="primary">Get Started</button>
```

--------------------------------

### Usage - Bundled CSS

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/README.md

Include the bundled CSS file for all components and design tokens.

```html
<link rel="stylesheet" href="node_modules/@arclux/arc-ui-html/css/arc-ui.css" />
```

--------------------------------

### Importing from subpaths

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/preact/README.md

Components can be imported from specific subpaths based on their category.

```tsx
import { Button } from '@arclux/arc-ui-preact/input';
import { Card }   from '@arclux/arc-ui-preact/content';
import { AppShell } from '@arclux/arc-ui-preact/layout';
```

--------------------------------

### Theme Mode HTML Attributes

Source: https://github.com/arclight-digital/arc-ui/blob/main/README.md

Demonstrates how to set the theme mode (dark, light, auto) using an HTML attribute.

```html
<html data-theme="dark">   <!-- Default -->
<html data-theme="light">  <!-- Light theme -->
<html data-theme="auto">   <!-- Follow OS preference -->
```

--------------------------------

### Importing Components

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/vue/README.md

Components can be imported from subpaths based on their category.

```js
import { Button } from '@arclux/arc-ui-vue/input';
import { Card }   from '@arclux/arc-ui-vue/content';
import { AppShell } from '@arclux/arc-ui-vue/layout';
```

--------------------------------

### Loading Overlay CSS

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/examples/loading-overlay.inline.html

CSS for the loading overlay, including adjustments for reduced motion.

```css
@media (prefers-reduced-motion: reduce) { .arc-loading-overlay .loading-overlay__spinner { animation-duration: 1.5s; } }
@media (prefers-reduced-motion: reduce) { .arc-loading-overlay .loading-overlay { transition: none; } }
```

--------------------------------

### Responsive Settings Layout Adjustments

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/examples/settings-layout.inline.html

CSS rules to adjust the settings layout for smaller screens, specifically targeting the left panel and navigation.

```css
@media (max-width: 768px) { .arc-settings-layout .settings-layout--left { display: flex; flex-direction: column; } }
@media (max-width: 768px) { .arc-settings-layout .settings-layout--left .nav { border-right: none; border-bottom: 1px solid rgb(24, 24, 30); } }
```

--------------------------------

### Component Imports

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/brand/preview.html

Imports for various Arclight brand components used in the preview.

```javascript
import './src/components/logo.js';
import './src/components/wordmark.js';
import './src/components/logo-wordmark.js';
import './src/components/by-arclight.js';
import './src/components/powered-by.js';
import './src/components/brand-colors.js';
import './src/components/loading.js';
import './src/components/favicon.js';
import './src/components/watermark.js';
```

--------------------------------

### Body and Section Styling

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/brand/preview.html

CSS styles for the main body and section elements on the preview page.

```css
body {
  font-family: system-ui, sans-serif;
  background: var(--surface-primary, #0e0e12);
  color: var(--text-primary, #e8e8ec);
  margin: 0;
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

h2 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.5;
  margin: 0;
}

.row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.label {
  font-size: 12px;
  opacity: 0.4;
  min-width: 40px;
}
```

--------------------------------

### Theming - Light Mode

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/README.md

Set the theme to light mode by adding data-theme="light" to the html element.

```html
<html data-theme="light">
```

--------------------------------

### Importing Components

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/angular/README.md

Components can be imported from subpaths based on their category.

```typescript
import { Button } from '@arclux/arc-ui-angular/input';
import { Card }   from '@arclux/arc-ui-angular/content';
import { AppShell } from '@arclux/arc-ui-angular/layout';
```

--------------------------------

### Dock CSS

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/examples/dock.inline.html

CSS rules for the Dock component, handling positioning (bottom, left, right) and auto-hide behavior with hover and open states. It also includes a box-shadow effect on hover or when open.

```css
.arc-dock([position="bottom"][auto-hide]:not([open]):not(:hover)) .dock { transform: translateY(100%); }
.arc-dock([position="left"][auto-hide]:not([open]):not(:hover)) .dock { transform: translateX(-100%); }
.arc-dock([position="right"][auto-hide]:not([open]):not(:hover)) .dock { transform: translateX(100%); }
.arc-dock([auto-hide]) .dock:hover, .arc-dock([auto-hide][open]) .dock {
  box-shadow: 0 0 20px rgba(77, 126, 247, 0.08);
}
```

--------------------------------

### Theming - Auto Mode

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/README.md

Set the theme to auto mode by adding data-theme="auto" to the html element.

```html
<html data-theme="auto">
```

--------------------------------

### Regenerate Framework Bindings

Source: https://github.com/arclight-digital/arc-ui/blob/main/CONTRIBUTING.md

Command to run the Prism code generator to update framework bindings after modifying a web component.

```bash
cd packages/prism-generator
node src/cli.js
```

--------------------------------

### Comparison Component CSS

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/examples/comparison.inline.html

CSS for the comparison component, including styles for reduced motion.

```css
@media (prefers-reduced-motion: reduce) { .arc-comparison \*, .arc-comparison \*::before, .arc-comparison \*::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } .arc-comparison .row:hover > .cell { background: rgba(255, 255, 255, 0.04); } .arc-comparison .row:hover > .cell--highlight { background: rgba(77, 126, 247, 0.06); }
```

--------------------------------

### Usage

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/react/README.md

Import and use ARC UI React components in your application. Components can be imported directly or from subpaths.

```tsx
import { Button, Card, Input } from '@arclux/arc-ui-react';

function App() {
  return (
    <>
      <Button variant="primary" onClick={() => console.log('clicked')}>
        Get Started
      </Button>
      <Card>
        <h3>Card Title</h3>
        <p>Card content.</p>
      </Card>
      <Input
        label="Email"
        type="email"
        placeholder="you@example.com"
        onArcInput={(e) => console.log(e.detail.value)}
      />
    </>
  );
}
```

```tsx
import { Button } from '@arclux/arc-ui-react/input';
import { Card }   from '@arclux/arc-ui-react/content';
import { AppShell } from '@arclux/arc-ui-react/layout';
```

--------------------------------

### Styling Components

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/web-components/README.md

Override component styles using CSS custom properties or ::part() selectors.

```css
arc-button {
  --accent-primary: #3b82f6;
}
```

--------------------------------

### Card Styling and Hover Effects

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/examples/card.inline.html

This CSS defines the styling for a card component, including responsive adjustments, hover effects with gradients, focus styles, and inner shadow effects on hover.

```css
@media (max-width: 768px) { .arc-card .card__inner { padding: 24px 16px; } }
.arc-card[href] .card:hover { background: linear-gradient(135deg, rgba(77, 126, 247,0.3), rgba(139, 92, 246,0.15), rgb(34, 34, 41)); }
.arc-card .card:hover .card__inner { box-shadow: inset 0 1px 0 rgba(255, 255, 255,0.04), 0 4px 24px rgba(0,0,0,0.2); }
.arc-card .card:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(3, 3, 7), 0 0 0 4px rgb(77, 126, 247), 0 0 16px rgba(77,126,247,0.3); border-radius: 14px; }
```

--------------------------------

### Responsive Sidebar Adjustment

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/examples/page-layout.inline.html

This CSS adjusts the page layout for smaller screens when a sidebar is present, changing the grid template columns to a single column.

```css
@media (max-width: 768px) { .arc-page-layout([layout='sidebar-left']) .page-layout, .arc-page-layout([layout='sidebar-right']) .page-layout { grid-template-columns: 1fr; } }
```

--------------------------------

### Scroll Area CSS

Source: https://github.com/arclight-digital/arc-ui/blob/main/packages/html/examples/scroll-area.inline.html

CSS for the scroll area, including styles for reduced motion and custom scrollbar thumb.

```css
@media (prefers-reduced-motion: reduce) { .arc-scroll-area \*, .arc-scroll-area \*::before, .arc-scroll-area \*::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } .arc-scroll-area .scroll-area::-webkit-scrollbar-thumb:hover { background: rgb(110, 115, 155); }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.