Touch Components

Gesture-aware components using pointer events. Semantic HTML with data-* attributes for gesture state.

Touch Detection

Waiting for input…

<div class="touch" data-component="touch">
					  <button type="button" data-role="pad" aria-label="Interactive area">
					    Touch or click to interact
					  </button>
					  <p role="status" aria-live="polite">Waiting for input…</p>
					</div>

Swipe Detection

let startX = 0;

el.addEventListener('pointerdown', e => { startX = e.clientX; });
el.addEventListener('pointerup', e => {
  const delta = e.clientX - startX;
  if (Math.abs(delta) > 50) {
    console.log(delta > 0 ? 'Swiped right' : 'Swiped left');
  }
});

Accessibility

Use pointer events not touch events — covers mouse, touch, and pen
Set touch-action: none only on elements that need custom gesture handling
Always provide keyboard alternatives for all touch interactions
Minimum 44×44px touch target size (WCAG 2.5.5)
Never block default scrolling unless intentional

Features

Semantic Structure - Built with native HTML5 elements for maximum reliability.
Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
Fully Responsive - Scales perfectly from mobile to desktop screens.
No JS Dependency - Core functionality relies on pure CSS for maximum performance.
Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Touch Components component is designed for versatile implementation across modern web applications. Ideal scenarios include:

Dashboards & Admin Panels - Structured data presentation and interface control.
Content Management Systems - Organizing complex information hierarchies and media.
E-Commerce Platforms - Enhancing product discovery and user workflows.
Marketing Sites - Highlighting key product offerings cleanly and effectively.
SaaS Applications - Delivering native-feeling, responsive app experiences.