## Interactive Elements

JavaScript components for accordions, collapsibles, modals, tooltips, and notifications.

### Accordion Manager

Accordion-style collapsible panels with accessibility support.

Stylescape is a comprehensive design system and component library for building modern web interfaces.

Install via npm: `npm install stylescape`

Yes! All components are built with WCAG 2.1 accessibility guidelines in mind.

Configure your development environment.

Install the package and dependencies.

Customize settings for your project.

HTML

    <!-- Single open accordion -->
            <div
                data-ss="accordion"
                data-ss-accordion-multiple="false"
                style="
                    border: 1px solid var(--color_line_secondary);
                    border-radius: 12px;
                    overflow: hidden;
                "
            >
                <div class="accordion-item">
                    <button
                        data-ss-accordion-header
                        aria-expanded="true"
                        style="
                            width: 100%;
                            padding: 16px 20px;
                            background: var(--color_fill_secondary);
                            border: none;
                            text-align: left;
                            cursor: pointer;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            font-weight: 500;
                        "
                    >
                        What is Stylescape?
                        <span style="transition: transform 0.3s">▼</span>
                    </button>
                    <div
                        data-ss-accordion-content
                        style="
                            padding: 16px 20px;
                            border-top: 1px solid var(--color_line_secondary);
                        "
                    >
                        <p style="margin: 0">
                            Stylescape is a comprehensive design system and
                            component library for building modern web interfaces.
                        </p>
                    </div>
                </div>
                <div
                    class="accordion-item"
                    style="border-top: 1px solid var(--color_line_secondary)"
                >
                    <button
                        data-ss-accordion-header
                        aria-expanded="false"
                        style="
                            width: 100%;
                            padding: 16px 20px;
                            background: transparent;
                            border: none;
                            text-align: left;
                            cursor: pointer;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            font-weight: 500;
                        "
                    >
                        How do I install it?
                        <span style="transition: transform 0.3s">▼</span>
                    </button>
                    <div
                        data-ss-accordion-content
                        hidden
                        style="
                            padding: 16px 20px;
                            border-top: 1px solid var(--color_line_secondary);
                        "
                    >
                        <p style="margin: 0">
                            Install via npm:
                            <code>npm install stylescape</code>
                        </p>
                    </div>
                </div>
                <div
                    class="accordion-item"
                    style="border-top: 1px solid var(--color_line_secondary)"
                >
                    <button
                        data-ss-accordion-header
                        aria-expanded="false"
                        style="
                            width: 100%;
                            padding: 16px 20px;
                            background: transparent;
                            border: none;
                            text-align: left;
                            cursor: pointer;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            font-weight: 500;
                        "
                    >
                        Is it accessible?
                        <span style="transition: transform 0.3s">▼</span>
                    </button>
                    <div
                        data-ss-accordion-content
                        hidden
                        style="
                            padding: 16px 20px;
                            border-top: 1px solid var(--color_line_secondary);
                        "
                    >
                        <p style="margin: 0">
                            Yes! All components are built with WCAG 2.1
                            accessibility guidelines in mind.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Multiple open accordion -->
            <div
                data-ss="accordion"
                data-ss-accordion-multiple="true"
                data-ss-accordion-default="0,1"
                style="
                    margin-top: 24px;
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                "
            >
                <div
                    class="accordion-item"
                    style="
                        border: 1px solid var(--color_line_secondary);
                        border-radius: 8px;
                        overflow: hidden;
                    "
                >
                    <button
                        data-ss-accordion-header
                        aria-expanded="true"
                        style="
                            width: 100%;
                            padding: 14px 16px;
                            background: var(--color_fill_primary);
                            color: white;
                            border: none;
                            text-align: left;
                            cursor: pointer;
                            font-weight: 500;
                        "
                    >
                        ✓ Step 1: Setup
                    </button>
                    <div data-ss-accordion-content style="padding: 16px">
                        <p style="margin: 0">
                            Configure your development environment.
                        </p>
                    </div>
                </div>
                <div
                    class="accordion-item"
                    style="
                        border: 1px solid var(--color_line_secondary);
                        border-radius: 8px;
                        overflow: hidden;
                    "
                >
                    <button
                        data-ss-accordion-header
                        aria-expanded="true"
                        style="
                            width: 100%;
                            padding: 14px 16px;
                            background: var(--color_fill_primary);
                            color: white;
                            border: none;
                            text-align: left;
                            cursor: pointer;
                            font-weight: 500;
                        "
                    >
                        ✓ Step 2: Install
                    </button>
                    <div data-ss-accordion-content style="padding: 16px">
                        <p style="margin: 0">
                            Install the package and dependencies.
                        </p>
                    </div>
                </div>
                <div
                    class="accordion-item"
                    style="
                        border: 1px solid var(--color_line_secondary);
                        border-radius: 8px;
                        overflow: hidden;
                    "
                >
                    <button
                        data-ss-accordion-header
                        aria-expanded="false"
                        style="
                            width: 100%;
                            padding: 14px 16px;
                            background: transparent;
                            border: none;
                            text-align: left;
                            cursor: pointer;
                            font-weight: 500;
                        "
                    >
                        Step 3: Configure
                    </button>
                    <div data-ss-accordion-content hidden style="padding: 16px">
                        <p style="margin: 0">
                            Customize settings for your project.
                        </p>
                    </div>
                </div>
            </div>

### Collapsible Section Manager

Collapsible sections with smooth animations and state persistence.

Enable debug mode
In Stock On Sale Free Shipping
HTML

    <!-- Basic collapsible -->
            <div
                data-ss="collapsible"
                data-ss-collapsible-expanded="false"
                style="
                    border: 1px solid var(--color_line_secondary);
                    border-radius: 8px;
                "
            >
                <button
                    data-ss-collapsible-trigger
                    aria-expanded="false"
                    style="
                        width: 100%;
                        padding: 12px 16px;
                        background: transparent;
                        border: none;
                        text-align: left;
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                        gap: 8px;
                    "
                >
                    <span style="transition: transform 0.3s">▶</span>
                    Advanced Options
                </button>
                <div
                    data-ss-collapsible-content
                    hidden
                    style="padding: 0 16px 16px"
                >
                    <div
                        style="
                            padding: 12px;
                            background: var(--color_fill_secondary);
                            border-radius: 6px;
                        "
                    >
                        <label
                            style="
                                display: flex;
                                align-items: center;
                                gap: 8px;
                                cursor: pointer;
                            "
                        >
                            <input type="checkbox" />
                            Enable debug mode
                        </label>
                    </div>
                </div>
            </div>

            <!-- Collapsible with persistence -->
            <div
                data-ss="collapsible"
                data-ss-collapsible-expanded="true"
                data-ss-collapsible-persist="true"
                data-ss-collapsible-id="sidebar-filters"
                style="
                    margin-top: 16px;
                    padding: 16px;
                    background: var(--color_fill_secondary);
                    border-radius: 12px;
                "
            >
                <button
                    data-ss-collapsible-trigger
                    aria-expanded="true"
                    style="
                        width: 100%;
                        padding: 0 0 12px;
                        background: transparent;
                        border: none;
                        border-bottom: 1px solid var(--color_line_secondary);
                        text-align: left;
                        cursor: pointer;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        font-weight: 600;
                    "
                >
                    Filters
                    <span style="font-size: 12px; opacity: 0.6">▼</span>
                </button>
                <div data-ss-collapsible-content style="padding-top: 12px">
                    <label style="display: block; margin-bottom: 8px">
                        <input type="checkbox" checked />
                        In Stock
                    </label>
                    <label style="display: block; margin-bottom: 8px">
                        <input type="checkbox" />
                        On Sale
                    </label>
                    <label style="display: block">
                        <input type="checkbox" />
                        Free Shipping
                    </label>
                </div>
            </div>

### Modal

Accessible modal dialogs with focus trapping and animations.

## Modal Title

This is the modal content. Focus is trapped within the modal while it's open.

Press `Escape` to close, or click outside the modal.

HTML

    <!-- Modal trigger -->
            <button
                data-ss-modal-trigger="#demo-modal"
                style="
                    padding: 12px 24px;
                    background: var(--color_fill_primary);
                    color: white;
                    border: none;
                    border-radius: 8px;
                    cursor: pointer;
                "
            >
                Open Modal
            </button>

            <!-- Modal structure -->
            <div
                id="demo-modal"
                data-ss="modal"
                data-ss-modal-close-backdrop="true"
                role="dialog"
                aria-modal="true"
                aria-labelledby="modal-title"
                hidden
                style="
                    position: fixed;
                    inset: 0;
                    background: rgba(0, 0, 0, 0.5);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 1000;
                "
            >
                <div
                    data-ss-modal-content
                    style="
                        background: white;
                        border-radius: 16px;
                        max-width: 500px;
                        width: 90%;
                        max-height: 90vh;
                        overflow: auto;
                        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
                    "
                >
                    <header
                        style="
                            padding: 20px 24px;
                            border-bottom: 1px solid var(--color_line_secondary);
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                        "
                    >
                        <h2 id="modal-title" style="margin: 0; font-size: 20px">
                            Modal Title
                        </h2>
                        <button
                            data-ss-modal-close
                            style="
                                background: none;
                                border: none;
                                font-size: 24px;
                                cursor: pointer;
                                opacity: 0.5;
                            "
                        >
                            &times;
                        </button>
                    </header>
                    <div style="padding: 24px">
                        <p>
                            This is the modal content. Focus is trapped within the
                            modal while it's open.
                        </p>
                        <p>
                            Press
                            <kbd>Escape</kbd>
                            to close, or click outside the modal.
                        </p>
                    </div>
                    <footer
                        style="
                            padding: 16px 24px;
                            border-top: 1px solid var(--color_line_secondary);
                            display: flex;
                            justify-content: flex-end;
                            gap: 12px;
                        "
                    >
                        <button
                            data-ss-modal-close
                            style="
                                padding: 10px 20px;
                                background: var(--color_fill_secondary);
                                border: none;
                                border-radius: 6px;
                                cursor: pointer;
                            "
                        >
                            Cancel
                        </button>
                        <button
                            style="
                                padding: 10px 20px;
                                background: var(--color_fill_primary);
                                color: white;
                                border: none;
                                border-radius: 6px;
                                cursor: pointer;
                            "
                        >
                            Confirm
                        </button>
                    </footer>
                </div>
            </div>

### Tooltip

Accessible tooltips with smart positioning and multiple trigger modes.

The HTML specification defines the CSS integration.

HTML

    <div
                style="
                    display: flex;
                    flex-wrap: wrap;
                    gap: 24px;
                    justify-content: center;
                    padding: 40px;
                "
            >
                <!-- Top tooltip -->
                <button
                    data-ss="tooltip"
                    data-ss-tooltip-content="Tooltip on top"
                    data-ss-tooltip-position="top"
                    style="
                        padding: 12px 24px;
                        background: var(--color_fill_secondary);
                        border: none;
                        border-radius: 8px;
                        cursor: pointer;
                    "
                >
                    Hover (Top)
                </button>

                <!-- Bottom tooltip -->
                <button
                    data-ss="tooltip"
                    data-ss-tooltip-content="Tooltip on bottom"
                    data-ss-tooltip-position="bottom"
                    style="
                        padding: 12px 24px;
                        background: var(--color_fill_secondary);
                        border: none;
                        border-radius: 8px;
                        cursor: pointer;
                    "
                >
                    Hover (Bottom)
                </button>

                <!-- Left tooltip -->
                <button
                    data-ss="tooltip"
                    data-ss-tooltip-content="Tooltip on left"
                    data-ss-tooltip-position="left"
                    style="
                        padding: 12px 24px;
                        background: var(--color_fill_secondary);
                        border: none;
                        border-radius: 8px;
                        cursor: pointer;
                    "
                >
                    Hover (Left)
                </button>

                <!-- Right tooltip -->
                <button
                    data-ss="tooltip"
                    data-ss-tooltip-content="Tooltip on right"
                    data-ss-tooltip-position="right"
                    style="
                        padding: 12px 24px;
                        background: var(--color_fill_secondary);
                        border: none;
                        border-radius: 8px;
                        cursor: pointer;
                    "
                >
                    Hover (Right)
                </button>
            </div>

            <!-- Tooltip with title attribute -->
            <p style="margin-top: 24px">
                The
                <abbr data-ss="tooltip" title="Hypertext Markup Language">
                    HTML
                </abbr>
                specification defines the
                <abbr data-ss="tooltip" title="Cascading Style Sheets">CSS</abbr>
                integration.
            </p>

            <!-- Icon tooltip -->
            <div style="margin-top: 24px; display: flex; gap: 16px">
                <button
                    data-ss="tooltip"
                    data-ss-tooltip-content="Edit"
                    style="
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        background: var(--color_fill_secondary);
                        border: none;
                        cursor: pointer;
                    "
                >
                    ✏️
                </button>
                <button
                    data-ss="tooltip"
                    data-ss-tooltip-content="Delete"
                    style="
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        background: var(--color_fill_secondary);
                        border: none;
                        cursor: pointer;
                    "
                >
                    🗑️
                </button>
                <button
                    data-ss="tooltip"
                    data-ss-tooltip-content="Share"
                    style="
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        background: var(--color_fill_secondary);
                        border: none;
                        cursor: pointer;
                    "
                >
                    📤
                </button>
            </div>

### Notification Manager

Toast notifications with stacking, positioning, and auto-dismiss.

✓
Success! Your changes have been saved.
HTML

    <!-- Notification container -->
            <div
                data-ss="notification-container"
                data-ss-notification-position="top-right"
                data-ss-notification-max="5"
                style="
                    position: fixed;
                    top: 20px;
                    right: 20px;
                    display: flex;
                    flex-direction: column;
                    gap: 12px;
                    z-index: 1001;
                "
            ></div>

            <!-- Trigger buttons -->
            <div style="display: flex; flex-wrap: wrap; gap: 12px">
                <button
                    onclick="showNotification('success')"
                    style="
                        padding: 10px 20px;
                        background: var(--color_state_success);
                        color: white;
                        border: none;
                        border-radius: 6px;
                        cursor: pointer;
                    "
                >
                    Success Toast
                </button>
                <button
                    onclick="showNotification('error')"
                    style="
                        padding: 10px 20px;
                        background: var(--color_state_error);
                        color: white;
                        border: none;
                        border-radius: 6px;
                        cursor: pointer;
                    "
                >
                    Error Toast
                </button>
                <button
                    onclick="showNotification('warning')"
                    style="
                        padding: 10px 20px;
                        background: var(--color_state_warning);
                        color: white;
                        border: none;
                        border-radius: 6px;
                        cursor: pointer;
                    "
                >
                    Warning Toast
                </button>
                <button
                    onclick="showNotification('info')"
                    style="
                        padding: 10px 20px;
                        background: var(--color_state_info);
                        color: white;
                        border: none;
                        border-radius: 6px;
                        cursor: pointer;
                    "
                >
                    Info Toast
                </button>
            </div>

            <!-- Example notification structure -->
            <div
                class="notification notification--success"
                style="
                    margin-top: 24px;
                    padding: 16px 20px;
                    background: var(--color_state_success);
                    color: white;
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    max-width: 360px;
                "
            >
                <span style="font-size: 20px">✓</span>
                <div style="flex: 1">
                    <strong style="display: block">Success!</strong>
                    <span style="font-size: 14px; opacity: 0.9">
                        Your changes have been saved.
                    </span>
                </div>
                <button
                    style="
                        background: none;
                        border: none;
                        color: white;
                        cursor: pointer;
                        opacity: 0.7;
                    "
                >
                    &times;
                </button>
            </div>

### Responsive Menu Manager

Responsive navigation with mobile toggle.

Logo

- Home
- Products
- About
- Contact

HTML

    <nav
                data-ss="responsive-menu"
                data-ss-menu-breakpoint="768"
                style="
                    background: var(--color_fill_secondary);
                    padding: 16px;
                    border-radius: 12px;
                "
            >
                <div
                    style="
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    "
                >
                    <span style="font-weight: 700; font-size: 18px">Logo</span>

                    <!-- Mobile toggle (hidden on desktop) -->
                    <button
                        data-ss-menu-toggle
                        aria-expanded="false"
                        aria-label="Toggle menu"
                        style="
                            display: none;
                            padding: 8px;
                            background: none;
                            border: none;
                            cursor: pointer;
                            font-size: 24px;
                        "
                    >
                        ☰
                    </button>

                    <!-- Menu content -->
                    <ul
                        data-ss-menu-content
                        style="
                            display: flex;
                            gap: 24px;
                            list-style: none;
                            margin: 0;
                            padding: 0;
                        "
                    >
                        <li>
                            <a
                                href="#"
                                style="text-decoration: none; color: inherit"
                            >
                                Home
                            </a>
                        </li>
                        <li>
                            <a
                                href="#"
                                style="text-decoration: none; color: inherit"
                            >
                                Products
                            </a>
                        </li>
                        <li>
                            <a
                                href="#"
                                style="text-decoration: none; color: inherit"
                            >
                                About
                            </a>
                        </li>
                        <li>
                            <a
                                href="#"
                                style="text-decoration: none; color: inherit"
                            >
                                Contact
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>

            <!-- Mobile menu expanded state example -->
            <div
                style="
                    margin-top: 16px;
                    max-width: 320px;
                    background: var(--color_fill_secondary);
                    border-radius: 12px;
                    overflow: hidden;
                "
            >
                <div
                    style="
                        padding: 16px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        border-bottom: 1px solid var(--color_line_secondary);
                    "
                >
                    <span style="font-weight: 700">Logo</span>
                    <button
                        style="
                            padding: 8px;
                            background: none;
                            border: none;
                            cursor: pointer;
                            font-size: 24px;
                        "
                    >
                        ✕
                    </button>
                </div>
                <ul style="list-style: none; margin: 0; padding: 0">
                    <li>
                        <a
                            href="#"
                            style="
                                display: block;
                                padding: 16px;
                                text-decoration: none;
                                color: inherit;
                                border-bottom: 1px solid
                                    var(--color_line_secondary);
                            "
                        >
                            Home
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            style="
                                display: block;
                                padding: 16px;
                                text-decoration: none;
                                color: inherit;
                                border-bottom: 1px solid
                                    var(--color_line_secondary);
                            "
                        >
                            Products
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            style="
                                display: block;
                                padding: 16px;
                                text-decoration: none;
                                color: inherit;
                                border-bottom: 1px solid
                                    var(--color_line_secondary);
                            "
                        >
                            About
                        </a>
                    </li>
                    <li>
                        <a
                            href="#"
                            style="
                                display: block;
                                padding: 16px;
                                text-decoration: none;
                                color: inherit;
                            "
                        >
                            Contact
                        </a>
                    </li>
                </ul>
            </div>

### JavaScript API

Programmatic control of interactive elements.

JavaScript

    <script>
                // AccordionManager
                import { AccordionManager } from "stylescape";

                const accordion = new AccordionManager(element, {
                    multiple: false,
                    defaultOpen: 0,
                    onOpen: (index) => console.log("Opened:", index),
                    onClose: (index) => console.log("Closed:", index),
                });

                accordion.open(1); // Open panel at index
                accordion.close(0); // Close panel
                accordion.toggle(2); // Toggle panel
                accordion.openAll(); // Open all (if multiple)
                accordion.closeAll(); // Close all

                // Modal
                import { Modal } from "stylescape";

                const modal = new Modal(element, {
                    closeOnBackdrop: true,
                    closeOnEscape: true,
                    trapFocus: true,
                    onOpen: () => console.log("Modal opened"),
                    onClose: () => console.log("Modal closed"),
                });

                modal.open(); // Open modal
                modal.close(); // Close modal
                modal.toggle(); // Toggle state

                // NotificationManager
                import { NotificationManager } from "stylescape";

                const notifications = new NotificationManager({
                    position: "top-right",
                    maxVisible: 5,
                    defaultDuration: 5000,
                });

                notifications.show({
                    type: "success",
                    title: "Success!",
                    message: "Your changes have been saved.",
                    duration: 3000,
                    actions: [{ label: "Undo", onClick: () => undoChanges() }],
                });

                notifications.success("Quick success message");
                notifications.error("Something went wrong");
                notifications.warning("Please check your input");
                notifications.info("New updates available");
                notifications.clearAll();

                // Tooltip
                import { Tooltip } from "stylescape";

                const tooltip = new Tooltip(element, {
                    content: "Custom tooltip",
                    position: "auto",
                    delay: 200,
                    theme: "dark",
                });

                tooltip.show();
                tooltip.hide();
                tooltip.setContent("Updated content");
            </script>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!