Skip to content
yarcl

Motion, layers and focus

These groups have keys the library depends on. You set all the values, and you can add extra keys for your own CSS.

Motion

Section titled “Motion”
motion: { fast: '120ms', base: '200ms', easing: 'cubic-bezier(0.2, 0, 0, 1)' },
  • fast: hover and state changes.
  • base: opening popovers, dialogs and drawers.
  • easing: all transitions.

When the user asks for reduced motion (prefers-reduced-motion: reduce), transitions and entry animations are turned off and spinners slow down.

Timing

Section titled “Timing”
timing: { typeaheadTimeout: 1000, tooltipDelay: 400, hoverOpenDelay: 300, hoverCloseDelay: 150, toastDuration: 5000 },

Delays and durations in milliseconds, read when components render:

  • tooltipDelay: how long the pointer rests on a trigger before a Tooltip opens. Keyboard focus opens it immediately.
  • hoverOpenDelay and hoverCloseDelay: when a HoverCard opens and closes.
  • toastDuration: how long a toast stays. 0 keeps toasts until dismissed.

The matching props (delay, openDelay, closeDelay, duration) override them per instance. Tests can set the delays to 0 to skip the waiting.

Layers

Section titled “Layers”
zIndex: { dropdown: 1000, tooltip: 1100, dialog: 1200, toast: 1300 },

Menus, selects, comboboxes, popovers and hover cards use dropdown; tooltips use tooltip. Dialogs, drawers and toasts use the browser’s top layer, so they sit above everything regardless of z-index.

Borders

Section titled “Borders”
borders: { width: '1px' },

The border width of every control and surface.

Focus ring

Section titled “Focus ring”
focusRing: { width: '2px', offset: '2px', color: 'primary', style: 'solid' },

One focus ring for every focusable component: buttons, inputs, selects, checkboxes, radios, switches, links, tabs, and the close and dismiss buttons. It appears for keyboard focus only (:focus-visible), never on mouse clicks.

Key Controls
width outline thickness
offset gap between the element and the ring; a negative value draws it inside
color a key of colors
style solid (default), dashed, dotted or double

Inputs also switch their border to their own color while focused, so the active field is obvious. Tabs draw the ring inside their edge, because the tab list scrolls and would clip an outer ring.

In menus, selects and comboboxes, the highlighted option is filled with the solid color and its foreground instead of a ring, like native menus. That keeps it at least 3:1 against the panel.

Overriding

Section titled “Overriding”

The ring comes from one low-specificity rule, so a plain class overrides it:

.toolbar .yarcl-button:focus-visible {
  outline-offset: -2px;
}

Or change the variables for a region:

.high-contrast {
  --yarcl-focus-width: 3px;
  --yarcl-focus-color: black;
}

timing.typeaheadTimeout sets the maximum pause between characters in TreeView type-ahead. It defaults to 1000 milliseconds and updates through runtime themes.