Interactive Elements
JavaScript components for accordions, collapsibles, modals, tooltips, and notifications.
Accordion Manager
Accordion-style collapsible panels with accessibility support.
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="ss-c-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="ss-c-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="ss-c-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="ss-c-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="ss-c-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="ss-c-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.
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;
"
>
×
</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="ss-c-notification ss-c-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;
"
>
×
</button>
</div>Responsive Menu Manager
Responsive navigation with mobile toggle.
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>