Skip to content
Components

VergeRoot

The container a VergeSlot listens to: a row, a card, a list item. It has no appearance of its own, only the hover and focus state its slots read. Wrap the whole row, not just the controls, so the reveal answers to the user pointing at the row. Adapted from

Calacatta Oro

Usage

import { vergeAnatomy, VergeRoot, VergeRootProps, VergeSlot, VergeSlotProps, VergeSlots } from "@instruments/materia-ui/components/verge";

Best practices

  • Wrap the whole row in VergeRoot, not just the controls, so hovering or tabbing anywhere in the row reveals them.

  • A nested VergeRoot does not isolate its slots: hovering an outer row also reveals an inner row's controls.

  • as and render are mutually exclusive (render wins, dev-warned); use as="li" inside a real list.

  • Keep controls visually small and give them a 44 by 44 pixel hit area on coarse pointers; the slot reserves space but does not own the controls' hit area.

  • Use slots only to align controls into a column across rows with different counts; otherwise let the children size the slot.

  • Do not use visible to say a row matters more; a control drawn on every row at rest is furniture.

Props

VergeRoot

PropTypeDefaultDescription
as"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"

Render as a different host element from the closed layout vocabulary ({@link LayoutElement}). A row inside a real list must be an li. as and render are mutually exclusive; if both are passed, render wins (a dev-only warning fires).

VergeSlot

PropTypeDefaultDescription
as"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"

Render as a different host element from the closed layout vocabulary ({@link LayoutElement}). as and render are mutually exclusive; if both are passed, render wins (a dev-only warning fires).

slotsVergeSlots

How many controls' worth of width to hold open. Children reserve their own width already, so this is only for controls that must align into a column across rows carrying different numbers of them.

visiblebooleanfalse

Keep the slot revealed regardless of pointer or focus: a row whose action is mid-flight, or a documentation example showing the revealed state.

Also exports

  • constvergeAnatomy
  • interfaceVergeRootProps
  • interfaceVergeSlotProps
  • typeVergeSlots

Anatomy

VergeRoot

verge-root

Row or card the slot listens to for hover and focus

VergeSlot

verge-slot

Reserved space whose controls reveal on hover, focus and touch