Reimplement CSS styling for Key-Value field in New Edit Content

[oidacra]

Problem Statement

The Key-Value field in the New Edit Content page is rendered without its expected custom styling. The component key-value-field.component.ts has no associated stylesheet (no styleUrl declared and no .scss file present alongside the .html / .ts). After the PrimeNG Lara theme migration, the previous styles were most likely dropped and were never re-added.

As a result, the field relies only on default PrimeNG primitives and loses the layout, spacing, button treatment, and empty-state presentation it used to have. Content editors working with key-value fields see an inconsistent visual experience compared to other fields in the new editor.

Component location:

• core-web/libs/edit-content/src/lib/fields/dot-edit-content-key-value/components/key-value-field/key-value-field.component.ts
• core-web/libs/edit-content/src/lib/fields/dot-edit-content-key-value/components/key-value-field/key-value-field.component.html

Browser & OS: All browsers / all OS (pure CSS regression).

Steps to Reproduce

1. Log in to dotCMS admin.
2. Go to Content → New Edit Content and open a Content Type that includes a Key-Value field.
3. Edit a contentlet of that type.
4. Scroll down to the Key-Value field.
5. Observe that the Key / Value inputs, the add (+) button, and the empty-state row (Add your key and value here) are presented without proper spacing, alignment, or visual hierarchy — inputs and the + icon don't feel aligned with the rest of the Lara-themed form, and there is no dedicated styling for the empty state or the table of added pairs.

Acceptance Criteria

• A dedicated SCSS file is added next to key-value-field.component.ts and wired up via styleUrl in the component decorator.
• Styles use the Lara theme tokens (CSS variables / PrimeNG design tokens) — no hardcoded colors, spacings, or typography values that conflict with Lara.
• Key and Value inputs are visually aligned with the + add button on the same row; the row matches the spacing and border-radius conventions used by other fields in the New Edit Content form.
• The empty-state row (Add your key and value here) has a styled container (icon + label) that clearly communicates it is empty, matching Lara conventions.
• The list of already-added key/value pairs renders with proper spacing, separators, and consistent hover / focus states.
• Validation states (required, invalid, duplicated key) render with the same visual treatment (colors, helper text) as other Lara-themed inputs.
• The fix is scoped to the New Edit Content usage only (libs/edit-content/.../key-value-field). Legacy key-value components used elsewhere are explicitly out of scope.
• No regression in keyboard navigation, focus outlines, or accessibility (labels remain associated with inputs, + button remains reachable via Tab).
• Visual verification performed on Chrome, Firefox, and Safari on the New Edit Content page.

dotCMS Version

Latest from main branch (post PrimeNG Lara theme migration).

Severity

Low - Minor issue or cosmetic

Links

• Related work on key-value field: Key/Value Field: Key validation does not refresh after deleting conflicting key/value pair #32114 (validation refresh branch — scope is different but same component)
• NA — no Freshdesk ticket