fix(NcSelect): floating label design using NcTextField

[skjnldsv]

☑️ Resolves

• Relates to nextcloud-libraries/nextcloud-vue#8XXX (NcSelect visual alignment with other form fields)

Summary

Replace the plain <input> in NcSelect's #search slot with NcTextField so the component shares the same floating label, border, and focus styling as NcTextField and NcTextArea.

Single mode:

• NcTextField owns the border and floating label
• Selected value overlays the input (position: absolute, z-index: 2)
• Label floats on focus or when value selected via :has(.vs__selected)
• Extra padding when clearable (clear + chevron need space)

Multi mode:

• Border on .vs__dropdown-toggle (contains tags + search input)
• Floating label via #header slot, centered when empty, floats on border when tags present or dropdown open
• Search input inline with tags (flex-grow, no layout jump on open)
• Tags clipped before actions via max-width in no-wrap mode

Drop-up:

• Border/radius inverted (transparent top, rounded bottom)
• Label moves to bottom border

CSS scoping:

• data-v-new-select attribute on root element for manual scoping
• CSS variables scoped to [data-v-new-select].v-select.select
• Dropdown menu variables set directly on .vs__dropdown-menu (teleported to body by floating-ui)
• inputLikeBorder mixin inlined to fix @media #{&} doubled-selector bug
• Dark/light theme border overrides with correct selectors

Other:

• Forward vue-select events (keydown, blur, focus, IME) via filterEvents()
• v-bind before explicit props (Vue 3 last-binding-wins)
• No placeholder when multi or value selected (avoids overlap)
• Disabled state: transparent backgrounds, lighter border via --color-border-dark

Tests added:

• 17 unit tests (vitest): label, placeholder, disabled, inputClass, modelValue, required, single/multi mode, labelOutside, accessibility warnings, event forwarding
• 24 component tests (Playwright): open/close, keyboard nav, search/filter, select, multi tags, deselect, Tab/Escape/blur close, e2e flows

Docs added:

• Pre-selected and clearable example
• Disabled state example (single + multi)
• Label outside example (single + multi)

🖼️ Screenshots

🏚️ Before	🏡 After

🚧 Tasks

• NcTextField integration in search slot
• Event forwarding (keydown, blur, focus, IME)
• Single mode selected value positioning
• Multi mode tags inside bordered container
• Floating label when value selected
• Open state / drop-up border-radius + label repositioning
• CSS scoping via data-v-new-select
• Dark theme border fix (inlined mixin)
• Disabled state styling
• No-wrap overflow clipping
• Unit tests (17)
• Component/e2e tests (24)
• Documentation examples (3 new sections)

🏁 Checklist

• ⛑️ Tests are included (17 unit + 24 Playwright component tests)
• 📘 Component documentation has been extended (3 new example sections)
• 2️⃣ Backport to stable8 for maintained Vue 2 version or not applicable

[codecov]

Codecov Report

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

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8570      +/-   ##
==========================================
+ Coverage   54.55%   55.28%   +0.73%     
==========================================
  Files         106      106              
  Lines        3439     3451      +12     
  Branches     1002     1008       +6     
==========================================
+ Hits         1876     1908      +32     
+ Misses       1322     1308      -14     
+ Partials      241      235       -6     

☔ View full report in Codecov by Harness.
📢 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.

[skjnldsv]

Ok @kra-mo @jancborchardt seems I fixed it all! Please update your reviews 🙇

[kra-mo]

Looks mostly OK, but

1. user select seems to still clip for me

and

2. I'm not loving the label shifting to the bottom:

Any chance to just make some room for it and keep it at the same spot even when it expands above?

[kra-mo]

Oof, and also, the previous selection remains as a placeholder and you can type over it?

And in general the selected value is misaligned with the actual thing you're typing so the position marker clips:

[skjnldsv]

I'm definitely missing my last commit because those are 3 issues I fixed thhis morning 🙈
Il'l have a look at my laptop