Atoms

Atoms are single-responsibility Angular host directives. Each atom manages exactly one concern — identity, hover state, or anchor positioning. They attach to any element and compose freely thanks to Angular 22's host directive de-duplication.

Available Atoms

Atom	Package	Description
AtomId	@terse-ui/atoms	Generates and applies a unique id attribute
AtomHover	@terse-ui/atoms/hover	Tracks pointer hover state with data-hover attribute
AtomAnchor	@terse-ui/atoms/anchor	Sets CSS anchor-name for anchor positioning
AtomAnchored	@terse-ui/atoms/anchor	Positions an element relative to an anchor
AtomOpenClose	@terse-ui/atoms/open-close	Manages data-open / data-closed and aria-expanded for toggleable elements
AtomOrientation	@terse-ui/atoms/orientation	Sets data-orientation and aria-orientation for directional layouts
AtomDisabled	@terse-ui/atoms/disabled	Unified disabled state with data-disabled and aria-disabled
AtomEscapeKey	@terse-ui/atoms/escape-key	Listens for Escape key and emits a dismissal event
AtomClickOutside	@terse-ui/atoms/click-outside	Detects pointer events outside the host element
AtomIntersect	@terse-ui/atoms/intersect	Wraps IntersectionObserver with signals and data attributes
AtomClass	@terse-ui/atoms/classes	Composable class merging from multiple sources with pluggable reducer

How Atoms Compose

Atoms are designed to be used as hostDirectives in higher-level components and directives:

@Directive({
  selector: '[myTooltipTrigger]',
  hostDirectives: [AtomId, AtomHover, AtomAnchor],
})
export class MyTooltipTrigger { }

Angular de-duplicates host directives automatically. If multiple parents include the same atom, only one instance is created per host element. This is what makes atomic composition practical — atoms stack without conflict.

Atoms can also be used standalone on any element:

<div atomId atomHover>...</div>

See Why Terse UI? for the full story on how host directive de-duplication enables this architecture.