chore(framework): apply css variables on custom element

[nnaydenow]

Enable customization of --sap* theming CSS variables at the component level (part one: style preparation and loading mechanism).

Example:

<ui5-button style="--sapButton_Background: red">

To support all use cases, internal --ui5* CSS variables must be defined on the custom element using the :host selector, not on the document using the :root selector.

For the same reason, all content density–related variables and direction-related variables must also be defined on :host.

Direction-related variables are now set using the :dir() selector.

For content density–related variables, there was no fully working solution before. CSS container style queries are not fully supported, and the classes and attributes used by application developers are applied outside the shadow root. This PR adds a mechanism to handle this. CSS container style queries are now used and, at build time, they are transpiled into a working solution.

To define variables, use the following syntax:

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

All of this behavior is controlled by the cssVariablesTarget flag (accepted values: "host" and "root"). The flag is configured at the package level via package-script.js.
When this flag is enabled, all *-parameters.css files must be migrated to define variables on :host instead of :root.

For direction-related CSS variables, the :dir() selector is used. For content density–related variables, the new container style query syntax is used.

Since CSS variables are now defined at the component level, CSS variable scoping is no longer needed. As a result, the getScopedVarName function is no longer required.

Fixes: #12791

[ui5-webcomponents-bot]

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