[PM-14422] Vault Carousel (#12791)

* collect tailwind styles from the `libs/vault/*`

- Some unique styles were not showing in storybook

* initial add of carousel component

* initial add of carousel stories

* move carousel button to a standalone component for organization

* add key manager for carousel buttons

* add tab panel role to slide component

* make carousel slide focusable when it does not contain focusable elements

* add aria live to carousel slides

* add labels for carousel slide buttons

* emit slide change event

* move icons to carousel-icons folder

* add barrel file for carousel

* move protected properties

* remove underscore

* allow differing heights of carousel slides

* update interactive styles for the carousel icons

* allow for focus styled on carousel buttons

* fix tests

* fix imports

* add method to render each slide and get the height of the tallest slide

- This avoids consumers having to pass in a height.
- The height of the tallest slide is needed because it will stop the carousel from jumping around as the user scrolls.

* add comment to content property

* remove rem calculation

libs/vault/src/components/carousel/carousel-slide/carousel-slide.component.ts

@@ -0,0 +1,41 @@
+import { coerceBooleanProperty } from "@angular/cdk/coercion";
+import { TemplatePortal } from "@angular/cdk/portal";
+import { Component, Input, OnInit, TemplateRef, ViewChild, ViewContainerRef } from "@angular/core";
+
+@Component({
+  selector: "vault-carousel-slide",
+  templateUrl: "./carousel-slide.component.html",
+  standalone: true,
+})
+export class VaultCarouselSlideComponent implements OnInit {
+  /** `aria-label` that is assigned to the carousel toggle. */
+  @Input({ required: true }) label!: string;
+
+  /**
+   * Should be set to true when the slide has no focusable elements.
+   *
+   * When the slide does not contain any focusable elements or the first element with content is not focusable,
+   * this should be set to 0 to include it in the tab sequence of the page.
+   *
+   * @remarks See note 4 of https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
+   */
+  @Input({ transform: coerceBooleanProperty }) noFocusableChildren?: true;
+
+  @ViewChild(TemplateRef, { static: true }) implicitContent!: TemplateRef<unknown>;
+
+  private _contentPortal: TemplatePortal | null = null;
+
+  /**
+   * A Portal containing the content of the slide.
+   * Used by `VaultCarouselComponent` when the slide becomes active.
+   */
+  get content(): TemplatePortal | null {
+    return this._contentPortal;
+  }
+
+  constructor(private viewContainerRef: ViewContainerRef) {}
+
+  ngOnInit(): void {
+    this._contentPortal = new TemplatePortal(this.implicitContent, this.viewContainerRef);
+  }
+}