[CL-194] add vertical stepper to CL (#14528)

* Copy Vertical stepper into CL

* remove unused input

* add docs around vertical step usage

* use signal inputs

* add vertical step story

* enhance documentation

* WIP

* Rename to Stepper

* adds horizontal stepper

* updated view logic

* add resizeobserver directive

* add basic responsizeness to stepper

* add comment about stateChanged method

* update responsive logic

* reformat with prettier

* remove obsolete applyBorder input

* fix step type mismatch

* fix incorrect step import

* fix borken disabled logic

* fix class logic

* move tabpanel out of tablist. correctly increment ids

* make map private

* use accordion attributes for vertical stepper

* barrel export directive

* fixing types

* remove now obsolete step-content

* reimplement constructors to fix storybook not rendering

* move padding to different container

* move map and observer into directive

* remove useless test for now

* add comment about constructor implementation

* add template variable for disabled state

* fix typo

* simplify resize observer directive logic

* add jsdoc description

* use typography directive

* use the variable for step disabled

* Update libs/components/src/stepper/stepper.mdx

Co-authored-by: Vicki League <vleague@bitwarden.com>

---------

Co-authored-by: Will Martin <contact@willmartian.com>
Co-authored-by: Vicki League <vleague@bitwarden.com>

libs/components/src/resize-observer/index.ts

@@ -0,0 +1 @@
+export * from "./resize-observer.directive";

libs/components/src/resize-observer/resize-observer.directive.ts

@@ -0,0 +1,30 @@
+import { Directive, ElementRef, EventEmitter, Output, OnDestroy } from "@angular/core";
+
+@Directive({
+  selector: "[resizeObserver]",
+  standalone: true,
+})
+export class ResizeObserverDirective implements OnDestroy {
+  private observer = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      if (entry.target === this.el.nativeElement) {
+        this._resizeCallback(entry);
+      }
+    }
+  });
+
+  @Output()
+  resize = new EventEmitter();
+
+  constructor(private el: ElementRef) {
+    this.observer.observe(this.el.nativeElement);
+  }
+
+  _resizeCallback(entry: ResizeObserverEntry) {
+    this.resize.emit(entry);
+  }
+
+  ngOnDestroy() {
+    this.observer.unobserve(this.el.nativeElement);
+  }
+}