[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/stepper/stepper.stories.ts

@@ -0,0 +1,70 @@
+import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
+
+import { ButtonComponent } from "../button";
+
+import { StepComponent } from "./step.component";
+import { StepperComponent } from "./stepper.component";
+
+export default {
+  title: "Component Library/Stepper",
+  component: StepperComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ButtonComponent, StepComponent],
+    }),
+  ],
+} as Meta;
+
+export const Default: StoryObj<StepperComponent> = {
+  render: (args) => ({
+    props: args,
+    template: /*html*/ `
+      <bit-stepper [orientation]="orientation">
+        <bit-step
+          label="This is the label"
+          subLabel="This is the sub label"
+        >
+          <p>Your custom step content appears in here. You can add whatever content you'd like</p>
+          <button
+              type="button"
+              bitButton
+              buttonType="primary"
+            >
+              Some button label
+            </button>
+        </bit-step>
+        <bit-step
+            label="Another label"
+        >
+            <p>Another step</p>
+            <button
+              type="button"
+              bitButton
+              buttonType="primary"
+            >
+              Some button label
+            </button>
+        </bit-step>
+        <bit-step
+            label="The last label"
+        >
+            <p>The last step</p>
+            <button
+                type="button"
+                bitButton
+                buttonType="primary"
+            >
+            Some button label
+            </button>
+        </bit-step>
+    </bit-stepper>
+    `,
+  }),
+};
+
+export const Horizontal: StoryObj<StepperComponent> = {
+  ...Default,
+  args: {
+    orientation: "horizontal",
+  },
+};