CSS State Machine

vel-src: state-machine.css

Zero-JavaScript tabs, toggles, and accordions powered by :has() + radio/checkbox inputs. No event listeners, no JavaScript — pure CSS state.

Class	Properties
vel-sm-tabs	Zero-JS tab container (:has() + radio inputs)
vel-sm-tab-input	Hidden radio input driving tab state
vel-sm-tab-label	Clickable tab label
vel-sm-tab-panel	Tab content panel (hidden until selected)
vel-sm-toggle	Zero-JS disclosure/accordion container
vel-sm-toggle-input	Hidden checkbox driving open/closed
vel-sm-toggle-label	Clickable toggle trigger
vel-sm-toggle-panel	Collapsible content panel

Examples

Zero-JS tabs — no JavaScript, no event listeners

Overview Features Install

VeloraCSS is a utility-first framework with Color Genetics, Container Intelligence, and zero-JS state machines built in.

300+ utilities · 29 components · 6 CSS innovations · 0 dependencies. Everything ships in one CSS file.

npm install veloracss — then import the CSS. Done.

example.html

<div class="vel-sm-tabs">
  <input class="vel-sm-tab-input" type="radio" name="demo-tabs" id="vel-tab-1" checked />
  <input class="vel-sm-tab-input" type="radio" name="demo-tabs" id="vel-tab-2" />
  <input class="vel-sm-tab-input" type="radio" name="demo-tabs" id="vel-tab-3" />
  <div class="vel-flex vel-gap-0" style="border-bottom:1px solid #1e2d45;margin-bottom:1rem">
    <label class="vel-sm-tab-label" for="vel-tab-1" style="padding:0.5rem 1.25rem;cursor:pointer;font-size:0.875rem;font-weight:500;color:#64748b;border-bottom:2px solid transparent">Overview</label>
    <label class="vel-sm-tab-label" for="vel-tab-2" style="padding:0.5rem 1.25rem;cursor:pointer;font-size:0.875rem;font-weight:500;color:#64748b;border-bottom:2px solid transparent">Features</label>
    <label class="vel-sm-tab-label" for="vel-tab-3" style="padding:0.5rem 1.25rem;cursor:pointer;font-size:0.875rem;font-weight:500;color:#64748b;border-bottom:2px solid transparent">Install</label>
  </div>
  <div class="vel-sm-tab-panel" data-vel-panel="1" style="color:#94a3b8;font-size:0.875rem;line-height:1.6">VeloraCSS is a utility-first framework with Color Genetics, Container Intelligence, and zero-JS state machines built in.</div>
  <div class="vel-sm-tab-panel" data-vel-panel="2" style="color:#94a3b8;font-size:0.875rem;line-height:1.6">300+ utilities · 29 components · 6 CSS innovations · 0 dependencies. Everything ships in one CSS file.</div>
  <div class="vel-sm-tab-panel" data-vel-panel="3" style="color:#94a3b8;font-size:0.875rem;line-height:1.6"><code style="font-family:Cascadia Code,Consolas,monospace;background:#0d1422;padding:0.2rem 0.5rem;border-radius:4px;color:#a87fff">npm install veloracss</code> — then import the CSS. Done.</div>
</div>

Zero-JS accordion/toggle — CSS :has() drives open/closed

What is Color Genetics? ↓

One CSS variable — --vel-dna-hue — drives 50+ derived colors via oklch(). Change one number and your entire UI recolors.

What is Container Intelligence? ↓

Components respond to their own container width using @container queries. The same card can be one column at 300px and two columns at 500px — no media queries needed.

example.html

<div style="display:flex;flex-direction:column;gap:0.5rem;max-width:420px">
  <div class="vel-sm-toggle" style="border:1px solid #1e2d45;border-radius:8px;overflow:hidden">
    <input class="vel-sm-toggle-input" type="checkbox" id="acc1" />
    <label class="vel-sm-toggle-label" for="acc1" style="display:flex;justify-content:space-between;align-items:center;padding:0.875rem 1rem;cursor:pointer;font-size:0.875rem;font-weight:600;color:#e2e8f0;background:#0d1422">
      What is Color Genetics? <span>↓</span>
    </label>
    <div class="vel-sm-toggle-panel" style="padding:0.875rem 1rem;color:#64748b;font-size:0.8125rem;line-height:1.6;background:#060b17">
      One CSS variable — <code style="font-family:Cascadia Code,Consolas,monospace;color:#a87fff">--vel-dna-hue</code> — drives 50+ derived colors via <code style="font-family:Cascadia Code,Consolas,monospace;color:#a87fff">oklch()</code>. Change one number and your entire UI recolors.
    </div>
  </div>
  <div class="vel-sm-toggle" style="border:1px solid #1e2d45;border-radius:8px;overflow:hidden">
    <input class="vel-sm-toggle-input" type="checkbox" id="acc2" />
    <label class="vel-sm-toggle-label" for="acc2" style="display:flex;justify-content:space-between;align-items:center;padding:0.875rem 1rem;cursor:pointer;font-size:0.875rem;font-weight:600;color:#e2e8f0;background:#0d1422">
      What is Container Intelligence? <span>↓</span>
    </label>
    <div class="vel-sm-toggle-panel" style="padding:0.875rem 1rem;color:#64748b;font-size:0.8125rem;line-height:1.6;background:#060b17">
      Components respond to their own container width using <code style="font-family:Cascadia Code,Consolas,monospace;color:#a87fff">@container</code> queries. The same card can be one column at 300px and two columns at 500px — no media queries needed.
    </div>
  </div>
</div>