feat(framework): move CSS variables to host element

[nnaydenow]

With this PR, all component CSS variables are defined on the host element. This enables overriding --sap variables in a specific context.

For example:

<div style="--sapField_Background: red;">
   ...
</div>

In this case, --sapField_Background: red overrides the background of all fields within that context.

Also fixed in this PR:

• Move CSS variable declarations from :root to :host
• Replace density-aware selectors ([data-ui5-compact-size], .ui5-content-density-compact, .sapUiSizeCompact) with a container query:

  @container style(--ui5_content_density: compact) {
    :host { ... }
  }

• Remove usage of getScopedVarName when components define CSS variables on the host with JavaScript
• Revise overrides of --ui5-* variables (e.g. ui5-button overrides inside ui5-shellbar)
• Fix several minor issues with incorrect style overrides
• Add a test that verifies the correct values are applied based on content density

Follow-up to: #12928
Fixes: #12791

[ui5-webcomponents-bot]

🧹 Preview deployment cleaned up: https://pr-12984--ui5-webcomponents.netlify.app

[ui5-webcomponents-bot]

🎉 This PR is included in version v2.19.0-rc.3 🎉

The release is available on v2.19.0-rc.3

Your semantic-release bot 📦🚀