add more jsdoc class comments to libs/components

Co-authored-by: Claude <noreply@anthropic.com>

eslint.config.mjs

@@ -176,7 +176,7 @@ export default tseslint.config(
   // JSDoc requirements for components library
   {
     files: ["libs/components/src/**/*.ts"],
-    ignores: ["**/*.spec.ts", "**/*.stories.ts"],
+    ignores: ["**/*.spec.ts", "**/*.stories.ts", "**/stories/**/*.ts", "**/kitchen-sink/**/*.ts"],
     plugins: {
       jsdoc: jsdoc,
     },

libs/components/src/a11y/router-focus-manager.service.ts

@@ -6,6 +6,9 @@ import { skip, filter, combineLatestWith, tap } from "rxjs";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 
+/**
+ * Service that manages focus after SPA route navigation for accessibility.
+ */
 @Injectable({ providedIn: "root" })
 export class RouterFocusManagerService {
   private router = inject(Router);

libs/components/src/anon-layout/anon-layout-wrapper-data.service.ts

@@ -8,7 +8,6 @@ import { AnonLayoutWrapperData } from "./anon-layout-wrapper.component";
  */
 export abstract class AnonLayoutWrapperDataService {
   /**
-   *
    * @param data - The data to set on the AnonLayoutWrapperComponent to feed into the AnonLayoutComponent.
    */
   abstract setAnonLayoutWrapperData(data: Partial<AnonLayoutWrapperData>): void;

libs/components/src/dialog/dialog.service.ts

@@ -46,6 +46,9 @@ class CustomBlockScrollStrategy implements ScrollStrategy {
   detach() {}
 }
 
+/**
+ * Abstract base class for dialog references that provides a consistent interface for both dialogs and drawers.
+ */
 export abstract class DialogRef<R = unknown, C = unknown> implements Pick<
   CdkDialogRef<R, C>,
   "close" | "closed" | "disableClose" | "componentInstance"

libs/components/src/dialog/simple-dialog/types.ts

@@ -5,7 +5,6 @@ export interface Translation {
 
 // Using type lets devs skip optional params w/out having to pass undefined.
 /**
- *
  * @typedef {Object} SimpleDialogOptions - A configuration type for the Simple Dialog component
  */
 export type SimpleDialogOptions = {

libs/components/src/drawer/drawer.component.ts

@@ -39,9 +39,9 @@ export class DrawerComponent {
    * The ARIA role of the drawer.
    *
    * - [complementary](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/complementary_role)
-   *    - For drawers that contain content that is complementary to the page's main content. (default)
+   * - For drawers that contain content that is complementary to the page's main content. (default)
    * - [navigation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role)
-   *    - For drawers that primary contain links to other content.
+   * - For drawers that primary contain links to other content.
    */
   readonly role = input<"complementary" | "navigation">("complementary");
 

libs/components/src/form-control/form-control.component.ts

@@ -8,6 +8,9 @@ import { TypographyDirective } from "../typography/typography.directive";
 
 import { BitFormControlAbstraction } from "./form-control.abstraction";
 
+/**
+ * Container component that provides consistent layout and styling for form inputs with labels and hints.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/form-control/hint.directive.ts

@@ -3,6 +3,9 @@ import { Directive, HostBinding } from "@angular/core";
 // Increments for each instance of this component
 let nextId = 0;
 
+/**
+ * Directive for displaying hint text below form inputs.
+ */
 @Directive({
   selector: "bit-hint",
   host: {

libs/components/src/form-control/label.component.ts

@@ -6,6 +6,9 @@ import { FormControlComponent } from "./form-control.component";
 // Increments for each instance of this component
 let nextId = 0;
 
+/**
+ * Label component for form inputs with support for required indicators.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/form-field/error-summary.component.ts

@@ -3,6 +3,9 @@ import { AbstractControl, UntypedFormGroup } from "@angular/forms";
 
 import { I18nPipe } from "@bitwarden/ui-common";
 
+/**
+ * Component that displays a summary count of validation errors in a form.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/form-field/error.component.ts

@@ -5,6 +5,9 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 // Increments for each instance of this component
 let nextId = 0;
 
+/**
+ * Component that displays validation error messages for form fields.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/form-field/form-field.component.ts

@@ -22,6 +22,9 @@ import { inputBorderClasses } from "../input/input.directive";
 import { BitErrorComponent } from "./error.component";
 import { BitFormFieldControl } from "./form-field-control";
 
+/**
+ * Container component that manages form field layout with labels, inputs, errors, and hints.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/form-field/password-input-toggle.directive.ts

@@ -16,6 +16,9 @@ import { BitIconButtonComponent } from "../icon-button/icon-button.component";
 
 import { BitFormFieldComponent } from "./form-field.component";
 
+/**
+ * Directive for toggling password visibility in password input fields.
+ */
 @Directive({
   selector: "[bitPasswordInputToggle]",
   host: {

libs/components/src/form-field/prefix.directive.ts

@@ -2,6 +2,9 @@ import { Directive, OnInit, Optional } from "@angular/core";
 
 import { BitIconButtonComponent } from "../icon-button/icon-button.component";
 
+/**
+ * Directive for adding prefix content to form fields.
+ */
 @Directive({
   selector: "[bitPrefix]",
   host: {

libs/components/src/form-field/suffix.directive.ts

@@ -2,6 +2,9 @@ import { Directive, OnInit, Optional } from "@angular/core";
 
 import { BitIconButtonComponent } from "../icon-button/icon-button.component";
 
+/**
+ * Directive for adding suffix content to form fields.
+ */
 @Directive({
   selector: "[bitSuffix]",
   host: {

libs/components/src/header/header.component.ts

@@ -2,6 +2,9 @@ import { ChangeDetectionStrategy, Component, input } from "@angular/core";
 
 import { TypographyDirective } from "../typography/typography.directive";
 
+/**
+ * Header component that displays a page title with an optional icon.
+ */
 @Component({
   selector: "bit-header",
   templateUrl: "./header.component.html",

libs/components/src/icon-button/icon-button.component.ts

@@ -84,12 +84,13 @@ const sizes: Record<IconButtonSize, string[]> = {
   default: ["tw-text-xl", "tw-p-2.5", "tw-rounded-md"],
   small: ["tw-text-base", "tw-p-2", "tw-rounded"],
 };
+
 /**
-  * Icon buttons are used when no text accompanies the button. It consists of an icon that may be updated to any icon in the `bwi-font`, a `title` attribute, and an `aria-label` that are added via the `label` input.
-
-  * The most common use of the icon button is in the banner, toast, and modal components as a close button. It can also be found in tables as the 3 dot option menu, or on navigation list items when there are options that need to be collapsed into a menu.
-
-  * Similar to the main button components, spacing between multiple icon buttons should be .5rem.
+ * Icon buttons are used when no text accompanies the button. It consists of an icon that may be updated to any icon in the `bwi-font`, a `title` attribute, and an `aria-label` that are added via the `label` input.
+ *
+ * The most common use of the icon button is in the banner, toast, and modal components as a close button. It can also be found in tables as the 3 dot option menu, or on navigation list items when there are options that need to be collapsed into a menu.
+ *
+ * Similar to the main button components, spacing between multiple icon buttons should be .5rem.
  */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection

libs/components/src/icon/icon.component.ts

@@ -3,6 +3,9 @@ import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
 
 import { Icon, isIcon } from "@bitwarden/assets/svg";
 
+/**
+ * Component for displaying SVG icons with proper accessibility support.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/item/item-action.component.ts

@@ -1,5 +1,8 @@
 import { Component } from "@angular/core";
 
+/**
+ * Component for rendering action buttons within an item.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/item/item-content.component.ts

@@ -11,6 +11,9 @@ import {
 
 import { TypographyModule } from "../typography";
 
+/**
+ * Component for rendering the main content area of an item with support for text truncation.
+ */
 @Component({
   selector: "bit-item-content, [bit-item-content]",
   imports: [TypographyModule, NgClass],

libs/components/src/item/item-group.component.ts

@@ -1,5 +1,8 @@
 import { ChangeDetectionStrategy, Component } from "@angular/core";
 
+/**
+ * Container component for grouping multiple items together.
+ */
 @Component({
   selector: "bit-item-group",
   imports: [],

libs/components/src/item/item.component.ts

@@ -8,6 +8,9 @@ import {
 
 import { ItemActionComponent } from "./item-action.component";
 
+/**
+ * List item component with support for hover states and focus-visible styling.
+ */
 @Component({
   selector: "bit-item",
   imports: [ItemActionComponent],

libs/components/src/layout/layout.component.ts

@@ -12,6 +12,9 @@ import { SharedModule } from "../shared";
 
 import { ScrollLayoutHostDirective } from "./scroll-layout.directive";
 
+/**
+ * Main layout component providing page structure with side navigation and drawer support.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/link/link.directive.ts

@@ -83,18 +83,21 @@ const commonStyles = [
   "aria-disabled:hover:tw-no-underline",
 ];
 
+/**
+ * Base directive for link styling.
+ */
 @Directive()
 abstract class LinkDirective {
   readonly linkType = input<LinkType>("default");
 }
 
 /**
-  * Text Links and Buttons can use either the `<a>` or `<button>` tags. Choose which based on the action the button takes:
-
-  * - if navigating to a new page, use a `<a>`
-  * - if taking an action on the current page, use a `<button>`
-
-  * Text buttons or links are most commonly used in paragraphs of text or in forms to customize actions or show/hide additional form options.
+ * Text Links and Buttons can use either the `<a>` or `<button>` tags. Choose which based on the action the button takes:
+ *
+ * - if navigating to a new page, use a `<a>`
+ * - if taking an action on the current page, use a `<button>`
+ *
+ * Text buttons or links are most commonly used in paragraphs of text or in forms to customize actions or show/hide additional form options.
  */
 @Directive({
   selector: "a[bitLink]",
@@ -107,6 +110,9 @@ export class AnchorLinkDirective extends LinkDirective {
   }
 }
 
+/**
+ * Directive for styling button elements as links with support for disabled state.
+ */
 @Directive({
   selector: "button[bitLink]",
   hostDirectives: [AriaDisableDirective],

libs/components/src/menu/menu-divider.component.ts

@@ -1,5 +1,8 @@
 import { Component } from "@angular/core";
 
+/**
+ * Divider component for separating menu items.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/menu/menu-item.component.ts

@@ -3,6 +3,9 @@ import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { NgClass } from "@angular/common";
 import { Component, ElementRef, HostBinding, Input } from "@angular/core";
 
+/**
+ * Individual menu item component with keyboard navigation and focus management support.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/menu/menu-trigger-for.directive.ts

@@ -50,6 +50,9 @@ const CONTEXT_MENU_POSITIONS: ConnectedPosition[] = [
   },
 ];
 
+/**
+ * Directive that creates a trigger for opening and positioning menu overlays.
+ */
 @Directive({
   selector: "[bitMenuTriggerFor]",
   exportAs: "menuTrigger",

libs/components/src/menu/menu.component.ts

@@ -12,6 +12,9 @@ import {
 
 import { MenuItemComponent } from "./menu-item.component";
 
+/**
+ * Menu component container with keyboard navigation and accessibility support.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/multi-select/multi-select.component.ts

@@ -34,6 +34,9 @@ import { SelectItemView } from "./models/select-item-view";
 // Increments for each instance of this component
 let nextId = 0;
 
+/**
+ * Multi-select dropdown component with search and item management capabilities.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
@@ -52,9 +55,6 @@ let nextId = 0;
     "[id]": "this.id()",
   },
 })
-/**
- * This component has been implemented to only support Multi-select list events
- */
 export class MultiSelectComponent implements OnInit, BitFormFieldControl, ControlValueAccessor {
   readonly select = viewChild.required(NgSelectComponent);
 

libs/components/src/navigation/nav-divider.component.ts

@@ -3,6 +3,9 @@ import { Component } from "@angular/core";
 
 import { SideNavService } from "./side-nav.service";
 
+/**
+ * Navigation divider component for separating navigation items.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/navigation/nav-group.component.ts

@@ -22,6 +22,9 @@ import { NavBaseComponent } from "./nav-base.component";
 import { NavGroupAbstraction, NavItemComponent } from "./nav-item.component";
 import { SideNavService } from "./side-nav.service";
 
+/**
+ * Navigation group component with collapsible functionality and nested navigation support.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/navigation/nav-item.component.ts

@@ -8,12 +8,18 @@ import { IconButtonModule } from "../icon-button";
 import { NavBaseComponent } from "./nav-base.component";
 import { SideNavService } from "./side-nav.service";
 
-// Resolves a circular dependency between `NavItemComponent` and `NavItemGroup` when using standalone components.
+/**
+ * Abstract base class for navigation group functionality.
+ * Resolves a circular dependency between `NavItemComponent` and `NavItemGroup` when using standalone components.
+ */
 export abstract class NavGroupAbstraction {
   abstract setOpen(open: boolean): void;
   abstract treeDepth: ReturnType<typeof model<number>>;
 }
 
+/**
+ * Navigation item component with tree depth support and focus management.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/navigation/nav-logo.component.ts

@@ -8,6 +8,9 @@ import { BitIconComponent } from "../icon/icon.component";
 
 import { SideNavService } from "./side-nav.service";
 
+/**
+ * Navigation logo component that displays different icons based on side nav state.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/navigation/side-nav.component.ts

@@ -12,6 +12,9 @@ import { SideNavService } from "./side-nav.service";
 
 export type SideNavVariant = "primary" | "secondary";
 
+/**
+ * Side navigation component with resizable width and keyboard navigation support.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/popover/popover-trigger-for.directive.ts

@@ -15,6 +15,9 @@ import { Observable, Subscription, filter, mergeWith } from "rxjs";
 import { defaultPositions } from "./default-positions";
 import { PopoverComponent } from "./popover.component";
 
+/**
+ * Directive that creates a trigger for opening and positioning popover overlays.
+ */
 @Directive({
   selector: "[bitPopoverTriggerFor]",
   exportAs: "popoverTrigger",

libs/components/src/popover/popover.component.ts

@@ -5,6 +5,9 @@ import { IconButtonModule } from "../icon-button/icon-button.module";
 import { SharedModule } from "../shared/shared.module";
 import { TypographyModule } from "../typography";
 
+/**
+ * Popover component for displaying overlay content with an optional title and close button.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

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

@@ -1,5 +1,8 @@
 import { Directive, ElementRef, EventEmitter, Output, OnDestroy } from "@angular/core";
 
+/**
+ * Directive that observes element resize events using the ResizeObserver API.
+ */
 @Directive({
   selector: "[resizeObserver]",
   standalone: true,

libs/components/src/section/section-header.component.ts

@@ -2,6 +2,9 @@ import { Component } from "@angular/core";
 
 import { TypographyModule } from "../typography";
 
+/**
+ * Header component for sections with automatic spacing adjustments based on sibling elements.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/section/section.component.ts

@@ -2,6 +2,9 @@ import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { CommonModule } from "@angular/common";
 import { Component, input } from "@angular/core";
 
+/**
+ * Section container component with configurable bottom margin.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/stepper/step.component.ts

@@ -1,6 +1,9 @@
 import { CdkStep, CdkStepper } from "@angular/cdk/stepper";
 import { Component, input } from "@angular/core";
 
+/**
+ * Individual step component for use within a stepper, extending Angular CDK's CdkStep.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/table/cell.directive.ts

@@ -1,5 +1,8 @@
 import { Directive, HostBinding } from "@angular/core";
 
+/**
+ * Directive for styling table cells with consistent padding.
+ */
 @Directive({
   selector: "th[bitCell], td[bitCell]",
 })

libs/components/src/table/row.directive.ts

@@ -1,5 +1,8 @@
 import { Directive, HostBinding, input } from "@angular/core";
 
+/**
+ * Directive for styling table rows with consistent borders and hover effects.
+ */
 @Directive({
   selector: "tr[bitRow]",
 })

libs/components/src/table/sortable.component.ts

@@ -5,6 +5,9 @@ import { Component, HostBinding, OnInit, input } from "@angular/core";
 import type { SortDirection, SortFn } from "./table-data-source";
 import { TableComponent } from "./table.component";
 
+/**
+ * Sortable table header component that adds sorting functionality to table columns.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/table/table-data-source.ts

@@ -12,6 +12,9 @@ export type Sort = {
 
 export type FilterFn<T> = (data: T) => boolean;
 
+/**
+ * Data source for tables with built-in sorting and filtering capabilities.
+ */
 // Loosely based on CDK TableDataSource
 //  https://github.com/angular/components/blob/main/src/material/table/table-data-source.ts
 export class TableDataSource<T> extends DataSource<T> {

libs/components/src/table/table.component.ts

@@ -13,6 +13,9 @@ import { Observable } from "rxjs";
 
 import { TableDataSource } from "./table-data-source";
 
+/**
+ * Directive for defining the table body template.
+ */
 @Directive({
   selector: "ng-template[body]",
 })
@@ -21,6 +24,9 @@ export class TableBodyDirective {
   constructor(public readonly template: TemplateRef<any>) {}
 }
 
+/**
+ * Table component with support for custom data sources and configurable layouts.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/tabs/tab-group/tab-body.component.ts

@@ -1,6 +1,9 @@
 import { TemplatePortal, CdkPortalOutlet } from "@angular/cdk/portal";
 import { Component, effect, HostBinding, input } from "@angular/core";
 
+/**
+ * Component that renders the content body of a tab.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/tabs/tab-group/tab-group.component.ts

@@ -27,6 +27,9 @@ import { TabComponent } from "./tab.component";
 /** Used to generate unique ID's for each tab component */
 let nextId = 0;
 
+/**
+ * Tab group component that manages multiple tabs with keyboard navigation and accessibility.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/tabs/tab-group/tab.component.ts

@@ -11,6 +11,9 @@ import {
 
 import { TabLabelDirective } from "./tab-label.directive";
 
+/**
+ * Individual tab component that renders a tab panel within a tab group.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/tabs/tab-nav-bar/tab-link.component.ts

@@ -16,6 +16,9 @@ import { TabListItemDirective } from "../shared/tab-list-item.directive";
 
 import { TabNavBarComponent } from "./tab-nav-bar.component";
 
+/**
+ * Tab link component that integrates with router for navigation-based tabs.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/tabs/tab-nav-bar/tab-nav-bar.component.ts

@@ -6,6 +6,9 @@ import { TabListContainerDirective } from "../shared/tab-list-container.directiv
 
 import { TabLinkComponent } from "./tab-link.component";
 
+/**
+ * Navigation bar component that manages a collection of router-based tab links.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/toast/toast-container.component.ts

@@ -1,6 +1,9 @@
 import { Component, OnInit, viewChild } from "@angular/core";
 import { ToastContainerDirective, ToastrService } from "ngx-toastr";
 
+/**
+ * Container component for rendering toast notifications.
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/toast/toast.component.ts

@@ -25,6 +25,9 @@ const variants: Record<ToastVariant, { icon: string; bgColor: string }> = {
   },
 };
 
+/**
+ * Toast notification component with support for different variants (success, error, info, warning).
+ */
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({

libs/components/src/toggle-group/toggle-group.component.ts

@@ -9,6 +9,9 @@ import {
 
 let nextId = 0;
 
+/**
+ * Toggle group component that manages a set of toggle buttons with radio group behavior.
+ */
 @Component({
   selector: "bit-toggle-group",
   templateUrl: "./toggle-group.component.html",

libs/components/src/toggle-group/toggle.component.ts

@@ -17,6 +17,9 @@ import { ToggleGroupComponent } from "./toggle-group.component";
 
 let nextId = 0;
 
+/**
+ * Individual toggle button component for use within a toggle group.
+ */
 @Component({
   selector: "bit-toggle",
   templateUrl: "./toggle.component.html",

libs/components/src/typography/typography.directive.ts

@@ -26,6 +26,9 @@ const margins: Record<TypographyType, string[]> = {
   helper: [],
 };
 
+/**
+ * Directive for applying typography styles and margins based on the typography type.
+ */
 @Directive({
   selector: "[bitTypography]",
 })

libs/components/src/utils/i18n-mock.service.ts

@@ -1,5 +1,8 @@
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
+/**
+ * Mock implementation of I18nService for testing and storybook purposes.
+ */
 export class I18nMockService implements Pick<I18nService, "t" | "translate"> {
   constructor(
     private lookupTable: Record<string, string | ((...args: (string | undefined)[]) => string)>,

libs/components/src/utils/state-mock.ts

@@ -7,6 +7,9 @@ import {
   KeyDefinition,
 } from "@bitwarden/state";
 
+/**
+ * Mock implementation of GlobalState for Storybook stories.
+ */
 export class StorybookGlobalState<T> implements GlobalState<T> {
   private _state$ = new BehaviorSubject<T | null>(null);
 
@@ -33,6 +36,9 @@ export class StorybookGlobalState<T> implements GlobalState<T> {
   }
 }
 
+/**
+ * Mock implementation of GlobalStateProvider for Storybook stories.
+ */
 export class StorybookGlobalStateProvider implements GlobalStateProvider {
   private states = new Map<string, StorybookGlobalState<any>>();