Semantic structure
Use the documented Xshna classes with semantic HTML rather than replacing native elements unnecessarily.
Compose existing xsh- classes on the appropriate HTML element. Keep content order meaningful when CSS is disabled.
Interactions / Component reference
Collapse
Single-element disclosures that can be controlled from multiple buttons.
LIVE COMPONENT REFERENCE
Native disclosure and grouped accordion
Native details/summary is recommended for simpler disclosure. The advanced accordion script is optional.
Actual Xshna CSSResize to test wrapping
What is Xshna.css?
A browser-native, namespaced interface framework.
Does hosting need Node.js?
No. Deploy the compiled CSS and optional JavaScript.
Can I use this with PHP?
Yes. Include the assets in any HTML response.
HTML · COPY AND USE
<div class="xsh-accordion"><details open><summary>What is Xshna.css?</summary><p>A browser-native, namespaced interface framework.</p></details><details><summary>Does hosting need Node.js?</summary><p>No. Deploy the compiled CSS and optional JavaScript.</p></details><details><summary>Can I use this with PHP?</summary><p>Yes. Include the assets in any HTML response.</p></details></div>Overview
Use data-xsh-collapse="#xsh-target-id" and aria-controls on a button, and hidden on the target. The JS synchronizes aria-expanded.
Live example
Interactive · Real frameworkAdditional technical implementation details are available here.
Example markup
<button class="xsh-btn xsh-btn-secondary" data-xsh-collapse="#xsh-collapse-content" aria-controls="xsh-collapse-content" aria-expanded="false">Show technical details</button>
<div class="xsh-card xsh-mt-4" id="xsh-collapse-content" hidden>Additional technical implementation details are available here.</div>Production guidance
For a simple disclosure, native details/summary can be preferable and requires no JS.
Customize this component through --xsh-* CSS tokens, data-xsh-* configuration attributes and documented xsh-* utilities. Use the optional JavaScript distribution only when an interactive behavior is needed.
Build with confidenceOpen interactive design playground →
Files, tokens and configuration
| Surface | Source of truth | What to check |
|---|---|---|
dist/xshna.min.css | Compiled framework | Styling and responsive behavior |
dist/xshna.min.js | Optional interactions | Lifecycle, event handling and teardown |
src/css/ | Readable source | Public class names and token definitions |
src/contracts/ | Published component contracts where available | State, configuration and behavioral support |
Implementation details
Interactive behavior
Verify focus order, disabled behavior and descriptive labels for interactive patterns.
Load xshna.min.js only if the documented interaction needs it. Your application remains responsible for data, persistence and business rules.
Responsive and localization
Test narrow containers, long translations and user-defined text sizes.
Test 320px-wide viewports, container-constrained instances, keyboard zoom, longer translations and right-to-left text where relevant.
Theme and customization
Use --xsh-* CSS variables for theme values and data-xsh-design / data-xsh-density on the xsh-app root.
Prefer design tokens over hard-coded overrides so components remain coherent across personalities.
What to verify before shipping
- Confirm every documented class used by the feature exists in the release CSS.
- Navigate controls using Tab, Shift+Tab, Enter, Space and Escape where appropriate.
- Test with reduced motion, high contrast, 200% text zoom and a narrow mobile viewport.
- Verify disabled, loading, empty, error and long-content states where relevant.
- Check actual application behavior independently of the preview: these examples use illustrative data.