Examples roadmap

Examples roadmap

This roadmap inventories the examples we already ship and the scenarios we still need to capture. Use it to coordinate contributions and avoid duplicate work.

Core primitives

• Truthiness alias inspector – Demonstrates how synonymous state keywords map to the same class hooks (existing page).
• Attributes + Classes sandbox – Inspect how ensureId, appendToken, and truthiness-driven class hooks behave on arbitrary markup.
• Context capability lab – Toggle each capability (focus trap, inert siblings, hover intent, anchor follow) to demonstrate the helpers exported from @core/context/helpers.
• Context mode explorer – Compare all, semantics-only, and behaviors-only toggles across dialog and tooltip contexts.
• Placement visualizer – Drag a trigger around the viewport and watch how resolveAnchoredPlacement chooses the best side.

Patterns

Toggle

• Basic show/hide playground (existing page).
• Truthiness alias synonyms wired to the same state (existing page).
• Grouped accordions using data-automagica11y-group (new example).
• Multi-target toggle controlling companion overlays and ARIA mirrors.
• Toggle + menu context once behaviors ship for menus.

Dialog

• Context vs alias parity (existing page).
• Backdrop dismissal toggled with data-automagica11y-dialog-dismissable.
• Dialog integrated with initFocusInitial and the animate lifecycle.
• Multi-trigger dialog demonstrating inert sibling coordination.

Popover

• Dismiss-on-outside-click demo (existing page).
• Command palette with focus map ordering and search field.
• Teaching bubble that responds to automagica11y:popover:placement updates.
• Sticky popover example showing data-automagica11y-popover-outside-dismiss="false" and scroll thresholds.

Tooltip

• Context vs alias parity (existing page).
• Hover intent playground for open/close delay tuning.
• Mobile long-press tooltip with explicit dismiss controls.
• Tooltip dismiss button recipe using data-automagica11y-tooltip-dismiss.

Future contexts

• Menu semantics gallery showing role="menu" markup before interactive behaviors ship.
• Disclosure/accordion context parity demo once shared behaviors land.
• Listbox, tablist, and tree context previews illustrating the automatic role scaffolding.

Focus helpers

• Focus map ordering demo (existing page).
• Per-element focus links chaining data-automagica11y-focus-next/-prev (existing page).
• Focus trap auto-activation walkthrough with data-automagica11y-focus-trap options.
• Focus initial + animate lifecycle handshake so focus waits until exit transitions finish.
• Live editor for data-automagica11y-focus-map selectors.
• Dialog integration that shows how focus is restored when closing.

Extensions

Announce

• Screen reader announcement inspector that logs polite/assertive output.
• Grouped toggle announcements showing only the newly opened item speaks.
• Localization walkthrough for author-supplied announcement strings.

Animate lifecycle

• Trigger vs target animation comparison.
• Selector-based animation watching an overlay element.
• Integration with focus helpers to delay focus restoration until close completes.

Track overall progress on the Core modules reference and individual pattern pages for context-specific coverage notes.