UI & Components

Interaction Policies

Interaction Policies: anatomy, keyboard behavior, state, and theming in Askr.

Example

import { Button, Dialog, DialogContent, DialogTitle, DialogTrigger } from '@askrjs/themes/components';

<Dialog>
  <DialogTrigger asChild><Button>Open settings</Button></DialogTrigger>
  <DialogContent>
    <DialogTitle>Project settings</DialogTitle>
    <ProjectSettings />
  </DialogContent>
</Dialog>

Interaction policies describe the observable behavior of the public components: state transitions, keyboard handling, focus ownership, roles and ARIA relationships. Use the component documentation and executable behavior to assess your application composition.

Install and import

Use import { Button } from '@askrjs/ui/button' for a single family, or the supported root for multi-family composition. Application tests should mount the public components and exercise user-visible behavior.

Live examples

Focus a Button and activate it with Enter or Space, then disable it and verify that activation is suppressed. Open a Dialog, dismiss it with Escape and verify that focus returns to the trigger. Repeat through asChild markup where your application uses that mode.

Anatomy

A family root owns its state and coordinates triggers, items and content through private context. Public props select controlled state, keyboard navigation, dismissal and focus behavior. Observe roles, ARIA relationships and data attributes on the resulting DOM.

State model

Root props distinguish controlled values from internal state. Disabled native elements use their native disabled behavior; non-native asChild targets require equivalent ARIA, tab-order and activation handling. Test a mode transition explicitly when your application changes controlled props.

Keyboard and accessibility

Check each family page for its keyboard and focus model. Button supports native activation; menus coordinate item navigation; overlay primitives coordinate Escape, outside interactions and restoration. Avoid duplicating handlers already owned by the component.

Styling and tokens

Style the documented data-slot, data-state and data-disabled attributes emitted by the components. Keep styling assertions separate from keyboard, focus and accessible-name checks so each failure identifies the affected contract.

API

Import components and their props from @askrjs/ui or a supported family subpath. Use those props to configure behavior and derive callback types from the props when needed. Accessibility metadata objects and their type aliases are implementation details in 0.5.

Edge cases

Passthrough attributes and asChild composition can change accessible output. Test the completed tree, including disabled controls, canceled events, nested overlays and teardown, rather than assuming a static description proves the result.

See ARIA and Ref Utilities for asChild and ref forwarding, and Focus and Dismissal for FocusScope and DismissableLayer composition.