Elevator

Elevator is a renderless helper. It walks valid element children and merges elevation data attributes (data-elevation, data-elevation-hover, data-elevation-direction) onto each child's root so preflight shadow styles activate without a wrapping div.

Set resting for the default level and optional hover for pointer elevation; direction controls which edge casts the shadow. Invalid nodes pass through unchanged.

Popup lists in Select and Autocomplete already sit on elevated surfaces. Use Elevator when a custom child needs the same shadow contract. Surface has no elevation prop of its own.

When to useCopy Anchor Link

• A custom card or panel needs resting and/or hover shadow without an extra wrapper
• A floating bar should cast upward (direction="top") toward content below
• You want the same elevation hooks Select and Autocomplete already use

When not to useCopy Anchor Link

• You only need background, border, or radius → Surface
• The control already elevates its popup (Select, Autocomplete menus)
• Depth should come from nested color ramp layers alone → Surface color

RelatedCopy Anchor Link

• Surface — panel chrome that Elevator typically wraps
• Elevation — shadow levels and direction contract
• Select — elevated popups that already own their own lift

Common examplesCopy Anchor Link

Resting shadowCopy Anchor Link

A feature card with only resting keeps a steady soft shadow. Useful for static tiles and placeholder shells that should not lift on hover.

Hover liftCopy Anchor Link

Pair resting with hover so the child root steps up on pointer hover. The usual interactive card pattern.

Cast directionCopy Anchor Link

direction picks which edge casts the shadow. Default is bottom for page cards; top suits floating bars that sit above content.

Ask your agentCopy Anchor Link

Make this card lift slightly on hover — subtle shadow increase toward the bottom. One wrapper around the card, no extra divs.