Desktop component laboratory

Real compositions built entirely from public Aidos components. Use the theme toggle in the navigation, then try keyboard navigation and a narrow window.

Focus

• Tab moves one deliberate indicator between controls. Ordinary button clicks do not add a ring.
• Text fields retain focus feedback after a click; their action buttons own their own rings.
• Tooltips never move focus. Native controls retain browser focus defaults.

Compact controls

Four coherent control sizes. Even the smallest icon button has a 24px target. Labels truncate without private DOM selectors.

Composer

An auto-growing field and footer share one surface. The field uses a quiet 1px neutral outline; footer actions own their individual indicators. Enter submits, Shift+Enter adds a line, and IME composition does not submit. Loading or clearing a draft must resize immediately.

Menus and placement

Try Arrow keys, Home, End, Escape, and Tab. Disabled items remain reachable and announced, but cannot activate. Focus Edit to show its tooltip: Escape dismisses the hint before the menu. The second menu prefers above/end alignment but flips and stays within the viewport. Clicking the field while a menu is open must leave focus in the field.

Dialogs

The input receives initial focus. Try a menu inside the dialog: Escape closes the menu first, then the dialog. Closing the dialog returns focus to its trigger.

Search palettes

Search keeps focus in its input and announces the active option. Arrow keys or Ctrl+J/K navigate; Ctrl+Home/End jump; Enter selects. Disabled entries remain reachable and announced, but cannot be selected. The same search list works without a modal.

Document tabs

Arrow keys select tabs; Home/End jump. Delete or a separate close button closes a tab and focuses its neighbor. Long titles truncate and the tab strip scrolls horizontally without moving the page.

Disclosure and contextual actions

Collapse the project, including via the external button. Closing content becomes inert immediately and unmounts after its animation. Reduced-motion preferences remove the transition. Hover or focus a row to reveal its actions; touch devices show them continuously.

Switches

A switch is a persistent boolean setting, not an icon toggle. Space toggles it; disabled switches remain focusable but cannot toggle.

Prose and code

Typography only—Aidos does not parse Markdown or sanitize HTML. Hover or keyboard-focus the action area to reveal its button.

const message = "Hello";
console.log(message);

CSS spacing

These examples exercise four-value shorthands, functions containing spaces, and numeric logical properties. Their padding must remain visible and correct regardless of rendering order.