fix: float the standalone component dropdown so it overlays content

[almothafar]

Problem

When <ngui-auto-complete> is used as a standalone component and its dropdown opens downward (the default), the list <ul> is rendered in normal document flow. So it takes up layout space — expanding its host, growing the surrounding card, and scrolling the page — instead of floating over the content below.

Only the upward .dropup variant was floated (position: absolute; bottom: 100%); the down case had no positioning. That asymmetry is the bug.

Fix

In auto-complete.component.scss, float the list by default, mirroring .dropup:

.ngui-auto-complete > ul {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  z-index: var(--ngui-ac-z-index, 10);
  /* … */
}
.ngui-auto-complete > ul.dropup { top: auto; bottom: 100%; }

The directive renders this same component inside a CDK overlay, which already floats the list and must measure its height to flip/reposition on overflow. So a single scoped rule keeps the list in normal flow only there, leaving the directive/overlay behavior byte-for-byte unchanged:

.cdk-overlay-pane .ngui-auto-complete > ul { position: static; }

(The component uses ViewEncapsulation.None, so these are plain global rules — no :host, and no directive change needed.)

A new --ngui-ac-z-index CSS variable (default 10) lets consumers adjust the float layer if it collides with other stacked UI.

Validation

• npm run build-lib:prod ✅
• npm run build-docs ✅
• npx ng test auto-complete → 16/16 ✅ (incl. the directive overlay open/hide test)
• npm run format:check ✅
• Verified visually in the demo: the three Component-tab examples now overlay instead of pushing; the Directive-tab examples (normal, open-direction "up", and near-viewport-bottom flip) are unchanged.

🤖 Generated with Claude Code