Primitives / foldkit-primitives/dom

FluidHover

const · packages/primitives/src/dom/fluid-hover.ts:89

const FluidHover: Mount.MountDefinitionWithArgs<
  'FluidHover',
  {
    name: Schema.String
    item: Schema.String
    axis: Schema.Literals<readonly ['x', 'y', 'xy']>
    gapClick: Schema.Boolean
    gapReach: Schema.optional<Schema.Number>
    follows: Schema.optional<Schema.String>
    from: Schema.optional<Schema.String>
  },
  never
>

One highlight that follows the pointer across a container's items, as a Mount, with no Message and no Model: which item the pointer is nearest is presentation, known to the DOM and to no transition.

The item nearest the pointer is the one highlighted, so the pointer in a gap between two items still points at one, and the highlight moves from item to item instead of blinking off between them. On the y axis nearness is read vertically (a list), on x horizontally (a strip), on xy both (a grid). A disabled item (aria-disabled="true", data-disabled, :disabled) is never highlighted. An item reached by the keyboard (:focus-visible) is highlighted too; a touch highlights nothing, since there is no pointer to follow before the press.

The container gets --fk-<name>-x, -y, -w and -h in pixels, relative to its scroll box like Measure's, and -shown and -moving (see fluidHovered); a view draws the highlight as an absolutely placed child that reads them. With gapClick, a click in a gap presses the highlighted item: its descendant marked data-fluid-press, or the item itself; with gapReach too, only a click within that many pixels of it, as a grid of cards with wide gutters wants (Fluid Functionalism's uses 16). A popup measured before it has a layout box keeps its last complete place, and tries again for three frames, rather than drawing the highlight at zero. The item the highlight is shown on carries data-fluid-lit, so a style can change what sits beside it (a table hides the lines around the lit row).

follows names the item the highlight sits on while the pointer is not moving it: a menu marks the row its keys reach ([data-active]), and the highlight goes there whenever that mark moves, so the keys and the pointer light the same one. from names the item a fresh highlight grows out of, as a tab's hover leaves the chosen tab. A highlight always fades where it is: once the pointer leaves, nothing should move. It stays only for an item the keyboard reached (:focus-visible), not one a click focused.

In the guides