feat(side-panel): extract status actions into new component

[spike-rabbit]

The main motivation is to allow access to the native elements.
In some applications a status action triggers a menu or overlay.
This is currently built by those apps using a DOM query.
With this change, they can just use the overlay directive.

In addition, we can deprecate the StatusItem interface,
which depends on the already deprecated MenuItem.

The usage is quite simple:

<si-side-panel-content>
  <si-side-panel-actions>
      <button
        type="button"
        si-side-panel-action
        icon="element-alarm-background-filled"
        iconColor="status-danger"
        overlayIcon="element-alarm-tick"
        overlayIconColor="text-body"
        (click)="action()"
      >
        Action
      </button>
  </si-side-panel-actions>
</si-side-panel-content>

---

Documentation.
Examples.
Dashboards Demo.
Playwright report.

Coverage Reports:

• element-ng
• element-translate-ng

[gemini-code-assist]

Code Review

This pull request is a great improvement, extracting the status actions into new standalone components. This refactoring simplifies the API for developers and allows for more flexible use of features like overlays, while also deprecating the older StatusItem interface. The implementation largely adheres to the repository's style guide. I've identified a minor opportunity for improvement in the SCSS to avoid using !important, which will enhance maintainability.

[spliffone]

I would prefer an approach where we just use content-projection and some CSS classes to show status actions which offers more flexibility for consumers. The status action components has simply to much logic inside.

[spike-rabbit]

@spliffone I chose a component here to maintain some flexibility for us in the future.
They way this currently behaves based on expanded / collapsed of the side-panel is not ideal.
I am afraid, that fixing this may requires JS logic.

On the long run, I would like to have a more flexible solution to render icons / actions in a collapsed side-panel (needed for AI patterns).
So I am targetting to get rid of this component completely.

But currently, the main focus is solve a consumer request.

[ljanner]

@spike-rabbit great changes! I really like the clear naming and good examples.

Just two small details. The commit body already gives great insight to the change, but please add a deprecation note so it properly shows up in the changelog.

[ljanner]

I would think it would be more clear if a to use a line break like so:

Suggested change

	<span class="text-pre-wrap">Event source&#10;active, ack</span>
	<span>Event source<br>active, ack</span>

Not fully sure what the recommended way is.

[ljanner]

Required for https://github.com/siemens/element/pull/1676/changes#r2964815774

Suggested change

	}
	span {
	color: all-variables.$element-text-primary;
	}

[ljanner]

Since the dot is displayed when the action is disabled and the action consist of the icon mainly this should probably replicate the icon-size that used to be 24px AFAIK and wasn't updated most likely, therefore we should keep the separator aligned with the icon size imo

Suggested change

	inline-size: 24px;
	line-height: 24px;
	inline-size: all-variables.$si-icon-font-size;
	line-height: all-variables.$si-icon-font-size;

[ljanner]

Suggested change

	<span class="ms-2 auto-hide text-start">
	<span class="ms-2 auto-hide si-caption text-start">