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

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:

```html
<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>
```

Author: spike-rabbit

api-goldens/element-ng/side-panel/index.api.md

@@ -51,6 +51,19 @@ export interface SidePanelNavigateRouterLink {
 // @public
 export type SidePanelSize = 'regular' | 'wide' | 'extended';
 
+// @public
+export class SiSidePanelActionComponent {
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly icon: _angular_core.InputSignal<string>;
+    readonly iconColor: _angular_core.InputSignal<string | undefined>;
+    readonly stackedIcon: _angular_core.InputSignal<string | undefined>;
+    readonly stackedIconColor: _angular_core.InputSignal<string | undefined>;
+}
+
+// @public
+export class SiSidePanelActionsComponent {
+}
+
 // @public (undocumented)
 export class SiSidePanelComponent implements OnInit, OnDestroy, OnChanges {
     constructor();
@@ -85,6 +98,7 @@ export class SiSidePanelContentComponent implements OnInit {
     readonly searchPlaceholder: _angular_core.InputSignal<TranslatableString>;
     readonly secondaryActions: _angular_core.InputSignal<(MenuItem | MenuItem_2)[]>;
     readonly showMobileDrawerBadge: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    // @deprecated
     readonly statusActions: _angular_core.InputSignal<StatusItem[]>;
     toggleFullscreen(): void;
     readonly toggleItemLabel: _angular_core.InputSignal<TranslatableString>;
@@ -113,7 +127,7 @@ export class SiSidePanelService {
     toggleFullscreen(): void;
 }
 
-// @public
+// @public @deprecated
 export interface StatusItem extends MenuItem {
     // (undocumented)
     overlayIcon?: string;

playwright/e2e/element-examples/si-side-panel.spec.ts

@@ -8,6 +8,9 @@ test.describe('si-side-panel', () => {
   const example = 'si-side-panel/si-side-panel';
   const exampleCollapsible = 'si-side-panel/si-side-panel-collapsible';
 
+  const exampleCollapsibleLegacyStatusActions =
+    'si-side-panel/si-side-panel-collapsible-legacy-status-actions';
+
   test(`${example} - modes and backdrop`, async ({ page, si }) => {
     await si.visitExample(example);
 
@@ -63,6 +66,18 @@ test.describe('si-side-panel', () => {
     await si.runVisualAndA11yTests('open');
   });
 
+  test(exampleCollapsibleLegacyStatusActions, async ({ page, si }) => {
+    await si.visitExample(exampleCollapsibleLegacyStatusActions);
+
+    await page.locator('.btn').getByText('close').click();
+    await expect(page.locator('si-side-panel.rpanel-collapsed')).toBeVisible();
+    await si.runVisualAndA11yTests('legacy-closed');
+
+    await page.locator('.btn').getByText('Toggle side panel').click();
+    await expect(page.locator('si-side-panel:not(.rpanel-collapsed)')).toBeVisible();
+    await si.runVisualAndA11yTests('legacy-open');
+  });
+
   test(`${example} - fullscreen button visibility`, async ({ page, si }) => {
     await page.setViewportSize({ width: 500, height: 800 });
     await si.visitExample(example);

playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--closed-element-examples-chromium-dark-linux.png

@@ -1,8 +1,6 @@
 - button "Toggle"
-- link "Out of Service":
-  - /url: ""
-- link "Event source active, ack":
-  - /url: ""
+- button "Out of Service"
+- button "Event source active, ack"
 - button "Properties"
 - button "Documents"
 - button "Graphics"

playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--closed-element-examples-chromium-light-linux.png

@@ -5,10 +5,8 @@
   - menuitem "Toggle"
 - button "Enter fullscreen"
 - button "Toggle"
-- link "Out of Service":
-  - /url: ""
-- link "Event source active, ack":
-  - /url: ""
+- button "Out of Service"
+- button "Event source active, ack"
 - textbox "Search..."
 - button "Properties 5" [expanded]
 - region "Properties 5": And here we have some content