feat(NcPopover): expose distance and skidding props

[pringelmann]

floating-vue's <Dropdown> accepts distance and skidding for nudging the popper relative to the trigger. NcPopover hardcodes distance to 10 and never passes skidding through, so consumers can't shift a popover without CSS hacks that confuse the positioning math. Defaults are preserved, so this is non-breaking.

Resolves

Needed for the redesigned app launcher in nextcloud/server#59888.

Screenshots

No visual change with defaults.

Tasks

• Add distance and skidding props
• Forward both to <Dropdown>

Checklist

• Tests included or not applicable: not applicable. Defaults match the previous hardcoded values, so existing tests still cover the default path.
• Component documentation extended/updated or not applicable: prop JSDoc added, styleguidist picks it up automatically.
• Backport to stable8 for Vue 2 or not applicable: additive and non-breaking. Happy to backport if needed.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 54.55%. Comparing base (034beb5) to head (1f07966).
⚠️ Report is 4 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #8484   +/-   ##
=======================================
  Coverage   54.55%   54.55%           
=======================================
  Files         106      106           
  Lines        3439     3439           
  Branches     1002     1003    +1     
=======================================
  Hits         1876     1876           
  Misses       1322     1322           
  Partials      241      241           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[ShGKme]

Needed for the redesigned app launcher in nextcloud/server#59888.

Could you add more details?

consumers can't shift a popover without CSS hacks that confuse the positioning math

I assume this is to align the popover with the app container.

With "CSS Hacks" we can say that the menu is exactly on the --body-container-margin position from the inset-inline-start.

But with skidding we'd need to either hardcode a magic number or have some complex computation on JS with DOM API requests if I got it correctly.

Also, with distance=10 the popover is exactly on the caret size from the trigger. With bigger value it moves away from the trigger, and with smaller - overlaps the trigger. Do we need both options?

[pringelmann]

Needed for the redesigned app launcher in nextcloud/server#59888.

Could you add more details?

consumers can't shift a popover without CSS hacks that confuse the positioning math

I assume this is to align the popover with the app container.

With "CSS Hacks" we can say that the menu is exactly on the --body-container-margin position from the inset-inline-start.

But with skidding we'd need to either hardcode a magic number or have some complex computation on JS with DOM API requests if I got it correctly.

Also, with distance=10 the popover is exactly on the caret size from the trigger. With bigger value it moves away from the trigger, and with smaller - overlaps the trigger. Do we need both options?

For our consumer, a CSS workaround that just shifts the popover (inset-inline-start: var(--body-container-margin) !important; transform: none !important; etc.) would visually move the popover where we want it. It would also detach the arrow: .v-popper__arrow-container is a child of the popover, positioned by floating-vue's arrow middleware to point at the trigger from the popover's un-shifted position. CSS-moving the popover moves the arrow along with it, so the arrow now points at empty space ~80 px to the side of the trigger. Fixing that requires another !important rule to hide or reposition it, and the reposition value isn't expressible in CSS without runtime DOM measurement.

Going through :skidding/:distance lets floating-vue's positioning system see the offset, so the arrow stays correctly aligned with the trigger. Defaults preserve existing behavior (distance 10, skidding 0) so the addition is a no-op for current consumers.

-82 is a magic number, fair. Either way the consumer encodes that delta somewhere (here it's the skidding value, in the CSS approach it would be the arrow override).

[pringelmann]

Although I noticed that skidding seems to pass through implicitly via $attr fall-through, so perhaps not necessary to document as public API. However the hard-coded distance is still an issue.

[pringelmann]

Closing for now in favor of CSS workaround. skidding already works, and distance CSS overrides are not likely to cause issues with the popover flipping at runtime for this specific use case. However, in future I still think it will be useful to expose these as public API props since CSS workarounds do not take runtime repositioning into account.