@arclux/arc-ui-html 1.0.0

package/examples/color-swatch.html

@@ -0,0 +1,12 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-color-swatch — requires color-swatch.css + tokens.css (or arc-ui.css) -->
+<span class="arc-color-swatch">
+  <div class="swatch">
+   <div
+   class="swatch__color"
+   style="background-color:Color"
+   role="img"
+   ></div>
+   <span class="swatch__label"></span>
+   </div>
+</span>

package/examples/color-swatch.inline.html

@@ -0,0 +1,16 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-color-swatch — self-contained, no external CSS needed -->
+<style>
+  .arc-color-swatch .swatch__color:hover { border-color: rgb(51, 51, 64);
+        box-shadow: 0 0 12px rgba(77, 126, 247, 0.1); }
+</style>
+<span class="arc-color-swatch" style="display: inline-flex">
+  <div class="swatch" style="display: flex; flex-direction: column; align-items: center; gap: 8px">
+   <div
+   class="swatch__color" style="border-radius: 10px; border: 1px solid rgb(34, 34, 41)"
+   style="background-color:Color"
+   role="img"
+   ></div>
+   <span style="font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: rgb(124, 124, 137); text-align: center; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap"></span>
+   </div>
+</span>

package/examples/container.html

@@ -0,0 +1,5 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-container — requires container.css + tokens.css (or arc-ui.css) -->
+<div class="arc-container">
+  <div class="container">Container</div>
+</div>

package/examples/container.inline.html

@@ -0,0 +1,5 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-container — self-contained, no external CSS needed -->
+<div class="arc-container" style="display: block">
+  <div style="width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 24px">Container</div>
+</div>

package/examples/dashboard-grid.html

@@ -0,0 +1,7 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-dashboard-grid — requires dashboard-grid.css + tokens.css (or arc-ui.css) -->
+<div class="arc-dashboard-grid">
+  <div class="dashboard-grid">
+   Dashboard Grid
+   </div>
+</div>

package/examples/dashboard-grid.inline.html

@@ -0,0 +1,10 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-dashboard-grid — self-contained, no external CSS needed -->
+<div class="arc-dashboard-grid" style="display: block; box-sizing: border-box">
+  <div style="display: grid; grid-template-columns: repeat(
+            auto-fill,
+            minmax(280px, 1fr)
+          ); gap: 24px; padding: 24px">
+   Dashboard Grid
+   </div>
+</div>

package/examples/divider.html

@@ -0,0 +1,5 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-divider — requires divider.css + tokens.css (or arc-ui.css) -->
+<div class="arc-divider">
+  <div class="divider" role="separator"></div>
+</div>

package/examples/divider.inline.html

@@ -0,0 +1,10 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-divider — self-contained, no external CSS needed -->
+<style>
+  @media (prefers-reduced-motion: reduce) {
+    .arc-divider[data-variant="glow"] .divider::after { animation: none; }
+  }
+</style>
+<div class="arc-divider" style="display: block; width: 100%">
+  <div class="divider" style="width: 100%; height: 1px" role="separator"></div>
+</div>

package/examples/empty-state.html

@@ -0,0 +1,14 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-empty-state — requires empty-state.css + tokens.css (or arc-ui.css) -->
+<div class="arc-empty-state">
+  <div class="empty" role="status">
+   <div class="empty__icon" aria-hidden="true">
+
+   </div>
+   Heading
+   Description text goes here
+   <div class="empty__actions">
+
+   </div>
+   </div>
+</div>

package/examples/empty-state.inline.html

@@ -0,0 +1,14 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-empty-state — self-contained, no external CSS needed -->
+<div class="arc-empty-state" style="display: block">
+  <div style="display: flex; flex-direction: column; align-items: center; text-align: center; padding: 64px 40px; border: 1px dashed rgb(34, 34, 41); border-radius: 14px; background: rgb(13, 13, 18)" role="status">
+   <div style="margin-bottom: 24px; color: rgb(107, 107, 128); font-size: 40px" aria-hidden="true">
+
+   </div>
+   Heading
+   Description text goes here
+   <div style="display: flex; gap: 8px">
+
+   </div>
+   </div>
+</div>

package/examples/feature-card.html

@@ -0,0 +1,12 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-feature-card — requires feature-card.css + tokens.css (or arc-ui.css) -->
+<div class="arc-feature-card">
+  <a class="card" href="#">
+   <div class="card__inner">
+   <div class="card__icon">★</div>
+   <h3 class="card__title">Heading</h3>
+   <p class="card__desc">Description text goes here</p>
+   <span class="card__rule"></span>
+   </div>
+   </a>
+</div>

package/examples/feature-card.inline.html

@@ -0,0 +1,25 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-feature-card — self-contained, no external CSS needed -->
+<style>
+  @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; }
+</style>
+<div class="arc-feature-card" style="display: block; height: 100%">
+  <a class="card" style="position: relative; border-radius: 14px; height: 100%; padding: 1px; background: rgb(24, 24, 30); text-decoration: none; display: flex; flex-direction: column" href="#">
+   <div class="card__inner" style="position: relative; background: rgb(13, 13, 18); border-radius: calc(14px - 1px); padding: 40px 24px; display: flex; flex-direction: column; gap: 16px; flex: 1; z-index: 1">
+   <div class="card__icon" style="width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(77, 126, 247, 0.06); border: 1px solid rgba(77, 126, 247, 0.12); color: rgb(77, 126, 247); font-size: 20px">★</div>
+   <h3 class="card__title" style="font-size: 17px; font-weight: 600; color: rgb(232, 232, 236); margin: 0">Heading</h3>
+   <p style="color: rgb(138, 138, 150); font-family: 'Host Grotesk', system-ui, sans-serif; font-size: 14px; line-height: 1.7; flex: 1; margin: 0">Description text goes here</p>
+   <span class="card__rule" style="width: 32px; height: 1px; background: linear-gradient(90deg, rgb(77, 126, 247), transparent); opacity: 0"></span>
+   </div>
+   </a>
+</div>

package/examples/footer.html

@@ -0,0 +1,18 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-footer — requires footer.css + tokens.css (or arc-ui.css) -->
+<div class="arc-footer">
+  <footer class="footer">
+   <div class="footer__brand">
+
+   </div>
+   <div class="footer__columns">
+   Footer
+   </div>
+   <div class="footer__social">
+
+   </div>
+   <div class="footer__legal">
+
+   </div>
+   </footer>
+</div>

package/examples/footer.inline.html

@@ -0,0 +1,18 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-footer — self-contained, no external CSS needed -->
+<div class="arc-footer" style="display: block; background: rgb(3, 3, 7); color: rgb(138, 138, 150); font-family: 'Host Grotesk', system-ui, sans-serif; font-size: clamp(15px, 1.2vw, 16px)">
+  <footer style="padding: 64px 40px 40px">
+   <div style="margin-bottom: 40px">
+
+   </div>
+   <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 40px; margin-bottom: 40px">
+   Footer
+   </div>
+   <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 24px">
+
+   </div>
+   <div style="padding-top: 16px; border-top: 1px solid rgb(24, 24, 30); color: rgb(124, 124, 137); font-size: 12px">
+
+   </div>
+   </footer>
+</div>

package/examples/form.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ARC UI — Form (Pure HTML/CSS)</title>
+  <link rel="stylesheet" href="../css/form.css" />
+  <link rel="stylesheet" href="../../../shared/tokens.css" />
+  <style>
+    body {
+      background: var(--bg-deep);
+      color: var(--text-primary);
+      font-family: var(--font-body);
+      padding: 48px;
+      max-width: 480px;
+      margin: 0 auto;
+    }
+    h1 {
+      font-family: var(--font-accent);
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 2px;
+      text-transform: uppercase;
+      color: var(--text-muted);
+      margin-bottom: 24px;
+    }
+  </style>
+</head>
+<body>
+  <h1>Contact Form</h1>
+
+  <form class="arc-form" action="/api/contact" method="POST">
+    <div class="arc-field">
+      <label for="name">Name</label>
+      <input type="text" id="name" name="name" placeholder="Jane Doe" required />
+    </div>
+
+    <div class="arc-field">
+      <label for="email">Email</label>
+      <input type="email" id="email" name="email" placeholder="jane@example.com" required />
+    </div>
+
+    <div class="arc-field">
+      <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>
+    </div>
+
+    <div class="arc-field">
+      <label for="message">Message</label>
+      <textarea id="message" name="message" rows="5" placeholder="How can we help?"></textarea>
+    </div>
+
+    <div class="arc-check">
+      <input type="checkbox" id="newsletter" name="newsletter" />
+      <label for="newsletter">Subscribe to newsletter</label>
+    </div>
+
+    <fieldset>
+      <legend>Priority</legend>
+      <div class="arc-check">
+        <input type="radio" id="low" name="priority" value="low" />
+        <label for="low">Low</label>
+      </div>
+      <div class="arc-check">
+        <input type="radio" id="medium" name="priority" value="medium" checked />
+        <label for="medium">Medium</label>
+      </div>
+      <div class="arc-check">
+        <input type="radio" id="high" name="priority" value="high" />
+        <label for="high">High</label>
+      </div>
+    </fieldset>
+
+    <div class="arc-form-actions">
+      <button type="submit">Send Message</button>
+      <button type="reset">Reset</button>
+    </div>
+  </form>
+</body>
+</html>

package/examples/highlight.html

@@ -0,0 +1,5 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<!-- arc-highlight — requires highlight.css + tokens.css (or arc-ui.css) -->
+<span class="arc-highlight">
+  <span></span>
+</span>

package/examples/highlight.inline.html

@@ -0,0 +1,5 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<!-- arc-highlight — self-contained, no external CSS needed -->
+<span class="arc-highlight" style="display: inline">
+  <span></span>
+</span>

package/examples/icon-button.html

@@ -0,0 +1,5 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-icon-button — requires icon-button.css + tokens.css (or arc-ui.css) -->
+<span class="arc-icon-button">
+  <a href="#" aria-label="Label"></a>
+</span>

package/examples/icon-button.inline.html

@@ -0,0 +1,22 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-icon-button — self-contained, no external CSS needed -->
+<style>
+  .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); }
+</style>
+<span class="arc-icon-button" style="display: inline-flex">
+  <a href="#" aria-label="Label"></a>
+</span>

package/examples/icon.html

@@ -0,0 +1,12 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-icon — requires icon.css + tokens.css (or arc-ui.css) -->
+<span class="arc-icon">
+  <span
+   class="icon"
+   role="presentation"
+   aria-label="Label"
+   aria-hidden="true"
+   >
+
+   </span>
+</span>

package/examples/icon.inline.html

@@ -0,0 +1,12 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-icon — self-contained, no external CSS needed -->
+<span class="arc-icon" style="display: inline-flex; align-items: center; justify-content: center; color: currentColor; vertical-align: middle">
+  <span
+   style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%"
+   role="presentation"
+   aria-label="Label"
+   aria-hidden="true"
+   >
+
+   </span>
+</span>

package/examples/kbd.html

@@ -0,0 +1,5 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-kbd — requires kbd.css + tokens.css (or arc-ui.css) -->
+<span class="arc-kbd">
+  <kbd class="kbd">Kbd</kbd>
+</span>

package/examples/kbd.inline.html

@@ -0,0 +1,5 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-kbd — self-contained, no external CSS needed -->
+<span class="arc-kbd" style="display: inline">
+  <kbd style="display: inline-flex; align-items: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; line-height: 1; color: rgb(138, 138, 150); background: rgb(17, 17, 22); border: 1px solid rgb(34, 34, 41); border-bottom-width: 2px; border-radius: 4px; padding: 2px 6px; white-space: nowrap; user-select: none; vertical-align: baseline">Kbd</kbd>
+</span>

package/examples/link.html

@@ -0,0 +1,13 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-link — requires link.css + tokens.css (or arc-ui.css) -->
+<span class="arc-link">
+  <a
+   class="link"
+   href="#"
+   target=""
+   rel=""
+   >
+   Link
+   External
+   </a>
+</span>

package/examples/link.inline.html

@@ -0,0 +1,23 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-link — self-contained, no external CSS needed -->
+<style>
+  .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; }
+</style>
+<span class="arc-link" style="display: inline">
+  <a
+   class="link" style="font-family: 'Host Grotesk', system-ui, sans-serif; font-size: inherit; color: rgb(77, 126, 247); text-decoration: none; cursor: pointer; border: none; background: none; padding: 0"
+   href="#"
+   target=""
+   rel=""
+   >
+   Link
+   External
+   </a>
+</span>

package/examples/markdown.html

@@ -0,0 +1,6 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<!-- arc-markdown — requires markdown.css + tokens.css (or arc-ui.css) -->
+<div class="arc-markdown">
+  <div class="markdown" ></div>
+  <slot style="display:none" ></slot>
+</div>

package/examples/markdown.inline.html

@@ -0,0 +1,16 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<!-- arc-markdown — self-contained, no external CSS needed -->
+<style>
+  @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; }
+</style>
+<div class="arc-markdown" style="display: block">
+  <div class="markdown" style="font-family: 'Host Grotesk', system-ui, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.7; color: rgb(160, 165, 195)" ></div>
+  <slot style="display:none" ></slot>
+</div>

package/examples/meter.html

@@ -0,0 +1,20 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<!-- arc-meter — requires meter.css + tokens.css (or arc-ui.css) -->
+<div class="arc-meter">
+  <div
+    class="meter"
+    role="meter"
+    aria-valuemin="Min"
+    aria-valuemax="Max"
+    aria-valuenow="Value"
+    aria-label="Label"
+  >
+    Label
+    <div class="meter__track">
+      <div
+        class="meter__fill meter__fill--"
+        style="width: %"
+      ></div>
+    </div>
+  </div>
+</div>

package/examples/meter.inline.html

@@ -0,0 +1,29 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<!-- arc-meter — self-contained, no external CSS needed -->
+<style>
+  @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; }
+  }
+</style>
+<div class="arc-meter" style="display: block">
+  <div
+    style="display: flex; flex-direction: column; gap: 4px"
+    role="meter"
+    aria-valuemin="Min"
+    aria-valuemax="Max"
+    aria-valuenow="Value"
+    aria-label="Label"
+  >
+    Label
+    <div style="position: relative; width: 100%; height: 8px; background: rgb(26, 26, 80); border-radius: 9999px; overflow: hidden">
+      <div
+
+        style="width: %"
+      ></div>
+    </div>
+  </div>
+</div>

package/examples/page-header.html

@@ -0,0 +1,22 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-page-header — requires page-header.css + tokens.css (or arc-ui.css) -->
+<div class="arc-page-header">
+  <div class="page-header">
+   <div class="page-header__breadcrumb">
+
+   </div>
+   <div class="page-header__title-row">
+   <h1 class="page-header__heading">Heading</h1>
+   <div class="page-header__actions">
+
+   </div>
+   </div>
+   Description text goes here
+   <div class="page-header__tabs">
+
+   </div>
+   <div class="page-header__content">
+   Page Header
+   </div>
+   </div>
+</div>

package/examples/page-header.inline.html

@@ -0,0 +1,22 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-page-header — self-contained, no external CSS needed -->
+<div class="arc-page-header" style="display: block; font-family: 'Host Grotesk', system-ui, sans-serif">
+  <div style="padding: 24px 0 16px; border-bottom: 1px solid rgb(24, 24, 30)">
+   <div style="margin-bottom: 8px">
+
+   </div>
+   <div style="display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap">
+   <h1 style="margin: 0; font-family: 'Tektur', system-ui, sans-serif; font-size: 28px; font-weight: 700; color: rgb(232, 232, 236); line-height: 1.2">Heading</h1>
+   <div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0">
+
+   </div>
+   </div>
+   Description text goes here
+   <div style="margin-top: 16px">
+
+   </div>
+   <div style="margin-top: 16px">
+   Page Header
+   </div>
+   </div>
+</div>

package/examples/page-layout.html

@@ -0,0 +1,15 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-page-layout — requires page-layout.css + tokens.css (or arc-ui.css) -->
+<div class="arc-page-layout">
+  <div class="page-layout">
+   <div class="sidebar">
+
+   </div>
+   <div class="main">
+   Page Layout
+   </div>
+   <div class="aside">
+
+   </div>
+   </div>
+</div>

package/examples/page-layout.inline.html

@@ -0,0 +1,21 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-page-layout — self-contained, no external CSS needed -->
+<style>
+  @media (max-width: 768px) {
+    .arc-page-layout([layout='sidebar-left']) .page-layout,
+        .arc-page-layout([layout='sidebar-right']) .page-layout { grid-template-columns: 1fr; }
+  }
+</style>
+<div class="arc-page-layout" style="display: block; box-sizing: border-box">
+  <div class="page-layout" style="padding: 40px 24px; gap: var(--gap); min-height: 100%; box-sizing: border-box">
+   <div style="display: none">
+
+   </div>
+   <div style="min-width: 0">
+   Page Layout
+   </div>
+   <div style="display: none">
+
+   </div>
+   </div>
+</div>

package/examples/progress.html

@@ -0,0 +1,20 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-progress — requires progress.css + tokens.css (or arc-ui.css) -->
+<div class="arc-progress">
+  <div>
+   Label
+   <div
+   class="progress__spinner"
+   role="progressbar"
+   aria-valuenow="Indeterminate"
+   aria-valuemin="0"
+   aria-valuemax="100"
+   aria-label="Label"
+   >
+   <svg viewBox="0 0 44 44">
+   <circle class="progress__spinner-track" cx="22" cy="22" r="20"></circle>
+   <circle class="progress__spinner-fill" cx="22" cy="22" r="20"></circle>
+   </svg>
+   </div>
+   </div>
+</div>

package/examples/progress.inline.html

@@ -0,0 +1,27 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-progress — self-contained, no external CSS needed -->
+<style>
+  @media (prefers-reduced-motion: reduce) {
+    .arc-progress .progress__fill,
+        .arc-progress .progress__spinner svg,
+        .arc-progress .progress__spinner-fill { animation: none; }
+  }
+</style>
+<div class="arc-progress" style="display: block">
+  <div>
+   Label
+   <div
+   class="progress__spinner" style="display: inline-block"
+   role="progressbar"
+   aria-valuenow="Indeterminate"
+   aria-valuemin="0"
+   aria-valuemax="100"
+   aria-label="Label"
+   >
+   <svg viewBox="0 0 44 44">
+   <circle style="fill: none; stroke: rgb(24, 24, 30); stroke-width: 3" cx="22" cy="22" r="20"></circle>
+   <circle class="progress__spinner-fill" style="fill: none; stroke: rgb(77, 126, 247); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 80, 200; stroke-dashoffset: 0; animation: spinner-dash 1.4s ease-in-out infinite" cx="22" cy="22" r="20"></circle>
+   </svg>
+   </div>
+   </div>
+</div>

package/examples/scroll-area.html

@@ -0,0 +1,12 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<!-- arc-scroll-area — requires scroll-area.css + tokens.css (or arc-ui.css) -->
+<div class="arc-scroll-area">
+  <div
+    class="scroll-area"
+    tabindex="0"
+    role="region"
+    aria-label="Scrollable content"
+  >
+    Scroll Area
+  </div>
+</div>