Docs / Components
SenseStyleClassDirective
CSS class-phase helper for disclosure-like toggles from @artificialsenselabs/ui. Not Angular Animations — orchestrates author CSS enter/leave classes (or a simple toggleClass).
Live demo: run nx serve showcase and open /components/style-class (port 4202).
Overview
Category: Display. Selector: [senseStyleClass]. Import: import { SenseStyleClassDirective } from '@artificialsenselabs/ui';
Use this for Tailwind / Headless UI-style class phases without pulling in @angular/animations. Prefer Angular Animations for complex sequenced timelines. Relative targets (@next, @prev, @parent, @grandparent) resolve from the host; other values use document querySelector (first match).
Accessibility
- Built for disclosure-like controls: the host gets
aria-expanded; a distinct target getsaria-hiddenandinertwhen collapsed. - Enter/leave phase animation is skipped when
prefers-reduced-motion: reduce— the done (or to) class is applied immediately. - Optional
hideOnOutsideClickdismisses without trapping pointer focus on hidden content.