@arclux/arc-ui-html 1.0.0

package/examples/scroll-area.inline.html

@@ -0,0 +1,22 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<!-- arc-scroll-area — self-contained, no external CSS needed -->
+<style>
+  @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); }
+</style>
+<div class="arc-scroll-area" style="display: block; position: relative">
+  <div
+    class="scroll-area" style="overflow: hidden; scroll-behavior: smooth; border-radius: var(--radius-full); width: 6px; height: 6px; background: var(--bg-elevated); scrollbar-width: thin; scrollbar-color: var(--border-bright) var(--bg-elevated)"
+    tabindex="0"
+    role="region"
+    aria-label="Scrollable content"
+  >
+    Scroll Area
+  </div>
+</div>

package/examples/section.html

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

package/examples/section.inline.html

@@ -0,0 +1,13 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-section — self-contained, no external CSS needed -->
+<style>
+  @media (max-width: 768px) {
+    .arc-section .section { padding: 64px 16px; }
+  }
+</style>
+<div class="arc-section" style="display: block">
+  <section class="section" style="width: 100%; max-width: 1120px; margin-inline: auto; padding: 96px 24px; scroll-margin-top: 16px">
+   Label
+   Section
+   </section>
+</div>

package/examples/settings-layout.html

@@ -0,0 +1,12 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-settings-layout — requires settings-layout.css + tokens.css (or arc-ui.css) -->
+<div class="arc-settings-layout">
+  <div>
+   <div class="nav">
+
+   </div>
+   <div class="content">
+   Settings Layout
+   </div>
+   </div>
+</div>

package/examples/settings-layout.inline.html

@@ -0,0 +1,22 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-settings-layout — self-contained, no external CSS needed -->
+<style>
+  @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); }
+  }
+</style>
+<div class="arc-settings-layout" style="display: block; box-sizing: border-box">
+  <div>
+   <div class="nav" style="padding: 24px; background: rgb(13, 13, 18); border-right: 1px solid rgb(24, 24, 30); border-bottom: 1px solid rgb(24, 24, 30)">
+
+   </div>
+   <div style="padding: 40px; flex: 1">
+   Settings Layout
+   </div>
+   </div>
+</div>

package/examples/skeleton.html

@@ -0,0 +1,10 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-skeleton — requires skeleton.css + tokens.css (or arc-ui.css) -->
+<div class="arc-skeleton">
+  <div
+   class="skeleton"
+   role="status"
+   aria-label="Loading"
+   aria-busy="true"
+   ></div>
+</div>

package/examples/skeleton.inline.html

@@ -0,0 +1,15 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-skeleton — self-contained, no external CSS needed -->
+<div class="arc-skeleton" style="display: block">
+  <div
+   style="background: linear-gradient(
+            90deg,
+            rgb(17, 17, 22) 25%,
+            rgb(24, 24, 30) 37%,
+            rgb(17, 17, 22) 63%
+          ); background-size: 200% 100%; animation: shimmer 1.8s ease-in-out infinite"
+   role="status"
+   aria-label="Loading"
+   aria-busy="true"
+   ></div>
+</div>

package/examples/spinner.html

@@ -0,0 +1,9 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-spinner — requires spinner.css + tokens.css (or arc-ui.css) -->
+<span class="arc-spinner">
+  <div
+   class="spinner"
+   role="status"
+   aria-label="Loading"
+   ></div>
+</span>

package/examples/spinner.inline.html

@@ -0,0 +1,9 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-spinner — self-contained, no external CSS needed -->
+<span class="arc-spinner" style="display: inline-flex">
+  <div
+   style="border-radius: 9999px; border-style: solid; border-color: rgb(77, 126, 247); border-top-color: transparent; animation: spin 0.75s linear infinite; box-sizing: border-box"
+   role="status"
+   aria-label="Loading"
+   ></div>
+</span>

package/examples/stack.html

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

package/examples/stack.inline.html

@@ -0,0 +1,5 @@
+<!-- Auto-generated by @arclux/prism — do not edit manually -->
+<!-- arc-stack — self-contained, no external CSS needed -->
+<div class="arc-stack" style="display: flex; flex-direction: column; gap: 16px; align-items: stretch; justify-content: flex-start">
+  Stack
+</div>

package/examples/stat.html

@@ -0,0 +1,9 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-stat — requires stat.css + tokens.css (or arc-ui.css) -->
+<div class="arc-stat">
+  <div class="stat">
+   <span class="stat__value">Value</span>
+   <span class="stat__rule"></span>
+   <span class="stat__label">Label</span>
+   </div>
+</div>

package/examples/stat.inline.html

@@ -0,0 +1,10 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-stat — self-contained, no external CSS needed -->
+<div class="arc-stat" style="display: block">
+  <div style="display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 24px 16px">
+   <span style="font-size: clamp(32px, 4.5vw, 48px); font-weight: 200; letter-spacing: -1px; line-height: 1; background: linear-gradient(90deg, rgb(77, 126, 247), rgb(139, 92, 246)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 16px rgba(77, 126, 247,0.3))
+                  drop-shadow(0 0 40px rgba(139, 92, 246,0.12))">Value</span>
+   <span style="width: 24px; height: 1px; background: linear-gradient(90deg, transparent, rgb(77, 126, 247), transparent); opacity: 0.4"></span>
+   <span style="font-family: 'Tektur', system-ui, sans-serif; font-weight: 600; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: rgb(124, 124, 137)">Label</span>
+   </div>
+</div>

package/examples/status-bar.html

@@ -0,0 +1,15 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-status-bar — requires status-bar.css + tokens.css (or arc-ui.css) -->
+<div class="arc-status-bar">
+  <div class="status-bar" role="status">
+   <div class="status-bar__left">
+
+   </div>
+   <div class="status-bar__center">
+   Status Bar
+   </div>
+   <div class="status-bar__right">
+
+   </div>
+   </div>
+</div>

package/examples/status-bar.inline.html

@@ -0,0 +1,15 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-status-bar — self-contained, no external CSS needed -->
+<div class="arc-status-bar" style="display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: rgb(124, 124, 137)">
+  <div style="display: flex; align-items: center; height: 28px; padding: 0 8px; background: rgb(3, 3, 7); border-top: 1px solid rgb(24, 24, 30); gap: 8px" role="status">
+   <div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0">
+
+   </div>
+   <div style="display: flex; align-items: center; gap: 8px; flex: 1; justify-content: center">
+   Status Bar
+   </div>
+   <div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto">
+
+   </div>
+   </div>
+</div>

package/examples/stepper.html

@@ -0,0 +1,18 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-stepper — requires stepper.css + tokens.css (or arc-ui.css) -->
+<div class="arc-stepper">
+  <div
+   class="step step--"
+   role="listitem"
+   aria-current=""
+   >
+   <div class="step__header">
+
+   <span class="step__circle">
+
+   </span>
+
+   </div>
+   <span class="step__label"></span>
+   </div>
+</div>

package/examples/stepper.inline.html

@@ -0,0 +1,18 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-stepper — self-contained, no external CSS needed -->
+<div class="arc-stepper" style="display: block">
+  <div
+
+   role="listitem"
+   aria-current=""
+   >
+   <div style="display: flex; align-items: center; width: 100%; position: relative">
+
+   <span style="width: 32px; height: 32px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-family: 'Tektur', system-ui, sans-serif; font-size: 13px; font-weight: 600; flex-shrink: 0; position: relative; z-index: 1; margin: 0 auto; box-sizing: border-box; background: rgb(77, 126, 247); color: rgb(232, 232, 236); border: 2px solid rgb(77, 126, 247); box-shadow: 0 0 12px rgba(77, 126, 247, 0.25)">
+
+   </span>
+
+   </div>
+   <span style="margin-top: 8px; font-family: 'Host Grotesk', system-ui, sans-serif; font-size: 13px; color: rgb(138, 138, 150); text-align: center; font-weight: 600"></span>
+   </div>
+</div>

package/examples/table.html

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

package/examples/table.inline.html

@@ -0,0 +1,7 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-table — self-contained, no external CSS needed -->
+<div class="arc-table" style="display: block; color: rgb(138, 138, 150); font-family: 'Host Grotesk', system-ui, sans-serif; font-size: clamp(15px, 1.2vw, 16px)">
+  <div style="overflow-x: auto; border: 1px solid rgb(34, 34, 41); border-radius: 14px">
+   Table
+   </div>
+</div>

package/examples/text.html

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

package/examples/text.inline.html

@@ -0,0 +1,5 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-text — self-contained, no external CSS needed -->
+<div class="arc-text" style="display: block">
+  <p>Text</p>
+</div>

package/examples/timeline.html

@@ -0,0 +1,10 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-timeline — requires timeline.css + tokens.css (or arc-ui.css) -->
+<div class="arc-timeline">
+  <div class="timeline__slot-host">
+   Timeline
+   </div>
+   <ol class="timeline" role="list">
+   _items
+   </ol>
+</div>

package/examples/timeline.inline.html

@@ -0,0 +1,10 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-timeline — self-contained, no external CSS needed -->
+<div class="arc-timeline" style="display: block">
+  <div style="display: none">
+   Timeline
+   </div>
+   <ol style="display: flex; flex-direction: column; gap: 0; padding: 0; margin: 0; list-style: none" role="list">
+   _items
+   </ol>
+</div>

package/examples/toolbar.html

@@ -0,0 +1,15 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-toolbar — requires toolbar.css + tokens.css (or arc-ui.css) -->
+<div class="arc-toolbar">
+  <div class="toolbar" role="toolbar">
+   <div class="toolbar__start">
+
+   </div>
+   <div class="toolbar__center">
+   Toolbar
+   </div>
+   <div class="toolbar__end">
+
+   </div>
+   </div>
+</div>

package/examples/toolbar.inline.html

@@ -0,0 +1,15 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-toolbar — self-contained, no external CSS needed -->
+<div class="arc-toolbar" style="display: block; font-family: 'Host Grotesk', system-ui, sans-serif">
+  <div style="display: flex; align-items: center; height: 48px; padding: 0 16px; background: rgb(13, 13, 18); gap: 8px" role="toolbar">
+   <div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0">
+
+   </div>
+   <div style="display: flex; align-items: center; gap: 8px; flex: 1; justify-content: center">
+   Toolbar
+   </div>
+   <div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto">
+
+   </div>
+   </div>
+</div>

package/examples/tooltip.html

@@ -0,0 +1,19 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-tooltip — requires tooltip.css + tokens.css (or arc-ui.css) -->
+<span class="arc-tooltip">
+  <div
+   class="tooltip__trigger"
+
+   aria-describedby="_tooltip Id"
+   >
+   Tooltip
+   </div>
+   <div
+   class="tooltip__popup _visible"
+   role="tooltip"
+   id="_tooltip Id"
+   >
+   Content goes here
+   <div class="tooltip__arrow"></div>
+   </div>
+</span>

package/examples/tooltip.inline.html

@@ -0,0 +1,19 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-tooltip — self-contained, no external CSS needed -->
+<span class="arc-tooltip" style="display: inline-block; position: relative">
+  <div
+   style="display: inline-block"
+
+   aria-describedby="_tooltip Id"
+   >
+   Tooltip
+   </div>
+   <div
+
+   role="tooltip"
+   id="_tooltip Id"
+   >
+   Content goes here
+   <div style="position: absolute; width: 8px; height: 8px; background: rgb(17, 17, 22); border: 1px solid rgb(34, 34, 41); transform: rotate(45deg)"></div>
+   </div>
+</span>

package/examples/top-bar.html

@@ -0,0 +1,23 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-top-bar — requires top-bar.css + tokens.css (or arc-ui.css) -->
+<div class="arc-top-bar">
+  <header class="topbar">
+   <button class="topbar__menu-btn" aria-label="Toggle menu" aria-expanded="false">
+   <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+   <rect y="3" width="20" height="2" rx="1"/>
+   <rect y="9" width="20" height="2" rx="1"/>
+   <rect y="15" width="20" height="2" rx="1"/>
+   </svg>
+   </button>
+   <a class="topbar__brand" href="/">
+
+   Heading
+   </a>
+   <div class="topbar__center">
+
+   </div>
+   <div class="topbar__actions">
+
+   </div>
+   </header>
+</div>

package/examples/top-bar.inline.html

@@ -0,0 +1,29 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-top-bar — self-contained, no external CSS needed -->
+<style>
+  @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); }
+</style>
+<div class="arc-top-bar" style="display: block; width: 100%; z-index: 100">
+  <header class="topbar" style="display: flex; align-items: center; height: 64px; padding: 0 24px; background: rgb(3, 3, 7); border-bottom: 1px solid rgb(24, 24, 30); gap: 16px">
+   <button class="topbar__menu-btn" style="display: none; background: none; border: none; color: rgb(232, 232, 236); cursor: pointer; padding: 4px; border-radius: 4px" aria-label="Toggle menu" aria-expanded="false">
+   <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+   <rect y="3" width="20" height="2" rx="1"/>
+   <rect y="9" width="20" height="2" rx="1"/>
+   <rect y="15" width="20" height="2" rx="1"/>
+   </svg>
+   </button>
+   <a style="display: flex; align-items: center; gap: 8px; font-family: 'Tektur', system-ui, sans-serif; font-size: clamp(20px, 2.5vw, 28px); font-weight: 500; letter-spacing: clamp(8px, 1.2vw, 14px); text-transform: uppercase; color: rgb(232, 232, 236); text-decoration: none; flex-shrink: 0" href="/">
+
+   Heading
+   </a>
+   <div style="flex: 1; display: flex; align-items: center; justify-content: center">
+
+   </div>
+   <div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0">
+
+   </div>
+   </header>
+</div>

package/examples/value-card.html

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

package/examples/value-card.inline.html

@@ -0,0 +1,15 @@
+<!-- Auto-generated by @arclight/prism — do not edit manually -->
+<!-- arc-value-card — self-contained, no external CSS needed -->
+<style>
+  .arc-value-card .card:hover { border-color: rgb(51, 51, 64);
+        box-shadow: 0 0 20px rgba(139, 92, 246,0.06); }
+</style>
+<div class="arc-value-card" style="display: flex; flex-direction: column; height: 100%">
+  <div class="card" style="position: relative; display: flex; align-items: flex-start; gap: 24px; padding: 24px; flex: 1; border: 1px solid rgb(24, 24, 30); border-radius: 14px">
+   <div style="flex-shrink: 0; color: rgb(139, 92, 246); font-size: 24px; line-height: 1; padding-top: 2px">★</div>
+   <div style="display: flex; flex-direction: column; gap: 8px">
+   <h3 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; margin: 0">Description text goes here</p>
+   </div>
+   </div>
+</div>

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@arclux/arc-ui-html",
+  "version": "1.0.0",
+  "description": "ARC UI — Standalone CSS and HTML examples for vanilla projects. Auto-generated by @arclux/prism.",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "css/",
+    "examples/"
+  ],
+  "exports": {
+    "./css/*": "./css/*",
+    "./examples/*": "./examples/*"
+  },
+  "keywords": [
+    "arc-ui",
+    "css",
+    "design-system",
+    "html",
+    "components"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/arclight-digital/arc-ui",
+    "directory": "packages/html"
+  },
+  "homepage": "https://arcui.dev",
+  "bugs": {
+    "url": "https://github.com/arclight-digital/arc-ui/issues"
+  }
+}