<div class="arx-bg-primary">...</div>
<div class="arx-bg-success">...</div>
<div class="arx-bg-danger">...</div>
<div class="arx-bg-warning">...</div>
<div class="arx-bg-info">...</div>
<div class="arx-bg-secondary">...</div>
<div class="arx-bg-surface">...</div>
<div class="arx-bg-raised">...</div>
<div class="arx-bg-body">...</div>

<span class="arx-text-primary">Primary</span>
<span class="arx-text-secondary">Secondary</span>
<span class="arx-text-muted">Muted</span>
<span class="arx-text-success">Success</span>
<span class="arx-text-danger">Danger</span>
<span class="arx-text-warning">Warning</span>
<span class="arx-text-info">Info</span>

<div class="arx-opacity-100">...</div>
<div class="arx-opacity-75">...</div>
<div class="arx-opacity-50">...</div>
<div class="arx-opacity-25">...</div>
<div class="arx-opacity-0">...</div>

<div class="arx-bg-gradient-primary arx-text-inverse">...</div>
<div class="arx-bg-gradient">brand blend</div>

<h1 class="arx-text-gradient">Clipped to glyphs</h1>
<span class="arx-text-gradient-success">Success</span>

<div class="arx-border-gradient arx-rounded">
  Rounded corners preserved
</div>

<div class="arx-container">
    <div class="arx-row">
        <div class="arx-col-md-8">Main content</div>
        <div class="arx-col-md-4">Sidebar</div>
    </div>
</div>

<!-- Full width on mobile, thirds on md+ -->
<div class="arx-row">
    <div class="arx-col-12 arx-col-md-4">One</div>
    <div class="arx-col-12 arx-col-md-4">Two</div>
    <div class="arx-col-12 arx-col-md-4">Three</div>
</div>

<!-- Equal-width auto columns -->
<div class="arx-row">
    <div class="arx-col">Auto</div>
    <div class="arx-col">Auto</div>
</div>

<!-- Horizontal stack with divider -->
<div class="arx-hstack arx-hstack-gap-3">
    <button class="arx-btn arx-btn-outline">Back</button>
    <div class="arx-vr"></div>
    <span>Step 2 of 4</span>
    <div class="arx-flex-1"></div>
    <button class="arx-btn arx-btn-primary">Next</button>
</div>

<!-- Vertical stack -->
<div class="arx-stack arx-stack-gap-2">
    <input class="arx-input" placeholder="First name">
    <input class="arx-input" placeholder="Last name">
    <button class="arx-btn arx-btn-primary">Submit</button>
</div>

<h1>Display Heading One</h1>
<h2>Section Heading</h2>

<!-- Utility classes apply heading styles to any element -->
<p class="arx-h1">Styled as h1</p>

<p class="arx-lead">Larger intro paragraph.</p>
<p class="arx-muted">De-emphasized text.</p>

<code>const x = 1;</code>

<blockquote>A thoughtful quote.</blockquote>

Press <kbd>Ctrl</kbd> + <kbd>K</kbd> to search.

<hr class="arx-divider">                  <!-- plain rule -->

<div class="arx-divider-label">OR</div>
<div class="arx-divider-label arx-divider-label-start">Section</div>

<span>A</span><span class="arx-divider-vertical"></span><span>B</span>

<figure class="arx-figure">
    <img src="photo.jpg" alt="..." class="arx-figure-img">
    <figcaption class="arx-figure-caption">
        Fig. 1 — Description of the image.
    </figcaption>
</figure>

<div class="arx-table-responsive">
    <table class="arx-table arx-table-bordered arx-table-hover">
        <thead>
            <tr><th>Name</th><th>Status</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>Framework</td>
                <td><span class="arx-badge arx-badge-success">Stable</span></td>
            </tr>
            <tr class="arx-row-warning">
                <td>Modal</td>
                <td><span class="arx-badge arx-badge-warning">WIP</span></td>
            </tr>
        </tbody>
    </table>
</div>

<table class="arx-table arx-table-hover" data-arx-table
       data-arx-table-search data-arx-table-page-size="10">
  <thead><tr>
    <th data-arx-sort>Name</th>
    <th data-arx-sort="number">Score</th>
    <th>Role</th>            <!-- not sortable -->
  </tr></thead>
  <tbody> … </tbody>
</table>

// $('#el').arxTable('sort', 2, 'desc')  // column (1-based), dir
// $('#el').arxTable('search', 'ali')  ·  ('page', 2)  ·  ('refresh')
// $(el).on('arx:table-sort arx:table-page arx:table-search', …);

<nav class="arx-navbar arx-navbar-sticky">
    <div class="arx-navbar-inner">
        <a href="/" class="arx-nav-brand">Arx</a>
        <ul class="arx-nav-links">
            <li><a href="#" class="arx-nav-link arx-active">Home</a></li>
            <li><a href="#" class="arx-nav-link">Docs</a></li>
        </ul>
        <div class="arx-nav-end">
            <button class="arx-btn arx-btn-primary arx-btn-sm">Get Started</button>
        </div>
    </div>
</nav>

<nav class="arx-navbar arx-navbar-responsive">
    <div class="arx-navbar-inner">
        <a href="/" class="arx-nav-brand">Arx</a>
        <button class="arx-navbar-toggle" data-arx-navbar-toggle
                aria-label="Toggle navigation" aria-expanded="false">
            <span class="arx-navbar-toggle-icon"></span>
        </button>
        <div class="arx-navbar-collapse">
            <ul class="arx-nav-links"> … </ul>
            <div class="arx-nav-end"> … </div>
        </div>
    </div>
</nav>

<nav class="arx-sidenav">

    <!-- Optional brand / logo -->
    <div class="arx-sidenav-brand">
        <i data-lucide="layers"></i>
        Arx
    </div>

    <div class="arx-sidenav-group">
        <span class="arx-sidenav-label">Main</span>

        <a href="#" class="arx-sidenav-link arx-active">
            <i data-lucide="home"></i> Dashboard
        </a>
        <a href="#" class="arx-sidenav-link">
            <i data-lucide="bar-chart-2"></i> Analytics
        </a>

        <!-- Link with a badge counter -->
        <a href="#" class="arx-sidenav-link">
            <i data-lucide="users"></i> Users
            <span class="arx-sidenav-badge arx-badge arx-badge-solid-primary">24</span>
        </a>

        <!-- Disabled item -->
        <a href="#" class="arx-sidenav-link arx-disabled">
            <i data-lucide="credit-card"></i> Billing
        </a>
    </div>

    <hr class="arx-sidenav-divider">

    <div class="arx-sidenav-group">
        <span class="arx-sidenav-label">Settings</span>
        <a href="#" class="arx-sidenav-link">
            <i data-lucide="settings"></i> Preferences
        </a>
    </div>
</nav>

<!-- Page layout: sidebar + main content -->
<div style="display:flex; min-height:100vh;">

    <nav class="arx-sidenav arx-sidenav-sticky">
        <!-- nav content -->
    </nav>

    <main style="flex:1; padding:2rem;">
        <!-- page content -->
    </main>

</div>

<!-- Narrow -->
<nav class="arx-sidenav arx-sidenav-sm">...</nav>

<!-- Wide -->
<nav class="arx-sidenav arx-sidenav-lg">...</nav>

<!-- Custom width via token -->
<nav class="arx-sidenav" style="--arx-sidenav-width:320px;">...</nav>

<!-- No background/border — inline vertical menu -->
<nav class="arx-sidenav arx-sidenav-flush">...</nav>

<script src="vendor/lucide/lucide.min.js"></script>
<script>lucide.createIcons();</script>

<!-- Default -->
<ul class="arx-nav">
    <li><a class="arx-nav-link arx-active" href="#">Home</a></li>
    <li><a class="arx-nav-link" href="#">Docs</a></li>
</ul>

<!-- Filled pills -->
<ul class="arx-nav arx-nav-pills">...</ul>

<!-- Bordered tabs -->
<ul class="arx-nav arx-nav-tabs">...</ul>

<!-- Underline tabs -->
<ul class="arx-nav arx-nav-underline">...</ul>

<!-- Modifiers: arx-nav-fill, arx-nav-justified, arx-nav-vertical -->

<ul class="arx-nav arx-nav-tabs" data-arx-tabs>
    <li class="arx-nav-item">
        <a class="arx-nav-link arx-active" data-arx-tab="#one">One</a></li>
    <li class="arx-nav-item">
        <a class="arx-nav-link" data-arx-tab="#two">Two</a></li>
</ul>
<div class="arx-tab-content">
    <div class="arx-tab-pane arx-active" id="one">First panel</div>
    <div class="arx-tab-pane" id="two">Second panel</div>
</div>

<!-- Works with arx-nav-tabs / -pills / -underline / -vertical -->

// Clicks are auto-wired. To switch programmatically:
$('[data-arx-tabs]').tabs('show', '#two');
ArxTabs.show('#two');

// React to changes:
$('[data-arx-tabs]').on('arx:tabchange', function (e, tab, pane) {
    console.log('Showing', pane.id);
});

<ol class="arx-breadcrumb">
    <li class="arx-breadcrumb-item"><a href="#">Home</a></li>
    <li class="arx-breadcrumb-item"><a href="#">Components</a></li>
    <li class="arx-breadcrumb-item arx-active">Breadcrumb</li>
</ol>

<!-- Separator variants -->
<ol class="arx-breadcrumb arx-breadcrumb-chevron">...</ol>  <!-- › -->
<ol class="arx-breadcrumb arx-breadcrumb-dot">...</ol>      <!-- · -->

<!-- Custom separator -->
<ol class="arx-breadcrumb" style="--arx-breadcrumb-separator: '→'">...</ol>

<ul class="arx-pagination">
    <li><a class="arx-page-link arx-disabled" href="#">← Prev</a></li>
    <li><a class="arx-page-link arx-active"   href="#">1</a></li>
    <li><a class="arx-page-link"               href="#">2</a></li>
    <li><a class="arx-page-link"               href="#">Next →</a></li>
</ul>

<!-- Sizes: arx-pagination-sm, arx-pagination-lg -->
<!-- Style: arx-pagination-pills -->

<div class="arx-form-group">
    <label class="arx-label">Email</label>
    <input type="email" class="arx-input" placeholder="you@example.com">
    <div class="arx-form-text">We never share your email.</div>
</div>

<div class="arx-form-group">
    <label class="arx-label">Role</label>
    <select class="arx-select">
        <option>Admin</option>
    </select>
</div>

<div class="arx-form-group">
    <label class="arx-label">Notes</label>
    <textarea class="arx-textarea"></textarea>
</div>

<input class="arx-input arx-is-valid" value="correct@email.com">
<div class="arx-valid-feedback">Looks good!</div>

<input class="arx-input arx-is-invalid" value="bad input">
<div class="arx-invalid-feedback">Please enter a valid email.</div>

<label class="arx-check">
    <input type="checkbox" class="arx-check-input">
    Enable notifications
</label>

<label class="arx-check">
    <input type="radio" class="arx-check-input" name="plan">
    Starter plan
</label>

<div class="arx-input-group">
    <span class="arx-input-addon">https://</span>
    <input type="text" class="arx-input" placeholder="yourdomain.com">
</div>

<div class="arx-input-group">
    <input type="text" class="arx-input" placeholder="Search...">
    <button class="arx-btn arx-btn-primary">Go</button>
</div>

<label class="arx-form-switch">
    <input type="checkbox" class="arx-switch-input">
    Enable notifications
</label>

<!-- Sizes: arx-switch-sm, arx-switch-lg -->

<div class="arx-form-group">
    <label class="arx-label">Volume</label>
    <input type="range" class="arx-range" min="0" max="100" value="60">
</div>

<!-- Requires placeholder=" " (space) for :not(:placeholder-shown) state -->
<div class="arx-float">
    <input type="text" class="arx-input" placeholder=" ">
    <label>Full name</label>
</div>

<div class="arx-float">
    <select class="arx-select">
        <option>Admin</option>
    </select>
    <label>Role</label>
</div>

<div class="arx-segmented">
    <label class="arx-segment">
        <input type="radio" name="view" checked><span>Day</span>
    </label>
    <label class="arx-segment">
        <input type="radio" name="view"><span>Week</span>
    </label>
</div>

<!-- Accent thumb: arx-segmented-primary -->
<!-- Sizes: arx-segmented-sm / -lg   Full width: -block -->

<div class="arx-tag-input" data-arx-tags
     data-arx-tags-name="labels"
     data-arx-tags-value="design,frontend">
    <input class="arx-tag-input-field" placeholder="Add a tag…">
</div>

<!-- Options: data-arx-tags-max, data-arx-tags-dupes="true" -->
<!-- Standalone chip: <span class="arx-tag arx-tag-primary"> -->

$('#el').tags('add', 'newtag');
$('#el').tags('remove', 'oldtag');
$('#el').tags('get');     // → ['design', 'frontend']
$('#el').tags('clear');
// Event: $('#el').on('arx:tagschange', (e, list) => { … });

<!-- Styled native input (no JS) -->
<input type="file" class="arx-file" multiple>

<!-- Dropzone with drag & drop -->
<div class="arx-dropzone" data-arx-dropzone>
    <div class="arx-dropzone-icon">⬆</div>
    <div class="arx-dropzone-text"><strong>Browse</strong> or drop</div>
    <div class="arx-dropzone-hint">PNG, JPG up to 5 MB</div>
    <input type="file" class="arx-dropzone-input" multiple>
</div>

// $('#dz').dropzone('files')  → [File]   ·   $('#dz').dropzone('clear')
// $('#dz').on('arx:fileschange', (e, files) => { … });

<!-- Interactive — note the reverse 5→1 order -->
<div class="arx-rating">
    <input type="radio" name="r" id="r5"><label for="r5"></label>
    <input type="radio" name="r" id="r4" checked><label for="r4"></label>
    <!-- … r3, r2, r1 … -->
</div>

<!-- Read-only, fractional -->
<span class="arx-rating-display" style="--arx-rating:3.5"
      role="img" aria-label="3.5 out of 5"></span>

<div class="arx-quantity" data-arx-quantity>
    <button class="arx-quantity-btn" data-arx-quantity-dec
            aria-label="Decrease">−</button>
    <input class="arx-quantity-input" type="number"
           value="1" min="0" max="10" step="1">
    <button class="arx-quantity-btn" data-arx-quantity-inc
            aria-label="Increase">+</button>
</div>

// $('#q').quantity('get')  ·  $('#q').quantity('set', 5)
// $('#q').on('arx:quantitychange', (e, val) => { … });

<div class="arx-autocomplete" data-arx-autocomplete>
    <input class="arx-input" placeholder="Search…">
    <script type="application/json" class="arx-autocomplete-source">
        ["Apple", "Apricot", "Banana"]
    </script>
</div>

// Array of strings or { label, value } objects
$('#ac').autocomplete({ source: ['Apple', 'Banana'], minChars: 1, limit: 8 });

// Async (remote) source
$('#ac').autocomplete({ source: function (q, done) {
    fetch('/search?q=' + q).then(r => r.json()).then(done);
}});

// $('#ac').on('arx:autocomplete-select', (e, item) => { … });

<select data-arx-select data-arx-select-search>
    <option value="">Choose…</option>
    <option value="apple">Apple</option>
</select>

<!-- Multiselect (chips) -->
<select multiple data-arx-select> … </select>

// $('#el').arxSelect('open'|'close'|'refresh')
// $(el).on('arx:select-change', (e, val) => { … });

<input class="arx-input" data-arx-datepicker
       placeholder="YYYY-MM-DD">

<!-- Range + bounds -->
<input class="arx-input" data-arx-datepicker
       data-arx-datepicker-range
       data-arx-datepicker-min="2026-01-01"
       data-arx-datepicker-max="2026-12-31">

// $('#el').datepicker('open'|'close')
// $(el).on('arx:datepicker-change', (e, val) => { … });

<input class="arx-input" data-arx-timepicker
       data-arx-timepicker-step="15">

<!-- 12-hour display, business-hours bounds -->
<input class="arx-input" data-arx-timepicker
       data-arx-timepicker-12h
       data-arx-timepicker-min="09:00"
       data-arx-timepicker-max="17:00">

// value is 24h HH:MM regardless of display
// $('#el').timepicker('open'|'close')
// $(el).on('arx:timepicker-change', (e, val) => { … });

<input type="range" min="0" max="100" value="40"
       data-arx-range data-arx-range-tooltip
       data-arx-range-ticks="5">

<!-- Dual handle (min–max) -->
<div data-arx-range data-arx-range-dual data-arx-range-tooltip>
  <input type="range" min="0" max="100" value="25">
  <input type="range" min="0" max="100" value="75">
</div>

// $('#el').arxRange('get')  → 40  or  [25, 75]
// $('#el').arxRange('set', 60)  ·  ('set', [20, 80])
// $(el).on('arx:range-change', (e, v) => { … });

<div data-arx-otp data-arx-otp-length="6"
     data-arx-otp-name="code"></div>

// $('#el').otp('get')  → "123456"
// $('#el').otp('set', '000000')  ·  ('clear')
// $(el).on('arx:otp-complete', (e, code) => { … });

<input type="password" class="arx-input"
       data-arx-password
       data-arx-password-meter
       data-arx-password-rules
       data-arx-password-min="8">

// $('#el').arxPassword('score')  → 0–4
// $('#el').arxPassword('toggle')  // show/hide
// $(el).on('arx:password-strength', (e, s) => s.score, s.label);

<input class="arx-input" data-arx-mask="(999) 999-9999">
<input class="arx-input" data-arx-mask="phone">
<input class="arx-input" data-arx-mask="currency"
       data-arx-mask-name="amount_raw">

// $('#el').mask('get')  → "(555) 123-4567"
// $('#el').mask('raw')  → "5551234567"
// $(el).on('arx:mask-change', (e, v) => { … });

<button class="arx-btn arx-btn-primary">Primary</button>
<button class="arx-btn arx-btn-secondary">Secondary</button>
<button class="arx-btn arx-btn-success">Success</button>
<button class="arx-btn arx-btn-danger">Danger</button>
<button class="arx-btn arx-btn-warning">Warning</button>
<button class="arx-btn arx-btn-info">Info</button>
<button class="arx-btn arx-btn-ghost">Ghost</button>
<button class="arx-btn arx-btn-outline">Outline</button>
<button class="arx-btn arx-btn-outline-primary">Outline Primary</button>

<button class="arx-btn arx-btn-primary arx-btn-sm">Small</button>
<button class="arx-btn arx-btn-primary">Default</button>
<button class="arx-btn arx-btn-primary arx-btn-lg">Large</button>

<button class="arx-btn arx-btn-primary" disabled>Disabled</button>
<button class="arx-btn arx-btn-primary arx-disabled">Disabled (class)</button>
<button class="arx-btn arx-btn-primary arx-btn-loading">Loading</button>

<div class="arx-btn-group">
    <button class="arx-btn arx-btn-outline">Left</button>
    <button class="arx-btn arx-btn-outline">Center</button>
    <button class="arx-btn arx-btn-outline">Right</button>
</div>

<button class="arx-close">✕</button>
<button class="arx-close" disabled>✕</button>

<div class="arx-card">
    <div class="arx-card-header">Card Title</div>
    <div class="arx-card-body">
        <div class="arx-card-title">Heading</div>
        <p class="arx-card-text">Body text goes here.</p>
        <button class="arx-btn arx-btn-primary arx-btn-sm">Action</button>
    </div>
    <div class="arx-card-footer">Footer note</div>
</div>

<div class="arx-card-deck">
    <div class="arx-card">
        <img class="arx-card-img-top" src="…" style="height:160px;">
        <div class="arx-card-body">
            <div class="arx-card-title">Title</div>
            <p class="arx-card-text">…</p>
            <button class="arx-btn arx-btn-primary arx-btn-sm">Action</button>
        </div>
    </div>
    <div class="arx-card">…</div>
    <div class="arx-card">…</div>
</div>

<!-- 3-column square grid with hover overlay -->
<div class="arx-gallery arx-gallery-3 arx-gallery-square">
    <div class="arx-gallery-item">
        <img class="arx-gallery-img" src="…" alt="">
        <div class="arx-gallery-overlay">
            <span class="arx-gallery-caption">Caption</span>
        </div>
    </div>

    <!-- Span 2 columns -->
    <div class="arx-gallery-item arx-gallery-span-2">…</div>
</div>

<!-- Column count: arx-gallery-2/3/4/5/6     -->
<!-- Height:       arx-gallery-sm/md/lg/xl   -->
<!-- Aspect ratio: arx-gallery-square / wide -->
<!-- Gap:          arx-gallery-gap-0/1/2/3/4 -->

<button data-arx-modal="#my-modal">Launch modal</button>

<!-- Hidden source — children are moved into the dialog -->
<div id="my-modal" style="display:none;">
    <div class="arx-modal-header"><h3>Deploy to production?</h3></div>
    <div class="arx-modal-body"><p>Publishes the build to all regions.</p></div>
    <div class="arx-modal-footer">
        <button class="arx-modal-btn" data-arx-modal-close>Cancel</button>
        <button class="arx-modal-btn arx-modal-btn-primary" data-arx-modal-close>Deploy</button>
    </div>
</div>

<button data-arx-offcanvas="#menu">Menu</button>

<aside id="menu" class="arx-offcanvas arx-offcanvas-start" tabindex="-1">
    <div class="arx-offcanvas-header">
        <h3 class="arx-offcanvas-title">Navigation</h3>
        <button class="arx-close" data-arx-offcanvas-close
                aria-label="Close"></button>
    </div>
    <div class="arx-offcanvas-body"> … </div>
</aside>

data-arx-offcanvas="#id"   Trigger — toggles the panel
data-arx-offcanvas-close   Closes the panel (on any element inside)
data-arx-backdrop="false"  Open without a backdrop
data-arx-scroll="true"     Don't lock body scroll while open
Sizes: arx-offcanvas-sm / -lg   Edges: -start -end -top -bottom

$('#menu').offcanvas('show');   // or 'hide', 'toggle'
ArxOffcanvas.open('#menu');  ArxOffcanvas.close();

<nav class="arx-sidenav" data-arx-scrollspy
     data-arx-scrollspy-offset="80">
    <a class="arx-sidenav-link" href="#intro">Intro</a>
    <a class="arx-sidenav-link" href="#usage">Usage</a>
</nav>

<section id="intro"> … </section>
<section id="usage"> … </section>

<!-- Spy a scroll container: data-arx-scrollspy-root="#box" -->
<!-- Recompute after DOM changes: ArxScrollspy.refresh() -->

<pre><code class="language-javascript">…your code…</code></pre>

<script>
// Highlight one block, with line numbers + a copy button
$('#docs-syntax-demo code').syntax({ lineNumbers: true, copyButton: true });

// …or every code block on the page
$('pre code').syntax();
</script>

<div class="arx-alert arx-alert-info">
    <span class="arx-alert-icon">ℹ</span>
    <div class="arx-alert-body">
        <div class="arx-alert-title">Information</div>
        Your account has been updated.
    </div>
</div>

<!-- Variants: arx-alert-info/success/warning/danger -->

<!-- Dismissible — close is auto-wired by js/arx.js -->
<div class="arx-alert arx-alert-danger arx-alert-dismissible">
    <div class="arx-alert-body">Authentication failed.</div>
    <button class="arx-alert-close" aria-label="Dismiss">✕</button>
</div>

// Auto-wired: clicking .arx-alert-close (or any [data-arx-dismiss]
// inside an alert) fades it out and removes it. To dismiss in code:
$('#my-alert').alert('close');
ArxAlert.dismiss('#my-alert');

<div class="arx-banner">
    <div class="arx-banner-body">
        Notice — <a href="#">learn more</a>.
    </div>
    <button class="arx-banner-close" data-arx-dismiss
            aria-label="Dismiss">×</button>
</div>

<!-- Variants: arx-banner-subtle, -success, -danger, -warning, -info -->

<span class="arx-badge arx-badge-primary">Primary</span>
<span class="arx-badge arx-badge-success">Success</span>
<span class="arx-badge arx-badge-danger">Danger</span>
<span class="arx-badge arx-badge-warning">Warning</span>
<span class="arx-badge arx-badge-info">Info</span>
<span class="arx-badge arx-badge-secondary">Secondary</span>

<span class="arx-badge arx-badge-solid-primary">Primary</span>
<span class="arx-badge arx-badge-solid-success">Success</span>
<span class="arx-badge arx-badge-solid-danger">Danger</span>

<span class="arx-badge arx-badge-outline-primary">Primary</span>
<span class="arx-badge arx-badge-outline-success">Success</span>
<span class="arx-badge arx-badge-outline-danger">Danger</span>

<span class="arx-badge arx-badge-primary arx-badge-sm">Small</span>
<span class="arx-badge arx-badge-primary">Default</span>
<span class="arx-badge arx-badge-primary arx-badge-lg">Large</span>

<!-- Square (non-pill) shape -->
<span class="arx-badge arx-badge-solid-danger arx-badge-square">12</span>

<!-- Static dot -->
<span class="arx-badge arx-badge-dot arx-badge-solid-success"></span>

<!-- Animated ping for live status -->
<span class="arx-badge arx-badge-dot arx-badge-solid-success arx-badge-pulse"></span>

<div class="arx-badge-wrap">
    <button class="arx-btn arx-btn-outline">Notifications</button>
    <span class="arx-badge arx-badge-solid-danger arx-badge-pos">9</span>
</div>

<!-- Badge inline in a heading -->
<h4>Dashboard <span class="arx-badge arx-badge-success arx-badge-sm">Beta</span></h4>

<!-- Badge inside a button -->
<button class="arx-btn arx-btn-outline">
    Inbox <span class="arx-badge arx-badge-solid-danger">3</span>
</button>

<!-- Initials -->
<span class="arx-avatar arx-avatar-success">JL</span>

<!-- Image -->
<span class="arx-avatar"><img src="me.jpg" alt="Me"></span>

<!-- With a status dot -->
<span class="arx-avatar">SP
    <span class="arx-avatar-status arx-avatar-status-online"></span>
</span>

<!-- Stacked group -->
<span class="arx-avatar-group">
    <span class="arx-avatar arx-avatar-sm">A</span>
    <span class="arx-avatar arx-avatar-sm arx-avatar-info">B</span>
</span>

<!-- Sizes: -xs -sm (default) -lg -xl · Shape: -square
     Status: -online -busy -away · Variants: -primary…-info, -muted -->

<div class="arx-card"><div class="arx-card-body">
    <div class="arx-stat">
        <span class="arx-stat-label">Revenue</span>
        <span class="arx-stat-value">$48.2k</span>
        <span class="arx-stat-trend arx-stat-trend-up">▲ 12.4%</span>
    </div>
</div></div>

<!-- Value sizes: .arx-stat-value-sm / -lg -->

<div class="arx-chat">
    <div class="arx-bubble arx-bubble-received">Hello!</div>
    <div class="arx-bubble arx-bubble-sent">Hi there 👋</div>
</div>

<ul class="arx-list-group">
    <li class="arx-list-group-item">Profile</li>
    <li class="arx-list-group-item">Settings</li>
</ul>

<!-- Clickable rows -->
<ul class="arx-list-group">
    <a class="arx-list-group-item arx-list-group-action arx-active" href="#">Active</a>
    <a class="arx-list-group-item arx-list-group-action" href="#">Item</a>
</ul>

<!-- Variants: arx-list-group-flush, arx-list-group-numbered, arx-list-group-horizontal -->
<!-- Item colors: arx-list-group-success/danger/warning/info/primary -->

<ul class="arx-timeline">
    <li class="arx-timeline-item arx-timeline-success">
        <div class="arx-timeline-time">09:24</div>
        <div class="arx-timeline-title">Deployed v1.2.0</div>
        <div class="arx-timeline-body">All checks green.</div>
    </li>
</ul>

<!-- Dot colour: arx-timeline-primary/success/danger/warning/info -->

<div class="arx-empty">
    <div class="arx-empty-icon">📭</div>
    <div class="arx-empty-title">No messages yet</div>
    <p class="arx-empty-text">When someone writes, it shows here.</p>
    <div class="arx-empty-action">
        <button class="arx-btn arx-btn-primary">Compose</button>
    </div>
</div>

<ol class="arx-stepper" data-arx-stepper
    data-arx-step-panels="#panes">
    <li class="arx-step"><span class="arx-step-marker"></span>
        <span class="arx-step-label">Account</span></li>
    <li class="arx-step"> … </li>
</ol>
<div id="panes">
    <div class="arx-step-pane"> … </div>   <!-- one per step -->
</div>
<button data-arx-step-prev="#…">Back</button>
<button data-arx-step-next="#…">Next</button>

<!-- Mark steps directly (no JS) -->
<li class="arx-step arx-step-complete"> … </li>
<li class="arx-step arx-step-active"> … </li>

$('#wizard').stepper('next');   // or 'prev'
$('#wizard').stepper('goto', 2);
ArxStepper.goTo('#wizard', 0);
// Event: $('#wizard').on('arx:stepchange', (e, i) => { … });

<div class="arx-accordion">
    <details class="arx-accordion-item" open>
        <summary class="arx-accordion-header">Title</summary>
        <div class="arx-accordion-body">Content…</div>
    </details>
    <details class="arx-accordion-item">
        <summary class="arx-accordion-header">Another</summary>
        <div class="arx-accordion-body">More content…</div>
    </details>
</div>

<!-- Borderless: add .arx-accordion-flush -->
<!-- Single-open + animated: add data-arx-accordion="single" -->

// Auto-wired when data-arx-accordion is present. Or init manually:
$('.arx-accordion').accordion({
    single:   true,   // close others when one opens
    animate:  true,   // slide the body open/closed
    duration: 220
});

<div class="arx-dropdown">
    <button class="arx-btn arx-dropdown-toggle">Menu</button>
    <div class="arx-dropdown-menu">
        <span class="arx-dropdown-header">Account</span>
        <a class="arx-dropdown-item arx-active" href="#">Profile</a>
        <a class="arx-dropdown-item" href="#">Settings</a>
        <div class="arx-dropdown-divider"></div>
        <a class="arx-dropdown-item" href="#">Sign out</a>
    </div>
</div>

// Auto-wired by js/arx.js — clicking a .arx-dropdown-toggle
// toggles .arx-open, outside-click and Escape close it.
// To close programmatically:
ArxDropdown.closeAll();

<button class="arx-btn" data-arx-tooltip="Saves your changes">
    Save
</button>

<!-- Position: arx-tooltip-top (default) / bottom / left / right -->
<button class="arx-btn arx-tooltip-bottom" data-arx-tooltip="Below">
    Bottom
</button>

<!-- Text body (default: click trigger, top placement) -->
<button class="arx-btn" data-arx-popover="Body text here"
        data-arx-popover-title="Title">Info</button>

<!-- Hover trigger, placed to the right -->
<button class="arx-btn" data-arx-popover="Quick hint"
        data-arx-trigger="hover" data-arx-placement="right">?</button>

<!-- Rich content cloned from a hidden element -->
<a data-arx-popover-target="#tpl" data-arx-popover-title="Details">Open</a>
<div id="tpl" hidden><strong>Any</strong> markup works.</div>

data-arx-popover           Body text (escaped)
data-arx-popover-target    Selector of a hidden element to clone as the body
data-arx-popover-title     Optional header text
data-arx-placement         top (default) | bottom | left | right
data-arx-trigger           click (default) | hover

// Programmatic control
$('#el').popover('show');   // or 'hide', 'toggle', 'dispose'
ArxPopover.closeAll();

<form data-arx-validate>
    <div class="arx-form-group">
        <input class="arx-input" type="email" required
               data-arx-msg-required="We need your email.">
    </div>
    <div class="arx-form-group">
        <input class="arx-input" type="password" id="pw"
               required minlength="8">
    </div>
    <div class="arx-form-group">
        <input class="arx-input" type="password"
               data-arx-rules="matches:#pw"
               data-arx-msg-matches="Passwords don't match.">
    </div>
    <button class="arx-btn arx-btn-primary">Create</button>
</form>

// Register a named rule — return true | false | a message
// | a Promise of any of those (async checks gate submit).
ArxValidate.addRule('username', function (value) {
    return fetch('/api/check?u=' + value)
        .then(r => r.json())
        .then(d => d.free || 'That username is taken.');
}, 'Choose a username.');

// Programmatic control
$('#signup').arxValidate();            // → true if every field passes
$('#signup').arxValidate('field', '#email');
$('#signup').arxValidate('reset');     // clear classes + messages

// Events fired on the form
$('#signup').on('arx:validate-success', () => save());
$('#signup').on('arx:validate-invalid', (e, p) => p.first.focus());

<div class="arx-carousel" data-arx-carousel
     data-arx-carousel-autoplay="4000">
    <div class="arx-carousel-track">
        <div class="arx-carousel-slide"><img src="1.jpg"></div>
        <div class="arx-carousel-slide"><img src="2.jpg"></div>
    </div>
    <button class="arx-carousel-prev" aria-label="Previous"></button>
    <button class="arx-carousel-next" aria-label="Next"></button>
    <div class="arx-carousel-indicators"></div>
</div>

// $('#c').carousel('next' | 'prev')  ·  ('goto', 2)
// $('#c').on('arx:slide', (e, i) => { … });

<div class="arx-progress-wrap">
    <div class="arx-progress" style="width:60%"></div>
</div>

<!-- Variants: arx-progress-success/danger/warning/info -->
<!-- Animated: arx-progress-striped -->
<!-- Sizes on the wrap: arx-progress-sm, arx-progress-lg -->

<!-- With label -->
<div class="arx-progress-labeled">
    <div class="arx-progress-wrap">
        <div class="arx-progress arx-progress-success" style="width:88%"></div>
    </div>
    <span class="arx-progress-label">88%</span>
</div>

<!-- Circle spinner -->
<div class="arx-spinner"></div>
<div class="arx-spinner arx-spinner-sm"></div>
<div class="arx-spinner arx-spinner-lg"></div>

<!-- Color variants -->
<div class="arx-spinner arx-spinner-success"></div>
<div class="arx-spinner arx-spinner-danger"></div>

<!-- Dots -->
<div class="arx-spinner-dots"><span></span><span></span><span></span></div>

<!-- Grow pulse -->
<div class="arx-spinner-grow"></div>

<!-- Inside a button -->
<button class="arx-btn arx-btn-primary arx-d-flex arx-align-center arx-gap-2">
    <div class="arx-spinner arx-spinner-sm"></div>
    Loading…
</button>

<!-- Pulse (default) -->
<div class="arx-placeholder arx-placeholder-lg arx-w-75"></div>
<div class="arx-placeholder arx-w-100"></div>
<div class="arx-placeholder arx-placeholder-btn"></div>

<!-- Shimmer sweep -->
<div class="arx-placeholder-glow">
    <div class="arx-placeholder arx-w-100"></div>
    <div class="arx-placeholder arx-w-75"></div>
</div>

<!-- Sizes: arx-placeholder-xs/sm/lg/xl -->
<!-- Widths: arx-w-25/50/75 or inline width -->
<!-- Button shape: arx-placeholder-btn -->
<!-- Card wrapper: arx-skeleton -->

ArxToast.show('Profile saved');
ArxToast.success('Saved', { title: 'Done', duration: 4000 });
ArxToast.danger('Upload failed', { duration: 0 });   // sticky

// Options: title, variant, duration (0 = sticky), position,
//          dismissible, icon (string/HTML or false), progress
// Variants: ArxToast.primary/success/danger/warning/info
// Positions: top-right (default), top-left, bottom-right,
//            bottom-left, top-center, bottom-center
ArxToast.clear();   // dismiss all

<button data-arx-toast="Copied to clipboard"
        data-arx-toast-variant="success"
        data-arx-toast-title="Done">Copy</button>

arx-text-left | arx-text-center | arx-text-right

arx-text-primary | arx-text-secondary | arx-text-muted
arx-text-success | arx-text-danger | arx-text-warning | arx-text-info

arx-text-uppercase | arx-text-lowercase | arx-text-nowrap | arx-text-truncate

arx-fw-light | arx-fw-normal | arx-fw-medium | arx-fw-bold

<!-- Inside a button -->
<button class="arx-btn arx-btn-primary arx-d-flex arx-align-center arx-gap-2">
    <i data-lucide="plus" style="width:16px;height:16px;"></i>
    New item
</button>

<!-- Colour follows CSS color -->
<i data-lucide="heart" style="width:20px;height:20px;color:var(--arx-danger);"></i>
<i data-lucide="check-circle" style="width:20px;height:20px;color:var(--arx-success);"></i>

<!-- Size via width/height -->
<i data-lucide="star" style="width:32px;height:32px;"></i>