Throbber / Loading Indicator

Indicates ongoing processes. Requires CSS for animation.

<!-- Basic Throbber -->
<div class="throbber" role="status" aria-label="Loading">
    <div class="throbber-circle"></div>
</div>

<!-- Multi-Ring Throbber -->
<div class="throbber" role="status" aria-label="Loading">
    <div class="throbber-circle"></div>
    <div class="throbber-circle inner"></div>
</div>

<!-- JS Controlled (HTML part) -->
<div class="throbber-container">
    <button id="toggle-loading" type="button">Start Loading</button>
    <div id="loading-throbber" class="throbber" role="status" aria-hidden="true">
        <div class="throbber-circle"></div>
    </div>
</div>
                

// Basic JS for the toggle example (Ensure this is in scripts.js)
document.addEventListener('DOMContentLoaded', () => {
    const toggleButton = document.getElementById('toggle-loading');
    const throbber = document.getElementById('loading-throbber');

    if (toggleButton && throbber) { // Check if elements exist
        toggleButton.addEventListener('click', () => {
            const isLoading = throbber.classList.toggle('active');
            throbber.setAttribute('aria-hidden', !isLoading);
            toggleButton.textContent = isLoading ? 'Stop Loading' : 'Start Loading';
        });
    }
});
                

Alerts

Display contextual feedback messages using `alert` and modifier classes.

<div class="alert alert-success" role="alert">
    Success! Your operation was completed.
</div>

<div class="alert alert-error" role="alert">
    Error! Something went wrong.
</div>

<div class="alert alert-info" role="alert">
    Info: This is an informational message.
</div>
                

Breadcrumbs

Show the user's location within the site hierarchy using nested lists.

<nav class="breadcrumbs" aria-label="Breadcrumb">
    <ol>
        <li><a href="#">Home</a></li>
        <li><a href="#">Category</a></li>
        <li aria-current="page">Current Page</li>
    </ol>
</nav>
                

Tooltips

Provide brief information on hover using the `tooltip` class and `data-tooltip` attribute.

<button type="button" class="tooltip" data-tooltip="Tooltip for the button!">Hover Button</button>

<span class="tooltip" data-tooltip="Tooltip for the span." tabindex="0">Focusable Span</span>
                 

Toast Notifications

Show temporary, non-intrusive messages. Usually triggered by JavaScript.

(Toasts are typically shown dynamically with JavaScript)

<!-- Example Toast Structure (often added/removed by JS) -->
<div class="toast toast-success" role="alert" aria-live="assertive">
    Success! Your changes have been saved.
</div>

<div class="toast toast-error" role="alert" aria-live="assertive">
    Error! Could not perform the action.
</div>
                 

Accordion

Collapsible content panels. Requires JavaScript for interaction.

<section class="accordion">
    <!-- Accordion Item 1 -->
    <div>
        <h4 id="acc1-header"> <!-- Heading level can vary -->
            <button type="button" aria-expanded="false" aria-controls="acc1-content">
                Accordion Title 1
            </button>
        </h4>
        <div id="acc1-content" role="region" aria-labelledby="acc1-header" hidden>
            <p>Panel content 1...</p>
        </div>
    </div>

    <!-- Accordion Item 2 -->
    <div>
        <h4 id="acc2-header">
            <button type="button" aria-expanded="false" aria-controls="acc2-content">
                Accordion Title 2
            </button>
        </h4>
        <div id="acc2-content" role="region" aria-labelledby="acc2-header" hidden>
            <p>Panel content 2...</p>
        </div>
    </div>
</section>
                

// Basic JS for Accordion (Ensure this is in scripts.js and handles multiple accordions)
document.addEventListener('DOMContentLoaded', () => {
    const accordionButtons = document.querySelectorAll('.accordion h4 button[aria-controls]');

    accordionButtons.forEach(button => {
        button.addEventListener('click', () => {
            const panel = document.getElementById(button.getAttribute('aria-controls'));
            const isExpanded = button.getAttribute('aria-expanded') === 'true';

            button.setAttribute('aria-expanded', !isExpanded);
            panel.toggleAttribute('hidden');
        });
        // Add keyboard support (Enter/Space) if not already present
    });
});
                

Tabs

Switch between different content panels. Requires JavaScript for interaction.

<section class="tabs">
    <ul role="tablist" aria-label="Descriptive Label">
        <li role="tab" id="tab1" aria-selected="true" aria-controls="panel1" tabindex="0">Tab 1</li>
        <li role="tab" id="tab2" aria-selected="false" aria-controls="panel2" tabindex="-1">Tab 2</li>
    </ul>
    <div id="panel1" role="tabpanel" aria-labelledby="tab1" tabindex="0">
        <p>Content for Tab 1.</p>
    </div>
    <div id="panel2" role="tabpanel" aria-labelledby="tab2" hidden tabindex="0">
        <p>Content for Tab 2.</p>
    </div>
</section>
                

// Basic JS for Tabs (Ensure this is in scripts.js and handles multiple tab groups)
document.addEventListener('DOMContentLoaded', () => {
    const tabLists = document.querySelectorAll('.tabs [role="tablist"]');
    tabLists.forEach(tabList => {
        const tabs = tabList.querySelectorAll('[role="tab"]');
        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                // Deactivate all tabs in the group
                tabs.forEach(t => {
                    t.setAttribute('aria-selected', 'false');
                    t.setAttribute('tabindex', '-1');
                    const panel = document.getElementById(t.getAttribute('aria-controls'));
                    if (panel) panel.hidden = true;
                });
                // Activate the clicked tab
                tab.setAttribute('aria-selected', 'true');
                tab.setAttribute('tabindex', '0');
                const activePanel = document.getElementById(tab.getAttribute('aria-controls'));
                if (activePanel) activePanel.hidden = false;
            });
            // Add keyboard navigation (Arrows) if not already present
        });
    });
});
                

Dropdown Menu

Reveal a list of options on interaction. Requires JavaScript.

<div class="dropdown">
    <button type="button" class="dropdown-toggle" aria-haspopup="true" aria-expanded="false" aria-controls="dd-menu-id">
        Menu
    </button>
    <ul class="dropdown-menu" id="dd-menu-id" role="menu" aria-hidden="true">
        <li role="none"><a href="#" role="menuitem">Option 1</a></li>
        <li role="none"><a href="#" role="menuitem">Option 2</a></li>
        <li role="separator"></li> <!-- Optional -->
        <li role="none"><a href="#" role="menuitem">Option 3</a></li>
    </ul>
</div>
                

// Basic JS for Dropdown (Ensure this is in scripts.js)
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.dropdown-toggle').forEach(toggle => {
        toggle.addEventListener('click', () => {
            const menu = toggle.nextElementSibling; // Assumes menu is the next sibling
            const isOpen = menu.classList.toggle('show');
            menu.setAttribute('aria-hidden', !isOpen);
            toggle.setAttribute('aria-expanded', isOpen);
        });
    });
    // Add click outside to close functionality if needed
});
                

Progress Bar

Indicate the completion status of a task. Can be updated with JavaScript.

<label for="prog-bar">Task Progress:</label>
<div class="progress-bar" id="prog-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress" style="width: 50%;"></div>
</div>
                 

// Basic JS for Progress Bar button (Ensure this is in scripts.js)
document.addEventListener('DOMContentLoaded', () => {
    const progressButton = document.querySelector('#progress-bar-demo .progress-btn');
    const progressBar = document.querySelector('#progress-bar-demo .progress-bar');
    const progressInner = progressBar ? progressBar.querySelector('.progress') : null;
    let progressValue = 0; // Start at 0 or current value

    if (progressButton && progressBar && progressInner) {
         // Get initial value if set
         const initialValue = parseInt(progressBar.getAttribute('aria-valuenow'), 10);
         if (!isNaN(initialValue)) {
             progressValue = initialValue;
         }

        progressButton.addEventListener('click', () => {
            progressValue = Math.min(progressValue + 10, 100); // Increment by 10%, max 100%
            if (progressInner) {
                 progressInner.style.width = `${progressValue}%`;
            }
            progressBar.setAttribute('aria-valuenow', progressValue);

            // Optional: Disable button when progress is complete
            if (progressValue === 100) {
                progressButton.textContent = 'Completed!';
                progressButton.disabled = true;
            }
        });
    }
});
                 

Navbar / Navigation Bar

The navbar provides consistent page navigation. It includes a logo, main navigation links, a mobile hamburger menu toggle, and a theme switcher. It's designed to be sticky at the top.

Example Structure:

The following HTML is used for the main navigation bar at the top of this page:

<header class="full-bleed">
    <nav class="navbar">
        <!-- Logo with Version -->
        <a href="#" class="logo" aria-label="Axiom Framework Home v0.1">
            <div class="logo-text">
                <span>[</span>
                <span>A</span>
                <span>X</span>
                <span>1</span>
                <span>0</span>
                <span>M</span>
                <span>]</span>
            </div>
            <small class="version">v0.1</small>
        </a>

        <!-- Hamburger Menu Button (for mobile) -->
        <button class="menu-toggle" aria-label="Toggle Navigation" aria-expanded="false" aria-controls="nav-links-main">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </button>

        <!-- Main Navigation Links -->
        <ul class="nav-links" id="nav-links-main">
            <li><a href="#about">About</a></li>
            <li><a href="#usage">Get started</a></li>
            <!-- ... other list items ... -->
            <li><a href="https://github.com/Sol-Roth-Media/axiom01" target="_blank" rel="noopener noreferrer">GitHub</a></li>
        </ul>

        <!-- Standalone Theme Toggle Button -->
        <button class="theme-toggle" title="Toggle Dark/Light Mode" aria-label="Toggle Dark Light Mode">
             &#9728; <!-- Default to sun icon, JS updates it -->
        </button>
    </nav>
</header>
                

Key CSS Classes & JavaScript:

• .navbar: Main container for the navigation bar. Styled with flexbox.
• .logo, .logo-text, .version: For styling the logo and version number.
• .menu-toggle, .bar: For the mobile hamburger menu. Its visibility and open/close state are controlled by CSS media queries and JavaScript (in js/scripts.js).
• .nav-links: The `ul` containing the navigation items. JavaScript toggles an .open class for mobile display.
• .theme-toggle: The button for switching themes. JavaScript handles the theme change and icon update.
• .full-bleed on <header>: Allows the navbar background to span the full viewport width.

Refer to axiom.css for detailed styling and js/scripts.js for interactive behaviors.