@leanix/components 0.4.818 → 0.4.819

package/fesm2022/leanix-components.mjs

@@ -84,11 +84,21 @@ const GLOBAL_TRANSLATION_OPTIONS = new InjectionToken('GLOBAL_TRANSLATION_OPTION
 
 /**
  * Badge component is used to show a small piece of information in a colored badge.
+ * Commonly used for status indicators, counts, or labels.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-badge [content]="42" color="blue" />
+ * <lx-badge [content]="'New'" color="green" />
+ * <lx-badge [content]="errorCount" color="red" />
+ * ```
  */
 class BadgeComponent {
     constructor() {
         /**
          * The color of the badge component
+         * @default 'blue'
          */
         this.color = 'blue';
     }
@@ -121,15 +131,33 @@ const BANNER_SIZE = {
 
 /**
  * Banner can be used to display important information to the user. It allows for any type of content to be displayed in a banner.
+ * Banners automatically display an icon based on the type when using the 'big' size.
+ *
+ * ### Projection slots
+ * - Default slot: Main content of the banner (text, links, actions)
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-banner [type]="'warning'" [size]="'big'">
+ *   <p>Your session will expire in 5 minutes.</p>
+ * </lx-banner>
+ *
+ * <lx-banner [type]="'success'" [size]="'small'">
+ *   Changes saved successfully!
+ * </lx-banner>
+ * ```
  */
 class BannerComponent {
     constructor() {
         /**
          * The type of the banner
+         * @default BANNER_TYPE.WARNING
          */
         this.type = input(BANNER_TYPE.WARNING);
         /**
          * The size of the banner
+         * @default BANNER_SIZE.BIG
          */
         this.size = input(BANNER_SIZE.BIG);
         this.showIcon = computed(() => this.size() === BANNER_SIZE.BIG);
@@ -175,8 +203,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                     }, imports: [IconComponent$1], template: "<div class=\"banner-wrapper\">\n  @if (showIcon()) {\n    <ui5-icon [name]=\"iconName()\" [design]=\"iconDesign()\" />\n  }\n  <div class=\"banner-content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block;border-left:2px solid}:host[type=success]{background-color:color-mix(in srgb,#33cc58 10%,white);border-color:#33cc58}:host[type=info]{background-color:color-mix(in srgb,#2889ff 10%,white);border-color:#2889ff}:host[type=warning]{background-color:color-mix(in srgb,#ffb62a 10%,white);border-color:#ffb62a}:host[type=danger]{background-color:color-mix(in srgb,#f96464 10%,white);border-color:#f96464}:host[size=big]{margin-bottom:12px}:host[size=big] .banner-wrapper{position:relative;padding:.75rem}:host[size=big] .banner-content{padding-left:2rem}:host[size=big] ui5-icon{position:absolute;top:.875rem;left:.75rem}:host[size=small]{margin-bottom:6px}:host[size=small] .banner-wrapper{padding:.5rem}:host ::ng-deep .banner-content h4{margin-top:0;color:inherit}:host ::ng-deep .banner-content .alert-link{font-weight:700}:host ::ng-deep .banner-content>p,:host ::ng-deep .banner-content>ul{margin-bottom:0}:host ::ng-deep .banner-content p+p{margin-bottom:5px}:host ::ng-deep .banner-content p:last-child{margin-bottom:0}\n"] }]
         }] });
 
+/**
+ * Button group component arranges multiple buttons in a horizontal layout with configurable separators.
+ * Use 'margin' for spaced buttons or 'border' for connected buttons with dividing lines.
+ *
+ * ### Projection slots
+ * - Default slot: Button elements to display in the group
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-button-group separator="margin">
+ *   <button lx-button color="primary">Save</button>
+ *   <button lx-button>Cancel</button>
+ * </lx-button-group>
+ *
+ * <lx-button-group separator="border">
+ *   <button lx-button mode="outline">View</button>
+ *   <button lx-button mode="outline">Edit</button>
+ *   <button lx-button mode="outline">Delete</button>
+ * </lx-button-group>
+ * ```
+ */
 class ButtonGroupComponent {
     constructor() {
+        /**
+         * The type of separator between buttons: 'margin' for spacing or 'border' for dividing lines.
+         * @default 'margin'
+         */
         this.separator = 'margin';
     }
     get hasMarginSeperator() {
@@ -204,39 +258,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 /**
  * Button component is used to create a button with different styles and sizes. This uses native button element and
  * only provides styling and some additional features like loading spinner.
+ *
+ * ### Projection slots
+ * - Default slot: Button label or content
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <button lx-button color="primary" size="medium">Save</button>
+ * <button lx-button icon="delete" color="danger" mode="outline">Delete</button>
+ * <button lx-button [showSpinner]="isLoading" [disabled]="isLoading">Submit</button>
+ * <button lx-button icon="download" endIcon="slim-arrow-down" mode="ghost">Export</button>
+ * <button lx-button icon="action-settings" [square]="true" [circle]="true" mode="ghost"></button>
+ * ```
  */
 class ButtonComponent {
     constructor() {
         /**
          * The size of the button.
+         * @default 'medium'
          */
         this.size = 'medium';
         /**
          * The color of the button.
+         * @default 'default'
          */
         this.color = 'default';
         /**
          * The mode of the button.
+         * @default 'solid'
          */
         this.mode = 'solid';
         /**
          * The pressed state of the button. This simulates the `:active` state of the button.
+         * @default false
          */
         this.pressed = false;
         /**
          * The selected state of the button. This simulates the `:hover` state of the button.
+         * @default false
          */
         this.selected = false;
         /**
          * This makes the button square.
+         * @default false
          */
         this.square = false;
         /**
          * This makes corners rounded. Use with `square` for a true circle.
+         * @default false
          */
         this.circle = false;
         /**
          * This disables the button.
+         * @default false
          */
         this.disabled = false;
         /**
@@ -269,6 +344,7 @@ class ButtonComponent {
         this.endIconKind = computed(() => (isFontAwesomeIcon(this.endIconName()) ? 'fa' : 'sap'));
         /**
          * This shows a spinner inside the button.
+         * @default false
          */
         this.showSpinner = false;
     }
@@ -361,13 +437,26 @@ function removeFontAwesomeVariant(iconName) {
 }
 
 /**
- * Card component is a container component that can be used to display content in a card-like style.
- * This documentation provides details on the usage and configuration of the Card Component.
+ * A simple container component for displaying content in a card-like style.
+ * Provides consistent styling and layout for grouped content.
+ *
+ * ### Projection slots
+ * - Default slot: All card content including title, body, and any other elements
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-card [dataStyle]="'white'">
+ *   <h3>Card Title</h3>
+ *   <p>Card content goes here.</p>
+ * </lx-card>
+ * ```
  */
 class CardComponent {
     constructor() {
         /**
-         * The style of the card.
+         * The visual style variant of the card.
+         * @default 'white'
          */
         this.dataStyle = 'white';
     }
@@ -384,14 +473,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 args: ['attr.data-style']
             }] } });
 
+/**
+ * An expandable and collapsible section container with a toggle button.
+ * Useful for organizing content that can be shown or hidden on demand.
+ *
+ * ### Projection slots
+ * - Default slot: The title or header content that is always visible. The entire component is clickable to toggle.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-collapsible [toggleTitle]="'Show Details'" [(collapsed)]="isCollapsed">
+ *   <h3>Section Title</h3>
+ *   <span class="subtitle">Additional info</span>
+ * </lx-collapsible>
+ * ```
+ */
 class CollapsibleComponent {
     constructor() {
         this.NAME = 'CollapsibleComponent';
+        /**
+         * When true, prevents the section from being toggled. The toggle button remains visible but disabled.
+         * @default false
+         */
         this.disableSectionToggle = false;
+        /**
+         * When true, hides the toggle button entirely. The section cannot be collapsed/expanded.
+         * @default false
+         */
         this.hideSectionToggle = false;
+        /**
+         * Size of the toggle button (arrow icon).
+         * @default 'small'
+         */
         this.toggleSize = 'small';
+        /**
+         * Text label displayed as the title attribute of the toggle button for accessibility.
+         * @default ''
+         */
         this.toggleTitle = '';
+        /**
+         * Whether the section is currently collapsed. Can be used with two-way binding.
+         * @default false
+         */
         this.collapsed = false;
+        /**
+         * Emitted when the collapsed state changes, either through user interaction or programmatic changes.
+         */
         this.collapsedChange = new EventEmitter();
     }
     get notClickable() {
@@ -435,12 +563,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 /**
  * Counter component is used to create a counter with different styles and sizes.
+ * Useful for displaying notification counts, item quantities, or numeric indicators.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-counter [content]="5" color="primary" size="default" />
+ * <lx-counter [content]="99" color="red" size="small" />
+ * <lx-counter [content]="unreadCount" color="green" />
+ * ```
  */
 class CounterComponent {
     constructor() {
-        /** The size of the counter. */
+        /**
+         * The size of the counter.
+         * @default 'default'
+         */
         this.size = 'default';
-        /** The color of the counter. */
+        /**
+         * The color of the counter.
+         * @default 'primary'
+         */
         this.color = 'primary';
     }
     get classes() {
@@ -613,6 +756,14 @@ const LX_ELLIPSIS_DEBOUNCE_ON_RESIZE = new InjectionToken('LX_ELLIPSIS_DEBOUNCE_
 });
 /**
  * You can set `max-width` CSS property on your `lx-ellipsis` host element or the parent element if you want its content to never exceed a specific width.
+ * The component automatically truncates overflowing text and provides a "Show more" / "Show less" toggle button.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-ellipsis [content]="longDescription" style="max-width: 300px;" />
+ * <lx-ellipsis [content]="userInput" [escapeHtmlInContent]="true" />
+ * ```
  */
 class EllipsisComponent {
     /** @internal */
@@ -623,10 +774,15 @@ class EllipsisComponent {
         this.hostEl = hostEl;
         this.resizeObserverService = resizeObserverService;
         this.translateService = translateService;
+        /**
+         * The text content to display and potentially truncate.
+         * @default ''
+         */
         this.content = '';
         /**
          * Only set this to false if the content is not a user provided string
          * or if you sanitize the provided content yourself.
+         * @default true
          */
         this.escapeHtmlInContent = true;
         /** @internal */
@@ -739,59 +895,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 args: ['showMoreButton', { read: ElementRef }]
             }], content$: [] } });
 
+/**
+ * Displays an empty state with an optional icon, title, description, action buttons, and a more link.
+ * Useful for showing initial states before data is loaded or when no data is available.
+ *
+ * ### Projection slots
+ * - Default slot: Description text or additional content to display below the title
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-empty-state
+ *   [title]="'No items found'"
+ *   [icon]="'inbox'"
+ *   [buttonLabel]="'Add Item'"
+ *   [secondaryButtonLabel]="'Import'"
+ *   [moreLinkLabel]="'Learn more'"
+ *   [moreLink]="'https://docs.example.com'"
+ *   (buttonClicked)="onAddItem()"
+ *   (secondaryButtonClicked)="onImport()"
+ * >
+ *   <p>Start by adding your first item or importing existing data.</p>
+ * </lx-empty-state>
+ * ```
+ */
 class EmptyStateComponent {
     constructor() {
         /**
-         * The title to be displayed
+         * The title to be displayed. Can contain HTML.
          */
         this.title = input.required();
         /**
-         * The SAP icon to show in the empty state.
+         * The SAP icon name to show in the empty state (e.g., 'inbox', 'add-document').
          */
         this.icon = input();
         /**
-         * The main call-to-action button label
+         * The main call-to-action button label. If not provided, the button will not be shown.
          */
         this.buttonLabel = input();
         /**
-         * The secondary call-to-action button label
+         * The secondary call-to-action button label. If not provided, the button will not be shown.
          */
         this.secondaryButtonLabel = input();
         /**
-         * Whether the empty state is in a loading state. If true, main call-to-action button will show a spinner
+         * Whether the empty state is in a loading state. If true, action buttons will show a spinner.
+         * @default false
          */
         this.loading = input(false);
         /**
-         * The more link label
+         * The text label for the more link.
          */
         this.moreLinkLabel = input();
         /**
-         * The URL of the more link
+         * The URL of the more link. Can be a string for external links or an array for Angular router links.
          */
         this.moreLink = input();
         /**
-         * Whether the more link should be opened in a new tab
-         *
+         * Whether the more link should be opened in a new tab.
          * @default true
          */
         this.openMoreLinkInNewTab = input(true);
         /**
-         * The size of the empty state
-         *
-         * @default medium
+         * The size of the empty state.
+         * @default 'medium'
          */
         this.size = input('medium');
         this.useRouterLink = computed(() => Array.isArray(this.moreLink()));
         /**
-         * Emitted when the main call-to-action button is clicked
+         * Emitted when the main call-to-action button is clicked.
          */
         this.buttonClicked = new EventEmitter();
         /**
-         * Emitted when the secondary call-to-action button is clicked
+         * Emitted when the secondary call-to-action button is clicked.
          */
         this.secondaryButtonClicked = new EventEmitter();
         /**
-         * Emitted when the more link is clicked
+         * Emitted when the more link is clicked.
          */
         this.moreLinkClicked = new EventEmitter();
     }
@@ -822,10 +1001,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  *   (or ancestor with new rendering context, created, for example, with `transform: translate(0, 0)`
  * - `fadeBackground`: Sets background to 60% transparent white. TODO: Always use for fullSpace* classes and remove.
  *
+ * ### Projection slots
+ * - Default slot: Optional text or content to display below the spinner
+ *
  * @deprecated Use the `ui5-busy-indicator` component instead.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-spinner class="fullSpace fadeBackground">Loading...</lx-spinner>
+ * <lx-spinner [fadeBackground]="true" />
+ * ```
  */
 class SpinnerComponent {
     constructor() {
+        /**
+         * Applies a semi-transparent white background.
+         * @default false
+         * @deprecated Use the `fadeBackground` CSS class instead.
+         */
         this.fadeBackground = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -845,6 +1039,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * Stepper component is a wrapper around the Angular CDK Stepper component. It provides a way to create a linear
  * sequence of steps that guide users through a process.
  *
+ * ### Projection slots
+ * Each `cdk-step` element projects its content into the stepper's content area when that step is active.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-stepper [selectedIndex]="currentStep">
+ *   <cdk-step label="Personal Info">
+ *     <form>
+ *       <input type="text" placeholder="Name" />
+ *     </form>
+ *   </cdk-step>
+ *   <cdk-step label="Contact Details">
+ *     <form>
+ *       <input type="email" placeholder="Email" />
+ *     </form>
+ *   </cdk-step>
+ *   <cdk-step label="Review">
+ *     <p>Review your information</p>
+ *   </cdk-step>
+ * </lx-stepper>
+ * ```
+ *
  * ## Usage
  *
  * 1. Import `LxCoreUiModule` module from `@leanix/components` and `CdkStepperModule` module from `@angular/cdk/stepper` in your module where you want to use the component, or in case of a standalone parent component, import the
@@ -910,6 +1127,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * The `lx-table` directive can be applied to `<table>` elements to provide a common styling.
  * Furthermore it supports column sorting in combination with `<lx-th>` for table headers.
  *
+ * ### Example
+ * @example
+ * ```html
+ * <table lx-table [isSortable]="true" [(sort)]="sort">
+ *   <thead>
+ *     <tr>
+ *       <lx-th column="name">Name</lx-th>
+ *       <lx-th column="status" [disableSortClear]="true">Status</lx-th>
+ *       <lx-th column="actions" [disableSort]="true">Actions</lx-th>
+ *     </tr>
+ *   </thead>
+ *   <tbody>
+ *     <tr>
+ *       <td>Item 1</td>
+ *       <td>Active</td>
+ *       <td><button>Edit</button></td>
+ *     </tr>
+ *   </tbody>
+ * </table>
+ * ```
  *
  * ## Usage
  *
@@ -951,11 +1188,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 class TableComponent {
     constructor() {
         /**
-         * This enables or disables the sortability of the table.
+         * Enables or disables the sortability of the table. When enabled, `<lx-th>` elements with a `column` attribute become sortable.
+         * @default false
          */
         this.isSortable = input(false);
         /**
-         * The sort state of the table. Which column is sorted in what order.
+         * The sort state of the table containing the column key and sort order (ASC, DESC, or undefined).
+         * Can be used with two-way binding to control and react to sort changes.
+         * @default {}
          */
         this.sort = model({});
     }
@@ -1020,22 +1260,43 @@ registerIcon('sort-asc', {
 });
 /**
  * The `lx-th` can be used in combination with `lx-table` to implement sortable `<table>` elements.
+ * Renders a table header cell with optional sorting functionality.
+ *
+ * ### Projection slots
+ * - Default slot: The header text content
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <table lx-table [isSortable]="true" [(sort)]="sort">
+ *   <thead>
+ *     <tr>
+ *       <lx-th column="name">Name</lx-th>
+ *       <lx-th column="date" [disableSortClear]="true">Date</lx-th>
+ *       <lx-th column="actions" [disableSort]="true">Actions</lx-th>
+ *     </tr>
+ *   </thead>
+ * </table>
+ * ```
  */
 class TableHeaderComponent {
     #sort;
     constructor(parentTable) {
         this.parentTable = parentTable;
         /**
-         * Indicates that the column is not sortable (default `false`).
+         * Disables sorting for this column even when the table has sorting enabled.
+         * @default false
          */
         this.disableSort = false;
         /**
-         * Prevents the user from clearing the sort.
-         * Only allowing to toggle between asc & desc.
+         * Prevents the user from clearing the sort state.
+         * When true, only allows toggling between ascending and descending order.
+         * @default false
          */
         this.disableSortClear = false;
         /**
-         * Triggers whenever the user changes the sort order.
+         * Emitted whenever the user changes the sort order by clicking the header.
+         * Provides the new sort state with column key and order.
          */
         this.sortChange = new EventEmitter();
         this.sortable = computed(() => (this.parentTable?.isSortable() && !this.disableSort) ?? false);
@@ -2129,10 +2390,40 @@ function isValidY(y) {
     return ['top', 'center', 'bottom'].includes(y);
 }
 
+/**
+ * Tooltip component for displaying contextual information on hover.
+ *
+ * Supports plain text or HTML content with configurable positioning.
+ * Typically used via the `lxTooltip` directive rather than directly.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <button [lxTooltip]="'Save changes'">Save</button>
+ *
+ * <button [lxTooltip]="'<strong>Warning:</strong> Cannot be undone'" [lxTooltipHtml]="true">Delete</button>
+ * ```
+ */
 class TooltipComponent {
     constructor() {
+        /**
+         * The tooltip content to display as plain text or HTML.
+         *
+         * @default ''
+         */
         this.content = '';
+        /**
+         * Whether the content should be rendered as HTML.
+         * When false, content is displayed as plain text.
+         *
+         * @default false
+         */
         this.isHtmlContent = false;
+        /**
+         * The position of the tooltip relative to the target element.
+         *
+         * @default { x: 'center', y: 'top' }
+         */
         this.position = {
             x: 'center',
             y: 'top'
@@ -2697,7 +2988,8 @@ const FA_MODIFIER_REGEX = /\s*\b(fas|far|fal|fad|fab)\b\s*/g;
  * Useful for scenarios in which icon names need to be mapped at runtime,
  * e.g. because they are stored in the backend.
  *
- * @example ```html
+ * @example
+ * ```html
  * <ui5-icon [name]="fontAwesomeIcon() | lxFaToSapIcon" />
  * ```
  */
@@ -2798,11 +3090,35 @@ const AVATAR_COLORS = [
     '#fc9785'
 ];
 
+/**
+ * Avatar component displays a user's profile picture or a placeholder icon for technical users.
+ * Optionally includes a mailto link when an email is provided.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-avatar [user]="currentUser" size="M" />
+ * <lx-avatar [user]="{ displayName: 'Bot', technicalUser: true }" [showMailToLink]="false" />
+ * <lx-avatar [user]="inactiveUser" [disabled]="true" size="S" />
+ * ```
+ */
 class AvatarComponent {
     constructor(imageReader) {
         this.imageReader = imageReader;
+        /**
+         * The size of the avatar.
+         * @default 'M'
+         */
         this.size = 'M';
+        /**
+         * Whether to show a mailto link when clicking on the avatar.
+         * @default true
+         */
         this.showMailToLink = true;
+        /**
+         * Whether the avatar should appear in a disabled state.
+         * @default false
+         */
         this.disabled = false;
         this.NAME = 'AvatarComponent';
         this.imageURL = this.imageReader.getAvatar(DEFAULT_IMAGE_ID, this.size, this.user?.displayName);
@@ -2833,6 +3149,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Avatar group component displays multiple user avatars in a compact layout.
+ * Supports automatic overflow handling with a "+N" indicator and overlay expansion.
+ * Includes tooltip showing all user names on hover and click-to-expand functionality.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-avatar-group [users]="teamMembers" size="M" />
+ * <lx-avatar-group [users]="assignees" type="individual" [maxLength]="5" />
+ * <lx-avatar-group
+ *   [users]="participants"
+ *   [title]="'Project Team'"
+ *   [disabledUserIds]="inactiveUserIds"
+ *   [autoScale]="true"
+ * />
+ * ```
+ */
 class AvatarGroupComponent {
     get userNames() {
         return this.users
@@ -2845,11 +3179,35 @@ class AvatarGroupComponent {
         this.zone = zone;
         this.resizeObserverService = resizeObserverService;
         this.NAME = 'AvatarGroupComponent';
+        /**
+         * Array of user objects to display as avatars.
+         * @default []
+         */
         this.users = [];
+        /**
+         * The size of all avatars in the group.
+         * @default 'M'
+         */
         this.size = 'M';
+        /**
+         * The display type: 'individual' for separate avatars or 'group' for overlapping.
+         * @default 'group'
+         */
         this.type = 'group';
+        /**
+         * Maximum number of avatars to display before showing "+N" indicator.
+         * @default 0
+         */
         this.maxLength = 0;
+        /**
+         * Whether to automatically scale down avatars to fit container width.
+         * @default false
+         */
         this.autoScale = false;
+        /**
+         * Array of user IDs that should be displayed in a disabled state.
+         * @default []
+         */
         this.disabledUserIds = [];
         this.overlayVisible = false;
     }
@@ -2923,7 +3281,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  *
  *
  * ### Example
- * @example ```html
+ * @example
+ * ```html
  * <lx-page-header [pageTitle]="'Agile Tracking'">
  *   <ui5-breadcrumbs>
  *     <ui5-breadcrumbs-item routerLink="/">Root Page</ui5-breadcrumbs-item>
@@ -2995,11 +3354,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * Use skeleton loaders for pages or sections that load content progressively, like text and images. The component can
  * be used to compose various scenarios like placeholders for thumbnails, lists, and avatars. See the example
  * [patterns](?path=/docs/skeleton-patterns--docs) for more details.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-skeleton width="100%" height="20px" />
+ * <lx-skeleton width="200px" height="200px" borderRadius="50%" />
+ * <lx-skeleton width="80%" height="16px" color="dark" />
+ * ```
  */
 class SkeletonComponent {
     constructor() {
         /**
-         * Color of the skeleton element. 'dark' or 'light' are supported. Default is 'light'.
+         * Color of the skeleton element. 'dark' or 'light' are supported.
+         * @default 'light'
          */
         this.color = 'light';
     }
@@ -3031,6 +3399,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Input
             }] } });
 
+/**
+ * A token wrapper component used within `lx-tokenizer` to represent individual items.
+ * The tokenizer manages visibility of tokens based on available space.
+ *
+ * ### Projection slots
+ * - Default slot: The content to display inside the token (text, icons, badges, etc.)
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-tokenizer>
+ *   <lx-token>Token One</lx-token>
+ *   <lx-token>Token Two</lx-token>
+ * </lx-tokenizer>
+ * ```
+ */
 class TokenComponent {
     constructor(elementRef) {
         this.elementRef = elementRef;
@@ -3049,13 +3433,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             args: [{ selector: 'lx-token', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
+/**
+ * A companion component for `lx-tokenizer` that displays overflowing tokens in a popover.
+ * Automatically listens to the tokenizer's overflow events and shows a popover anchored to the counter button.
+ *
+ * ### Projection slots
+ * - `popoverTemplate`: Template to render inside the popover. Receives the `startIndex` of overflowing tokens as context.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-tokenizer #tokenizer [active]="true">
+ *   <lx-token>Item 1</lx-token>
+ *   <lx-token>Item 2</lx-token>
+ *   <lx-token>Item 3</lx-token>
+ * </lx-tokenizer>
+ *
+ * <lx-tokenizer-overflow-popover [tokenizer]="tokenizer">
+ *   <ng-template #popoverTemplate let-startIndex>
+ *     <div class="overflow-items">
+ *       @for (item of getOverflowItems(startIndex); track item) {
+ *         <div>{{ item }}</div>
+ *       }
+ *     </div>
+ *   </ng-template>
+ * </lx-tokenizer-overflow-popover>
+ * ```
+ */
 class TokenizerOverflowPopoverComponent {
     constructor() {
         this.destroyRef = inject(DestroyRef);
         this.startIndex = signal(0);
         this.changeDetectorRef = inject(ChangeDetectorRef);
+        /**
+         * Reference to the tokenizer component to listen for overflow events.
+         */
         this.tokenizer = input.required();
+        /**
+         * Horizontal alignment of the popover relative to the counter button.
+         * @default 'after'
+         */
         this.horizontalAlign = input('after');
+        /**
+         * Vertical alignment of the popover relative to the counter button.
+         * @default 'start'
+         */
         this.verticalAlign = input('start');
         effect(() => {
             this.overflowClickSubscription?.unsubscribe();
@@ -3087,7 +3509,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 /**
- * The tokenizer component (`lx-tokenizer`) is responsible for rendering a list of items into a container and hiding those that do not fit behind a placeholder. The items are represented as `lx-token`. Each `lx-token` allows to project any content into it, so anything can become a token. The tokenizer calculates how many items fit into the container (based on width), hiding those items that are overflowing and showing a overflow placeholder instead (e.g. "+4").
+ * Renders a list of items (`lx-token`) into a container and hides overflowing items behind a counter (e.g., "+4").
+ * Automatically calculates how many tokens fit based on available width and responds to container resize events.
+ *
+ * ### Projection slots
+ * - `lx-token`: Individual token items to be managed by the tokenizer
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-tokenizer [active]="true" (overflowPlaceholderClick)="onOverflowClick($event)">
+ *   <lx-token>Item 1</lx-token>
+ *   <lx-token>Item 2</lx-token>
+ *   <lx-token>Item 3</lx-token>
+ *   <lx-token>Item 4</lx-token>
+ * </lx-tokenizer>
+ * ```
  *
  * ## Usage
  *
@@ -3135,14 +3572,16 @@ class TokenizerComponent {
         this.overflowItems = signal([]);
         this.overflowItemCount = computed(() => this.overflowItems().length);
         this.showCounter = computed(() => this.active() && this.overflowItemCount() > 0);
-        /** Can be used to activate & deactivate tokenization */
+        /**
+         * Enables or disables tokenization. When false, all tokens are shown regardless of available space.
+         * @default true
+         */
         this.active = input(true);
         this.active$ = toObservable(this.active);
         this.overflowStartIndex = signal(null);
         /**
-         * Emitted when the counter button is clicked
-         * @param startIndex The index of the first overflowing element
-         * @param counterElement The counter button element
+         * Emitted when the overflow counter button (e.g., "+4") is clicked.
+         * Provides the index of the first hidden token and the counter button element for positioning popovers.
          */
         this.overflowPlaceholderClick = new EventEmitter();
         afterRenderEffect(() => {
@@ -3350,9 +3789,37 @@ function isSupportedNode(node) {
     return node.nodeType === Node.ELEMENT_NODE && node.nodeName !== 'SCRIPT' && node.nodeName !== 'STYLE';
 }
 
+/**
+ * Renders a dropdown item with label and optional description.
+ * Supports text highlighting and custom styling options.
+ *
+ * ### Projection slots
+ * - `optionLabelSuffix`: Template to append to the label (e.g., badges, icons)
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-basic-dropdown-item
+ *   label="Option Name"
+ *   description="Additional details"
+ *   highlightTerm="search">
+ *   <ng-template #optionLabelSuffix>
+ *     <span class="badge">New</span>
+ *   </ng-template>
+ * </lx-basic-dropdown-item>
+ * ```
+ */
 class BasicDropdownItemComponent {
     constructor() {
+        /**
+         * Font weight for the label text.
+         * @default 'bold'
+         */
         this.labelFontWeight = 'bold';
+        /**
+         * Font style for the description text.
+         * @default 'normal'
+         */
         this.descriptionFontStyle = 'normal';
     }
     get hasDescription() {
@@ -3560,6 +4027,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 args: ['keyboardSelectContainer', { static: true }]
             }] } });
 
+/**
+ * A simple dropdown component for selecting a single value from a flat list of options.
+ * Supports keyboard navigation, custom templates, infinite scrolling, and the ability to create new options.
+ * Uses Angular CDK overlay for positioning and supports both top and bottom dropdown placement.
+ *
+ * ### Projection slots
+ * - `optionTemplate`: Custom template for rendering each option
+ * - `createNewOptionTemplate`: Custom template for the "create new option" button
+ * - `descriptionTemplateRef`: Custom template for additional description content
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-basic-dropdown
+ *   [options]="items"
+ *   [labelKey]="'name'"
+ *   [itemKey]="'id'"
+ *   [placeholder]="'Select an item'"
+ *   (onItemSelected)="handleSelection($event)">
+ * </lx-basic-dropdown>
+ * ```
+ */
 class BasicDropdownComponent extends KeyboardSelectDirective {
     static isNewItem(items, term, key) {
         if (!term) {
@@ -3574,17 +4063,59 @@ class BasicDropdownComponent extends KeyboardSelectDirective {
     constructor() {
         super();
         this.NAME = 'BasicDropdownComponent';
+        /**
+         * Array of options to display in the dropdown.
+         */
         this.options = [];
+        /**
+         * Index of the option to be selected initially.
+         * @default -1
+         */
         this.initiallySelectedIndex = -1;
+        /**
+         * Whether the dropdown is in a loading state.
+         * @default false
+         */
         this.loading = false;
+        /**
+         * Padding variant for the dropdown items.
+         * @default 'default'
+         */
         this.padding = 'default';
+        /**
+         * Whether to show the "create new option" button.
+         * @default false
+         */
         this.showCreateNewOption = false;
+        /**
+         * Map of disabled options, keyed by the item's unique identifier.
+         */
         this.disabledOptions = {};
+        /**
+         * Whether to use CDK overlay positioning.
+         * @default false
+         */
         this.overlayPositioning = false;
+        /**
+         * Whether to truncate long option text.
+         * @default false
+         */
         this.truncateOptions = false;
+        /**
+         * Event emitted when an option is selected.
+         */
         this.onItemSelected = new EventEmitter();
+        /**
+         * Event emitted when the user scrolls to the bottom, triggering a request for more entries (infinite scroll).
+         */
         this.triggerRequestForMoreEntries = new EventEmitter();
+        /**
+         * Event emitted when a new option label is selected (for creating new items).
+         */
         this.newOptionLabelSelected = new EventEmitter();
+        /**
+         * Event emitted when the "create new option" button is clicked.
+         */
         this.createNewOptionSelected = new EventEmitter();
         this.isTopDropdown = false;
     }
@@ -3761,13 +4292,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
+/**
+ * Groups options under a labeled section inside dropdowns.
+ * Used to organize related options within OptionsDropdownComponent, SingleSelectComponent, or MultiSelectComponent.
+ *
+ * ### Projection slots
+ * - Default slot: Option components (`lx-option`) to group together.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-option-group label="Recent Items" [hasSelectedState]="true">
+ *   <lx-option [value]="1">Item 1</lx-option>
+ *   <lx-option [value]="2">Item 2</lx-option>
+ * </lx-option-group>
+ * ```
+ */
 class OptionGroupComponent {
     constructor() {
         /**
-         * Is true when option children have a selected state.
-         * In this case we want to align the padding of the group label with the lx-options'.
+         * Whether option children have a selected state.
+         * When true, aligns the padding of the group label with the options.
+         * @default true
          */
         this.hasSelectedState = true;
+        /**
+         * Event emitted when an option within the group is selected.
+         * Emits the selected option's value.
+         */
         this.select = new EventEmitter();
     }
     selectOption(value) {
@@ -3787,6 +4339,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Individual option used inside OptionsDropdownComponent, SingleSelectComponent, or MultiSelectComponent.
+ * Can be used standalone or grouped within an OptionGroupComponent for organized selections.
+ */
 class OptionComponent {
     selectOption(event) {
         if (this.disabled || this.hasSubdropdown) {
@@ -3807,8 +4363,20 @@ class OptionComponent {
     constructor(group, elementRef) {
         this.group = group;
         this.elementRef = elementRef;
+        /**
+         * Whether the option is currently selected.
+         * @default false
+         */
         this.selected = false;
+        /**
+         * Whether the option is currently highlighted (e.g., via keyboard navigation).
+         * @default false
+         */
         this.isHighlighted = false;
+        /**
+         * Whether the option is disabled and cannot be interacted with.
+         * @default false
+         */
         this.disabled = false;
         /**
          * Is true when option has a selection nature like sorting.
@@ -3816,16 +4384,37 @@ class OptionComponent {
          *
          * Is false when option represents a one time action like printing.
          * Cannot have selectedState when Option has dropdown
+         * @default true
          */
         this.hasSelectedState = true;
         /**
+         * The icon used to indicate selection state.
+         * @default 'check'
          * @deprecated Use the default `'check'` value. The `'circle'` option is deprecated and will be removed in a future release.
          */
         this.selectIcon = 'check';
+        /**
+         * Event emitted when the option is selected.
+         * Emits the option's value.
+         */
         this.select = new EventEmitter();
+        /**
+         * Event emitted when the option's highlight state changes.
+         * Emits a boolean indicating the new highlight state.
+         */
         this.highlight = new EventEmitter();
+        /**
+         * Event emitted when an already selected option is clicked.
+         */
         this.selectedClick = new EventEmitter();
+        /**
+         * Event emitted when a keyboard event occurs on the option.
+         * Emits the KeyboardEvent for parent handling.
+         */
         this.keyDownAction = new EventEmitter();
+        /**
+         * Event emitted when the mouse enters the option area.
+         */
         this.mouseEnter = new EventEmitter();
         this.hasSubdropdown = false;
         this.isSuboption = false;
@@ -3915,6 +4504,24 @@ const TOP_RIGHT_POSITION$1 = {
 };
 const LEFT_ALIGN_POSITIONS$1 = [BOTTOM_LEFT_POSITION$1, TOP_LEFT_POSITION$1, BOTTOM_RIGHT_POSITION$1, TOP_RIGHT_POSITION$1];
 const RIGHT_ALIGN_POSITIONS$1 = [BOTTOM_RIGHT_POSITION$1, TOP_RIGHT_POSITION$1, BOTTOM_LEFT_POSITION$1, TOP_LEFT_POSITION$1];
+/**
+ * A dropdown component using CDK Overlay with keyboard navigation support.
+ * Manages option selection, highlighting, and sub-dropdown interactions.
+ *
+ * ### Projection slots
+ * - `[lxKeyboardActionSource]`: The trigger element (e.g., button) that opens the dropdown.
+ * - Default slot: Dropdown options (`lx-option` components).
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-cdk-options-dropdown [open]="isOpen" align="left" maxHeight="300px">
+ *   <button lxKeyboardActionSource>Select Option</button>
+ *   <lx-option [value]="1">Option 1</lx-option>
+ *   <lx-option [value]="2">Option 2</lx-option>
+ * </lx-cdk-options-dropdown>
+ * ```
+ */
 class CdkOptionsDropdownComponent {
     set open(value) {
         if (this.disabled) {
@@ -3939,9 +4546,25 @@ class CdkOptionsDropdownComponent {
     }
     constructor(changeDetection) {
         this.changeDetection = changeDetection;
+        /**
+         * Horizontal alignment of the dropdown relative to its trigger.
+         * @default 'right'
+         */
         this.align = 'right';
+        /**
+         * Whether to close the dropdown when the window is scrolled.
+         * @default false
+         */
         this.closeOnScroll = false;
+        /**
+         * Whether the dropdown trigger is disabled.
+         * @default false
+         */
         this.disabled = false;
+        /**
+         * Maximum height of the dropdown container. Use 'none' for no limit.
+         * @default 'none'
+         */
         this.maxHeight = 'none';
         this.highlightedOptionIndex$ = new BehaviorSubject(0);
         this._open = false;
@@ -4101,12 +4724,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 /**
  * @deprecated Use the `ui5-breadcrumbs` instead.
  *
- * Breadcrumb component is used to show a list of labels, usually to show the path of user's navigation.
+ * Breadcrumb component displays a list of labels showing the navigation path.
+ * Supports ellipsing consecutive items into a dropdown for space efficiency.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-breadcrumb [breadcrumbs]="breadcrumbs"></lx-breadcrumb>
+ * ```
+ *
+ * ```ts
+ * breadcrumbs: Breadcrumb[] = [
+ *   { label: 'Home', onClick: (b) => this.navigate(b) },
+ *   { label: 'Products', onClick: (b) => this.navigate(b) },
+ *   { label: 'Category', ellipsed: true },
+ *   { label: 'Subcategory', ellipsed: true },
+ *   { label: 'Item Details' }
+ * ];
+ * ```
  */
 class BreadcrumbComponent {
     constructor() {
         /**
-         * Breadcrumbs array to build the component.
+         * Array of breadcrumb items to display. Consecutive items with `ellipsed: true` are grouped into a dropdown.
+         * @default []
          */
         this.breadcrumbs = [];
         /** @internal */
@@ -4179,9 +4820,29 @@ const TOP_RIGHT_POSITION = {
 };
 const LEFT_ALIGN_POSITIONS = [BOTTOM_LEFT_POSITION, TOP_LEFT_POSITION, BOTTOM_RIGHT_POSITION, TOP_RIGHT_POSITION];
 const RIGHT_ALIGN_POSITIONS = [BOTTOM_RIGHT_POSITION, TOP_RIGHT_POSITION, BOTTOM_LEFT_POSITION, TOP_LEFT_POSITION];
+/**
+ * A nested sub-dropdown that appears next to a parent option.
+ * Opens on hover or keyboard navigation and supports both mouse and keyboard interactions.
+ *
+ * ### Projection slots
+ * - Default slot: Nested dropdown options (`lx-option` components).
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-cdk-options-sub-dropdown [trigger]="parentOption" align="right">
+ *   <lx-option [value]="1">Sub-option 1</lx-option>
+ *   <lx-option [value]="2">Sub-option 2</lx-option>
+ * </lx-cdk-options-sub-dropdown>
+ * ```
+ */
 class CdkOptionsSubDropdownComponent {
     constructor(changeDetection) {
         this.changeDetection = changeDetection;
+        /**
+         * Horizontal alignment of the sub-dropdown relative to the trigger option.
+         * @default 'right'
+         */
         this.align = 'right';
         this.open = false;
         this.isPositionComputed = true;
@@ -4412,6 +5073,18 @@ const CURRENCY_SYMBOL_MAP = {
     ZWD: 'ZWD'
 };
 
+/**
+ * Displays a currency symbol based on an ISO currency code.
+ *
+ * Converts currency codes (e.g., 'USD', 'EUR') to their symbolic representations ($, €).
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-currency-symbol [code]="'USD'"></lx-currency-symbol>
+ * <lx-currency-symbol [code]="'EUR'"></lx-currency-symbol>
+ * ```
+ */
 class CurrencySymbolComponent {
     ngOnInit() {
         this.currency$ = this.code$.pipe(map((code) => CURRENCY_SYMBOL_MAP[code] || code));
@@ -4429,20 +5102,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Input
             }], code$: [] } });
 
+/**
+ * Currency input field with locale-aware formatting and validation.
+ *
+ * Supports both view and edit modes with configurable currency symbols, decimal separators, and number types.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-currency-input
+ *   [code]="'USD'"
+ *   [data]="1234.56"
+ *   [mode]="'edit'"
+ *   [fieldDefinitionType]="'DOUBLE'"
+ *   [decimalSeparator]="'.'"
+ *   [iconPosition]="'first'"
+ *   (onChange)="handleValueChange($event)"
+ * ></lx-currency-input>
+ * ```
+ */
 class CurrencyInputComponent {
     get allowedCharacters() {
         return this.fieldDefinitionType === 'DOUBLE' ? new RegExp(`[0-9\e\\${this.decimalSeparator}\]`) : /[0-9\e\\]/;
     }
     constructor(changeDetector) {
         this.changeDetector = changeDetector;
+        /**
+         * Character used as decimal separator in input.
+         * @default '.'
+         */
         this.decimalSeparator = '.';
+        /**
+         * The numeric value of the input.
+         * @default 0
+         */
         this.data = 0;
+        /**
+         * Whether the input is disabled.
+         * @default false
+         */
         this.disabled = false;
+        /**
+         * Display mode of the component.
+         * @default 'edit'
+         */
         this.mode = 'edit';
+        /**
+         * Position of the currency symbol relative to the value.
+         * @default 'first'
+         */
         this.iconPosition = 'first';
+        /**
+         * Angular decimal pipe format string.
+         * @default '1.2-2'
+         */
         this.format = '1.2-2';
+        /**
+         * Whether to visually mark the input as invalid.
+         * @default false
+         */
         this.markInvalid = false;
+        /** Emitted when the input loses focus. */
         this.onFocusLost = new EventEmitter();
+        /** Emitted when the numeric value changes. */
         this.onChange = new EventEmitter();
         /** @internal */
         this.showCurrencyInput = false;
@@ -4622,10 +5344,22 @@ class DateFormatter {
 }
 
 /* tslint:disable: max-file-line-count */
+/**
+ * Core datepicker component managing date selection logic.
+ *
+ * Provides the underlying logic for day, month, and year selection modes.
+ * Used internally by DatePickerComponent.
+ *
+ * ### Projection slots
+ * - Default slot: Child picker components (daypicker, monthpicker, yearpicker).
+ */
 class DatePickerInnerComponent {
     constructor() {
+        /** Emitted when a date is selected. */
         this.selectionDone = new EventEmitter(undefined);
+        /** Emitted when active date is updated. */
         this.update = new EventEmitter(false);
+        /** Emitted when active date changes. */
         this.activeDateChange = new EventEmitter(undefined);
         /* tslint:disable-next-line: no-any*/
         this.stepDay = {};
@@ -4933,6 +5667,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 const isBs3 = () => true;
 
+/**
+ * Day selection view for the datepicker.
+ *
+ * Displays a calendar grid for selecting individual days within a month.
+ * Used internally by DatePickerInnerComponent.
+ */
 class DayPickerComponent {
     constructor(datePicker) {
         this.labels = [];
@@ -5233,6 +5973,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
   `, imports: [NgClass, ButtonComponent], styles: [":host .btn-secondary:not([lx-button]){color:#292b2c;background-color:#fff;border-color:#ccc}:host .btn-info .text-muted{color:#292b2c!important}\n"] }]
         }], ctorParameters: () => [{ type: DatePickerInnerComponent }] });
 
+/**
+ * Month selection view for the datepicker.
+ *
+ * Displays a grid of months for selecting a month within a year.
+ * Used internally by DatePickerInnerComponent.
+ */
 class MonthPickerComponent {
     constructor(datePicker) {
         this.rows = [];
@@ -5397,6 +6143,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 // @deprecated
 // tslint:disable
+/**
+ * Year selection view for the datepicker.
+ *
+ * Displays a grid of years for selecting a year within a range.
+ * Used internally by DatePickerInnerComponent.
+ */
 class YearPickerComponent {
     constructor(datePicker) {
         this.rows = [];
@@ -5788,74 +6540,176 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 const DEFAULT_MIN_DATE = new Date('0000-01-01');
 const DEFAULT_MAX_DATE = new Date('9999-12-31');
 /**
- * This is a date input component that can be used to select a date.
+ * Date input with integrated datepicker dropdown.
+ *
+ * Supports multiple rendering styles (input, link, button) and flexible date range restrictions.
+ *
+ * ### Projection slots
+ * - `dateStringTemplate`: Custom template for displaying the date string when `renderingStyle` is 'BUTTON'.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-date-input
+ *   [(date)]="selectedDate"
+ *   [minDate]="minDate"
+ *   [maxDate]="maxDate"
+ *   [renderingStyle]="'INPUT'"
+ *   [placeholder]="'Select a date'"
+ *   (dateChange)="onDateSelected($event)"
+ * ></lx-date-input>
+ * ```
  */
 class DateInputComponent {
     constructor(cd, dateFormatsProvider, getDateFnLocale) {
         this.cd = cd;
         this.dateFormatsProvider = dateFormatsProvider;
         this.getDateFnLocale = getDateFnLocale;
-        /** The initial date value for the date input field. This is used for `ngModel` and `formControl`. */
+        /**
+         * The initial date value for the date input field. This is used for `ngModel` and `formControl`.
+         * @default null
+         */
         this.date = null;
-        /** Secondary, alternative input with date string */
+        /**
+         * Secondary, alternative input with date string (format: 'yyyy-mm-dd').
+         * @default null
+         */
         this.dateString = null;
-        /** Determine whether formGroup's value accessor is accessing the selected IDs or the selected objects */
+        /**
+         * Determines whether formGroup's value accessor uses Date objects or date strings.
+         * @default 'date'
+         */
         this.valueAccessor = 'date';
-        /** ID to be set on input to correspond to outside label */
+        /**
+         * ID to be set on input to correspond to outside label.
+         * @default ''
+         */
         this.inputId = '';
-        /** The rendering style of the date input component. Can be one of "LINK", "BUTTON", or "INPUT". */
+        /**
+         * The rendering style of the date input component.
+         * @default 'INPUT'
+         */
         this.renderingStyle = 'INPUT';
-        /** The placeholder text to show in the date input field when there is no date selected */
+        /**
+         * The placeholder text to show in the date input field when there is no date selected.
+         * @default 'yyyy-mm-dd'
+         */
         this.placeholder = 'yyyy-mm-dd';
-        /** Deactivate to use old date picker */
+        /**
+         * Use CDK overlay for datepicker positioning. Set to false to use legacy positioning.
+         * @default true
+         */
         this.cdk = true;
-        /** Sets datepicker mode, supports: day, month, year */
+        /**
+         * Sets datepicker mode, supports: 'day', 'month', 'year'.
+         * @default 'day'
+         */
         this.datepickerMode = 'day';
-        /** Oldest selectable date */
+        /**
+         * Oldest selectable date.
+         * @default new Date('0000-01-01')
+         */
         this.minDate = DEFAULT_MIN_DATE;
-        /** Latest selectable date */
+        /**
+         * Latest selectable date.
+         * @default new Date('9999-12-31')
+         */
         this.maxDate = DEFAULT_MAX_DATE;
-        /** Set lower datepicker mode, supports: day, month, year */
+        /**
+         * Set lower datepicker mode, supports: 'day', 'month', 'year'.
+         * @default 'day'
+         */
         this.minMode = 'day';
-        /** Sets upper datepicker mode, supports: day, month, year */
+        /**
+         * Sets upper datepicker mode, supports: 'day', 'month', 'year'.
+         * @default 'year'
+         */
         this.maxMode = 'year';
-        /** If false week numbers will be hidden */
+        /**
+         * If false week numbers will be hidden in day picker.
+         * @default true
+         */
         this.showWeeks = true;
-        /** Format of day in month */
+        /**
+         * Format of day in month (date-fns format).
+         * @default 'dd'
+         */
         this.formatDay = 'dd';
-        /** Format of month in year */
+        /**
+         * Format of month in year (date-fns format).
+         * @default 'MMMM'
+         */
         this.formatMonth = 'MMMM';
-        /** Format of year in year range */
+        /**
+         * Format of year in year range (date-fns format).
+         * @default 'yyyy'
+         */
         this.formatYear = 'yyyy';
-        /** Format of day in week header */
+        /**
+         * Format of day in week header (date-fns format).
+         * @default 'EE'
+         */
         this.formatDayHeader = 'EE';
-        /** Format of title when selecting day */
+        /**
+         * Format of title when selecting day (date-fns format).
+         * @default 'MMMM yyyy'
+         */
         this.formatDayTitle = 'MMMM yyyy';
-        /** Format of title when selecting month */
+        /**
+         * Format of title when selecting month (date-fns format).
+         * @default 'yyyy'
+         */
         this.formatMonthTitle = 'yyyy';
-        /** Starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday) public */
+        /**
+         * Starting day of the week from 0-6 (0=Sunday, 6=Saturday).
+         * @default 0
+         */
         this.startingDay = 0;
-        /** Number of years displayed in year selection */
+        /**
+         * Number of years displayed in year selection.
+         * @default 20
+         */
         this.yearRange = 20;
-        /** If true only dates from the currently displayed month will be shown */
+        /**
+         * If true only dates from the currently displayed month will be shown.
+         * @default false
+         */
         this.onlyCurrentMonth = false;
-        /** If true shortcut`s event propagation will be disabled */
+        /**
+         * If true shortcut event propagation will be disabled.
+         * @default false
+         */
         this.shortcutPropagation = false;
-        /** Array of custom css classes to be applied to */
+        /**
+         * Array of custom css classes to be applied to specific dates.
+         * @default []
+         */
         this.customClass = [];
-        /** Array of disabled dates if mode is day, or years, etc. */
+        /**
+         * Array of disabled dates with mode specification.
+         * @default []
+         */
         this.dateDisabled = [];
-        /** If true, the date input field will be auto-focused when the component is first rendered. */
+        /**
+         * If true, the date input field will be auto-focused when the component is first rendered.
+         * @default false
+         */
         this.autoFocus = false;
-        /** If true, the date input field will be marked as invalid. */
+        /**
+         * If true, the date input field will be marked as invalid.
+         * @default false
+         */
         this.markInvalid = false;
-        /** Also emit on invalid date string */
+        /**
+         * Also emit dateStringChange on invalid date string.
+         * @default false
+         */
         this.alwaysEmitDateString = false;
-        /** Triggered whenever the datepicker is closed */
+        /** Emitted whenever the datepicker is closed. */
         this.closeDateInput = new EventEmitter();
-        /** Triggered whenever the date changes */
+        /** Emitted whenever the date string changes. */
         this.dateStringChange = new EventEmitter();
-        /** Triggered whenever the date changes. */
+        /** Emitted whenever the date changes. */
         this.dateChange = new EventEmitter();
         /** @internal */
         this.showDatepicker = false;
@@ -6138,6 +6992,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 }]
         }] });
 
+/**
+ * Individual item within a drag-and-drop list.
+ *
+ * Supports custom templates and optional action buttons.
+ *
+ * ### Projection slots
+ * - `customTemplate`: Custom template for the item content. If not provided, displays the item string with a drag handle.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-drag-and-drop-list-item
+ *   [item]="'Task 1'"
+ *   [draggable]="true"
+ *   [actions]="[{ id: 'delete', label: 'Delete', icon: 'delete', showOnlyOnHover: true }]"
+ *   (action)="handleAction($event)"
+ * ></lx-drag-and-drop-list-item>
+ * ```
+ */
 class DragAndDropListItemComponent {
     get draggingDisabled() {
         return !this.draggable;
@@ -6148,7 +7021,12 @@ class DragAndDropListItemComponent {
     constructor(element) {
         this.element = element;
         this.NAME = 'DragAndDropListItemComponent';
+        /**
+         * Whether the item can be dragged.
+         * @default true
+         */
         this.draggable = true;
+        /** Emitted when an action button is clicked. */
         this.action = new EventEmitter();
         this.customTemplateRef = null;
     }
@@ -6343,21 +7221,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Sortable list with drag-and-drop and keyboard navigation support.
+ *
+ * Items can be reordered via mouse drag or keyboard controls (Arrow keys, Space).
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-drag-and-drop-list
+ *   [label]="'My Tasks'"
+ *   (moveToIndex)="handleReorder($event)"
+ * >
+ *   @for (task of tasks; track $index) {
+ *     <lx-drag-and-drop-list-item
+ *       [item]="task.name"
+ *       [draggable]="true"
+ *     />
+ *   }
+ * </lx-drag-and-drop-list>
+ * ```
+ */
 class DragAndDropListComponent {
     constructor() {
         /** @internal */
         this.NAME = DRAG_AND_DROP_LIST_TRANSLATION_NAME;
         /**
-         * Override the global label font weight of 700
+         * Override the global label font weight.
+         * @default 700
          */
         this.labelFontWeight = 700;
+        /**
+         * Color theme of the list items.
+         * @default 'light'
+         */
         this.color = 'light';
+        /**
+         * Font size of the list items.
+         * @default 'normal'
+         */
         this.fontSize = 'normal';
         /**
-         * Use the moveToIndex Output in favor of moveItem,
-         * when moving is restricted to one item through this.draggableItem.
+         * Emitted when an item is moved, providing the new and previous index.
+         * Use this when you need index-based reordering.
          */
         this.moveToIndex = new EventEmitter();
+        /**
+         * Emitted when an item is moved, providing the item data and new index.
+         */
         this.moveItem = new EventEmitter();
         /**
          * TODO: extract state about keyboard sorting into KeyboardSortableListDirective
@@ -6475,8 +7386,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 }]
         }] });
 
+/**
+ * Displays form validation error messages.
+ *
+ * Shows either projected content or a programmatically set error message.
+ *
+ * ### Projection slots
+ * - Default slot: Static error message text. Hidden but captured for display.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-error-message>This field is required</lx-error-message>
+ * ```
+ */
 class ErrorMessageComponent {
     constructor() {
+        /** Signal for setting error message programmatically. */
         this.dynamicErrorMessage = signal('');
         this.wrapper = viewChild.required('contentWrapper');
         this.computedErrorMessage = computed(() => this.dynamicErrorMessage() || this.wrapper().nativeElement.innerText);
@@ -6489,6 +7415,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             args: [{ selector: 'lx-error-message', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span #contentWrapper hidden>\n  <ng-content />\n</span>\n\n@if (computedErrorMessage()) {\n  <div class=\"error\">\n    {{ computedErrorMessage() }}\n  </div>\n}\n", styles: [".error{color:#f96464;padding:4px}\n"] }]
         }] });
 
+/**
+ * Displays translated form validation errors for a specific form control.
+ *
+ * Automatically updates when form errors change.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-form-error
+ *   [form]="myFormGroup"
+ *   [controlName]="'email'"
+ *   [namespace]="'USER_FORM'"
+ * ></lx-form-error>
+ * ```
+ */
 class FormErrorComponent {
     constructor() {
         /** @internal */
@@ -6532,10 +7473,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Input
             }] } });
 
+/**
+ * A directive applied to native `<input>` elements to provide consistent styling and automatic error state handling.
+ * Integrates with Angular's `NgControl` to automatically apply error and disabled classes based on form control state.
+ * The directive listens to form control status changes and updates the visual state accordingly.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <input lx-input type="text" [formControl]="nameControl" />
+ * ```
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <input lx-input type="email" [error]="true" [disabled]="false" />
+ * ```
+ */
 class InputComponent {
     constructor(ngControl) {
         this.ngControl = ngControl;
+        /**
+         * Whether to display the input in an error state (applies 'error' CSS class).
+         * Automatically updated when used with `NgControl` based on validation state.
+         * @default false
+         */
         this.error = false;
+        /**
+         * Whether the input is disabled (applies 'disabled' CSS class).
+         * Automatically updated when used with `NgControl` based on control state.
+         * @default false
+         */
         this.disabled = false;
         this.destroyed$ = new Subject();
     }
@@ -6780,10 +7748,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 args: [KeyboardSelectDirective, { static: false, descendants: true }]
             }] } });
 
+/**
+ * Input that dynamically adjusts its width based on content length.
+ *
+ * Useful for inline editing or space-constrained layouts.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-responsive-input
+ *   [(ngModel)]="searchTerm"
+ *   [inputId]="'search'"
+ *   (focus)="onFocus()"
+ *   (blur)="onBlur()"
+ * ></lx-responsive-input>
+ * ```
+ */
 class ResponsiveInputComponent {
     constructor() {
+        /** Emitted when the input receives focus. */
         this.focus = new EventEmitter();
+        /** Emitted when the input receives focus via Tab key. */
         this.focusViaTab = new EventEmitter();
+        /** Emitted when the input loses focus. */
         this.blur = new EventEmitter();
         this.inputWidth$ = new BehaviorSubject('1px');
         this.inputControl = new UntypedFormControl();
@@ -6874,11 +7861,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 args: ['inputWidth', { static: true }]
             }] } });
 
+/**
+ * Displays selected items in a multi-select component.
+ *
+ * Items can be rendered as tokens or custom templates.
+ *
+ * ### Projection slots
+ * - `innerSelectionTemplate`: Custom template for rendering each selected item.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-multi-select-selection
+ *   [selection]="selectedItems"
+ *   [tokenize]="true"
+ *   (removeItem)="handleRemove($event)"
+ * >
+ *   <ng-template #innerSelectionTemplate let-item>
+ *     {{ item.name }}
+ *   </ng-template>
+ * </lx-multi-select-selection>
+ * ```
+ */
 class MultiSelectSelectionComponent extends KeyboardSelectDirective {
     constructor() {
         super(...arguments);
+        /**
+         * Array of selected items to display.
+         */
         this.selection = input();
+        /**
+         * Whether to render items as tokens (pills).
+         * @default true
+         */
         this.tokenize = input(true);
+        /** Emitted when an item is clicked for removal. */
         this.removeItem = new EventEmitter();
         this.selectionTemplate = null;
     }
@@ -6895,6 +7912,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 args: ['innerSelectionTemplate', { read: TemplateRef, static: true }]
             }] } });
 
+/**
+ * A dropdown component for selecting multiple values from a list of options.
+ * Implements `ControlValueAccessor` for seamless integration with Angular reactive forms.
+ * Supports keyboard navigation, custom templates, and various sizing options.
+ *
+ * ### Projection slots
+ * - `.pills`: Contains the pill list for selected items (`lx-pill-list`).
+ *   The pill list shows removable pills for each selected item.
+ *   Use `lx-pill-item` inside a `#pillTemplate` for custom pill rendering.
+ * - `.dropdownComponent`: Contains the dropdown (`lx-basic-dropdown`)
+ *
+ * Alternatively, use `lxSelectDropdown` directive on `<ng-template>` for the dropdown,
+ * and `#selectionTemplate` on `<ng-template>` for tokenized selection display.
+ *
+ * ### Example — with pill list and basic dropdown
+ * @example
+ * ```html
+ * <lx-multi-select
+ *   #multiSelect
+ *   [(selection)]="selectedItems"
+ *   (query)="searchTerm = $event">
+ *   <lx-pill-list
+ *     class="pills"
+ *     [keyboardSelectAction]="multiSelect.selectionKeyboardSelectAction$"
+ *     [pills]="selectedItems"
+ *     labelKey="name"
+ *     itemKey="id"
+ *     (remove)="multiSelect.removeItem($event)">
+ *   </lx-pill-list>
+ *   <lx-basic-dropdown
+ *     class="dropdownComponent"
+ *     [keyboardSelectAction]="multiSelect.optionsKeyboardSelectAction$"
+ *     [options]="options | lxFilterBySelection: selectedItems | lxFilterByTerm: { term: searchTerm }"
+ *     labelKey="name"
+ *     (onItemSelected)="multiSelect.addItemToSelection($event)">
+ *   </lx-basic-dropdown>
+ * </lx-multi-select>
+ * ```
+ *
+ * ### Example — with custom pill template
+ * @example
+ * ```html
+ * <lx-multi-select #multiSelect [(selection)]="selectedItems">
+ *   <lx-pill-list
+ *     class="pills"
+ *     [keyboardSelectAction]="multiSelect.selectionKeyboardSelectAction$"
+ *     [pills]="selectedItems"
+ *     itemKey="id"
+ *     (remove)="multiSelect.removeItem($event)">
+ *     <ng-template #pillTemplate let-pill>
+ *       <lx-pill-item [label]="pill.name" [item]="pill" [class.readOnly]="pill.readOnly" />
+ *     </ng-template>
+ *   </lx-pill-list>
+ *   <!-- dropdown omitted for brevity -->
+ * </lx-multi-select>
+ * ```
+ */
 class MultiSelectComponent extends BaseSelectDirective {
     /** @internal */
     static isStillPossibleMoveToLeft(eventSet) {
@@ -6950,11 +8024,31 @@ class MultiSelectComponent extends BaseSelectDirective {
     constructor(cd) {
         super();
         this.cd = cd;
+        /**
+         * Whether to visually mark the input as invalid.
+         */
         this.markInvalid = false;
+        /**
+         * Array of currently selected items.
+         */
         this.selection = [];
+        /**
+         * Visual size variant of the multi-select component.
+         * @default 'default'
+         */
         this.size = 'default';
+        /**
+         * Whether pressing Tab should close the dropdown.
+         * @default true
+         */
         this.closeDropdownOnTab = true;
+        /**
+         * Event emitted when the selection changes.
+         */
         this.selectionChange = new EventEmitter();
+        /**
+         * Event emitted when the input loses focus.
+         */
         this.blur = new EventEmitter();
         /** @internal */
         this.destroyed$ = new Subject();
@@ -7211,23 +8305,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 /**
- * `OptionGroupDropdownComponent` is a dropdown component that displays a list of options grouped by categories.
- * By itself it is only used to display a list of options, to be used in an input dropdown it can be used in
- * combination with the `SingleSelectComponent` or `MultiSelectComponent`.
+ * Dropdown component that displays options grouped by categories.
+ * Supports keyboard navigation, infinite scroll, custom templates, and creating new options.
+ * Used standalone or with SingleSelectComponent/MultiSelectComponent.
+ *
+ * ### Projection slots
+ * - `optionTemplate`: Template for custom option rendering (context: `$implicit`, `index`, `groupIndex`).
+ * - `noResultsOptionTemplateRef`: Template for custom "no results" message (context: `group`, `groupIndex`).
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-option-group-dropdown
+ *   [optionGroups]="groups"
+ *   [highlightTerm]="searchTerm"
+ *   (onItemSelected)="handleSelection($event)">
+ *   <ng-template #optionTemplate let-option>
+ *     <span>{{ option.label }}</span>
+ *   </ng-template>
+ * </lx-option-group-dropdown>
+ * ```
  */
 class OptionGroupDropdownComponent extends KeyboardSelectDirective {
     constructor() {
         super(...arguments);
         /** @internal */
         this.NAME = 'OptionGroupDropdownComponent';
+        /**
+         * Array of option groups to display in the dropdown.
+         * @default []
+         */
         this.optionGroups = [];
+        /**
+         * Whether to show a "create new option" entry at the top of the dropdown.
+         * @default false
+         */
         this.showCreateNewOption = false;
+        /**
+         * Property name to use as the label for each option.
+         * @default 'label'
+         */
         this.labelKey = 'label';
+        /**
+         * Whether the dropdown is in a loading state.
+         * @default false
+         */
         this.loading = false;
+        /**
+         * Whether to show "no results" message when a group has no options.
+         * @default false
+         */
         this.showNoResultsIfGroupIsEmpty = false;
+        /**
+         * Whether to use CDK overlay positioning for the dropdown.
+         * @default false
+         */
         this.overlayPositioning = false;
+        /** Event emitted when an option is selected. */
         this.onItemSelected = new EventEmitter();
+        /** Event emitted when the dropdown container is scrolled (for infinite scroll). */
         this.containerScrolled = new EventEmitter();
+        /** Event emitted when the user requests to create a new option. */
         this.createNewOption = new EventEmitter();
         /** @internal */
         this.isTopDropdown = false;
@@ -7317,6 +8455,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 args: ['selectOrigin', { static: false }]
             }] } });
 
+/**
+ * A dropdown component that displays a list of selectable options.
+ * The dropdown opens when triggered and provides keyboard navigation support for accessible option selection.
+ * It supports nested option groups and sub-dropdowns with full ARIA compliance.
+ *
+ * ### Projection slots
+ * - Default (trigger): The button or element that triggers the dropdown (must have `lxKeyboardActionSource` directive)
+ * - `lx-option`: Individual selectable options within the dropdown
+ * - `lx-option-group`: Optional groups of options with labels
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-options-dropdown [disabled]="disabled" [maxHeight]="maxHeight">
+ *   <button lxKeyboardActionSource lx-button [disabled]="disabled" endIcon="slim-arrow-down">
+ *     <span>{{ activeView?.label }}</span>
+ *   </button>
+ *   @for (viewGroup of viewGroups; track viewGroup.groupKey) {
+ *     <lx-option-group [label]="'viewGroups.' + viewGroup.groupKey | translate">
+ *       @for (view of viewGroup.views; track view.key) {
+ *         <lx-option
+ *           [selected]="view === activeView"
+ *           (select)="applyView.emit(view.key)"
+ *         >{{ view.label }}</lx-option>
+ *       }
+ *     </lx-option-group>
+ *   }
+ * </lx-options-dropdown>
+ * ```
+ */
 class OptionsDropdownComponent {
     /** @internal */
     get displayStyle() {
@@ -7381,18 +8549,61 @@ class OptionsDropdownComponent {
         this.renderer = renderer;
         /** @internal */
         this.NAME = 'OptionsDropdownComponent';
+        /**
+         * The alignment of the dropdown relative to the trigger element.
+         * @default 'right'
+         */
         this.align = 'right';
+        /**
+         * Whether the dropdown should close when the page is scrolled.
+         * @default false
+         */
         this.closeOnScroll = false;
+        /**
+         * Whether the dropdown is disabled and cannot be opened.
+         * @default false
+         */
         this.disabled = false;
+        /**
+         * The maximum height of the dropdown. Can be any valid CSS height value.
+         * @default 'none'
+         */
         this.maxHeight = 'none';
+        /**
+         * Whether the dropdown should close automatically when an option is selected.
+         * @default true
+         */
         this.closeOnSelect = true;
+        /**
+         * Whether to enable advanced overlay positioning using CDK overlay.
+         * Use when the dropdown is wider than its trigger or positioned near a viewport edge —
+         * enables CDK overlay positioning with automatic boundary detection to prevent off-screen clipping
+         * @default false
+         */
         this.overlayPositioning = false;
+        /**
+         * Additional CSS class to apply to the dropdown overlay.
+         * @default ''
+         */
         this.dropdownClass = '';
+        /**
+         * Whether the trigger container should use display flex instead of inline-block.
+         * @default false
+         */
         this.isFlexEnabledTriggerContainer = false;
         /** @internal */
         this.overlayScrollStrategy = this.closeOnScroll ? this.scrollStrategies.close() : this.scrollStrategies.reposition();
+        /**
+         * Event emitted when the dropdown is opened.
+         */
         this.opened = new EventEmitter();
+        /**
+         * Event emitted when the dropdown is closed for any reason.
+         */
         this.closed = new EventEmitter();
+        /**
+         * Event emitted when the dropdown is closed without an option being selected (e.g., by pressing Escape or clicking outside).
+         */
         this.closedWithoutSelection = new EventEmitter();
         this.highlightedOptionIndex$ = new BehaviorSubject(0);
         this._open = false;
@@ -7611,9 +8822,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 args: ['style.display']
             }] } });
 
+/**
+ * A nested sub-dropdown that appears next to a parent option.
+ * Opens on hover or keyboard navigation with debounced interactions.
+ * Automatically adjusts max height to fit viewport.
+ *
+ * ### Projection slots
+ * - Default slot: Nested dropdown options (`lx-option` components).
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-options-sub-dropdown [trigger]="parentOption" align="left">
+ *   <lx-option [value]="1">Sub-option 1</lx-option>
+ *   <lx-option [value]="2">Sub-option 2</lx-option>
+ * </lx-options-sub-dropdown>
+ * ```
+ */
 class OptionsSubDropdownComponent {
     constructor(changeDetection) {
         this.changeDetection = changeDetection;
+        /**
+         * Horizontal alignment of the sub-dropdown relative to the trigger option.
+         * @default 'right'
+         */
         this.align = 'right';
         this.hidden = true;
         this.mouseInside$ = new BehaviorSubject(false);
@@ -7696,6 +8928,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 args: ['mouseleave']
             }] } });
 
+/**
+ * Individual option within a picker dropdown.
+ *
+ * Must be a direct child of lx-picker.
+ *
+ * ### Projection slots
+ * - Default slot: Option content (text, icons, or custom elements). Hidden when `isClearOption` is true.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-picker>
+ *   <button lxPickerTrigger>Select</button>
+ *   <li lx-picker-option [optionId]="'opt1'" [value]="'option1'" [ariaLabel]="'Option 1'">
+ *     Option 1
+ *   </li>
+ *   <li lx-picker-option [optionId]="'opt2'" [value]="'option2'" [ariaLabel]="'Option 2'">
+ *     Option 2
+ *   </li>
+ * </lx-picker>
+ * ```
+ */
 class PickerOptionComponent {
     get ariaLabelValue() {
         if (this.isClearOption) {
@@ -7731,11 +8985,17 @@ class PickerOptionComponent {
         this.NAME = 'PickerOptionComponent';
         this.role = 'option';
         this.ariaSelected = false;
+        /**
+         * Whether this option is currently selected.
+         * @default false
+         */
         this.selected = false;
-        this.isClearOption = false;
         /**
-         * Emits the value.
+         * Whether this is a special "clear selection" option.
+         * @default false
          */
+        this.isClearOption = false;
+        /** Emitted when the option is selected. */
         this.select = new EventEmitter();
         this._highlighted = false;
     }
@@ -7852,22 +9112,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
 /**
- * How to use:
- * Provide the lx-picker with two kinds of ContentChildren:
- * 1. A lxPickerTrigger, preferably a button element, which we use to open the dropdown on click or enter.
- * 2. A list of `<li>` elements with an lx-picker-option attribute that own the option template as content children.
+ * A dropdown picker for selecting a value from a list of options.
+ * Supports keyboard navigation, `ControlValueAccessor` for reactive forms, and custom trigger elements.
  *
- * You can use this component as part of a FormGroup or wire it up yourself by listening on the (select) output of the options.
+ * ### Projection slots
+ * - `lxPickerTrigger`: A button element used to open the dropdown on click or Enter
+ * - `li[lx-picker-option]`: List items representing selectable options
  *
- * Example usage (non FormGroup style):
- * ```
- * <lx-picker listBoxAriaLabel="Awesome picker">
- *   <button lxPickerTrigger lx-button mode="outline" size="large" [square]="true" aria-label="Awesome picker" title="Awesome picker">
- *       <lx-icon [name]="selection.label" [color]="selection.value" fontAwsomeStyle="solid"></lx-icon>
- *    </button>
- *    <li *ngFor="let option of options" lx-picker-option [value]="option.value" [selected]="selection === option" (select)="selection = option" [optionId]="option.id">
- *       <lx-icon lx-picker-option [name]="option.label" [color]="option.value" fontAwsomeStyle="solid"></lx-icon>
- *    </li>
+ * ### Example
+ * @example
+ * ```html
+ * <lx-picker listBoxAriaLabel="Color picker">
+ *   <button lxPickerTrigger lx-button mode="outline" size="large" [square]="true">
+ *     {{ selection.label }}
+ *   </button>
+ *   @for (option of options; track option.id) {
+ *     <li lx-picker-option [value]="option.value" [selected]="selection === option"
+ *         (select)="selection = option" [optionId]="option.id">
+ *       {{ option.label }}
+ *     </li>
+ *   }
  * </lx-picker>
  * ```
  */
@@ -7901,6 +9165,10 @@ class PickerComponent {
     constructor(dir, cdRef) {
         this.dir = dir;
         this.cdRef = cdRef;
+        /**
+         * Direction the picker options dropdown opens.
+         * @default 'right'
+         */
         this.openDirection = 'right';
         /** @internal */
         this._isFormControl = false;
@@ -8058,10 +9326,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 args: ['document:keydown', ['$event']]
             }] } });
 
+/**
+ * An individual pill/tag item with a remove button.
+ * Typically used within `lx-pill-list` to display selected items.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-pill-item [item]="selectedItem"
+ *               [label]="'Option A'"
+ *               (remove)="onRemove($event)">
+ * </lx-pill-item>
+ * ```
+ */
 class PillItemComponent {
     constructor() {
         this.NAME = 'PillItemComponent';
+        /**
+         * When set to true, disables the pill and prevents removal.
+         */
         this.disabled = false;
+        /**
+         * Event emitted when the pill is removed.
+         */
         this.remove = new EventEmitter();
     }
     removePill(item, isMouse = false) {
@@ -8088,11 +9375,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Output
             }] } });
 
+/**
+ * A container for displaying a list of removable pill/tag items.
+ * Commonly used inside `lx-multi-select` to show selected items.
+ *
+ * When used inside `lx-multi-select`, apply `class="pills"` for proper projection
+ * and wire up `[keyboardSelectAction]` for keyboard navigation.
+ *
+ * ### Projection slots
+ * - `#pillTemplate`: Optional custom template for rendering individual pills.
+ *   Receives each pill as implicit context. Use when you need custom styling
+ *   or attributes on individual pills.
+ *
+ * ### Example — Basic usage inside multi-select
+ * @example
+ * ```html
+ * <lx-pill-list
+ *   class="pills"
+ *   [keyboardSelectAction]="multiSelect.selectionKeyboardSelectAction$"
+ *   [pills]="selectedItems"
+ *   labelKey="name"
+ *   itemKey="id"
+ *   (remove)="multiSelect.removeItem($event)">
+ * </lx-pill-list>
+ * ```
+ *
+ * ### Example — Custom pill template
+ * @example
+ * ```html
+ * <lx-pill-list
+ *   class="pills"
+ *   [keyboardSelectAction]="multiSelect.selectionKeyboardSelectAction$"
+ *   [pills]="selectedItems"
+ *   itemKey="id"
+ *   (remove)="multiSelect.removeItem($event)">
+ *   <ng-template #pillTemplate let-pill>
+ *     <lx-pill-item
+ *       [label]="pill.name"
+ *       [item]="pill"
+ *       [class.readOnly]="pill.readOnly">
+ *     </lx-pill-item>
+ *   </ng-template>
+ * </lx-pill-list>
+ * ```
+ */
 class PillListComponent extends KeyboardSelectDirective {
     constructor() {
         super(...arguments);
+        /**
+         * Array of items to display as pills.
+         */
         this.pills = [];
+        /**
+         * When set to true, disables removal of pills.
+         */
         this.disabled = false;
+        /**
+         * Event emitted when a pill is removed.
+         */
         this.remove = new EventEmitter();
     }
     ngAfterViewInit() {
@@ -8199,6 +9539,34 @@ function stopKeyboardEventPropagation(evt) {
     evt.stopImmediatePropagation();
 }
 
+/**
+ * A dropdown component for selecting a single value from a list of options.
+ * Implements `ControlValueAccessor` for seamless integration with Angular reactive forms.
+ *
+ * ### Projection slots
+ * - `.selectedOption`: Displays the currently selected value in the input field
+ * - `.dropdownComponent`: Contains the dropdown (typically `lx-basic-dropdown`)
+ *
+ * Alternatively, use `lxSelectDropdown` and `lxSelectedOption` directives on `<ng-template>`.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-single-select
+ *   #select
+ *   [formControl]="control"
+ *   (query)="searchTerm = $event">
+ *   <span class="selectedOption">{{ control.value?.name }}</span>
+ *   <lx-basic-dropdown
+ *     class="dropdownComponent"
+ *     [keyboardSelectAction]="select.optionsKeyboardSelectAction$"
+ *     [options]="options | lxFilterByTerm: { term: searchTerm }"
+ *     labelKey="name"
+ *     (onItemSelected)="select.selectOption($event)">
+ *   </lx-basic-dropdown>
+ * </lx-single-select>
+ * ```
+ */
 class SingleSelectComponent extends BaseSelectDirective {
     /** @internal */
     static calculateNewCursorPostionOnKeyboardNavigation(cursorPosition, keyCode) {
@@ -8239,16 +9607,25 @@ class SingleSelectComponent extends BaseSelectDirective {
     constructor(cd) {
         super();
         this.cd = cd;
+        /** Background color of the selection input field. */
         this.selectionBackground = 'white';
+        /** Size variant of the select component. */
         this.size = 'default';
         /** @deprecated To keep different inputs aligned, we should use the default padding */
         this.padding = 'default';
+        /** Whether the select field is required. */
         this.required = false;
+        /** Whether to close the dropdown when the Tab key is pressed. */
         this.closeDropdownOnTab = true;
+        /** Event emitted when the selection changes. */
         this.selectionChange = new EventEmitter();
+        /** Event emitted when the input loses focus. */
         this.blur = new EventEmitter();
+        /** Whether to show a clear button to remove the selection. */
         this.allowClear = true;
+        /** Tab index of the input element for keyboard navigation. */
         this.tabIndex = 0;
+        /** Whether to visually mark the input as invalid. */
         this.markInvalid = false;
         /** @internal */
         this.destroyed$ = new Subject();
@@ -8486,8 +9863,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 args: ['queryInput', { static: true }]
             }] } });
 
+/**
+ * Trigger button for the sorting dropdown.
+ * Displays the current sorting mode with a dropdown chevron icon.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-sorting-dropdown-trigger
+ *   label="Sort by"
+ *   currentSortingLabel="Name"
+ *   [disabled]="false">
+ * </lx-sorting-dropdown-trigger>
+ * ```
+ */
 class SortingDropdownTriggerComponent {
     constructor() {
+        /**
+         * Whether the trigger button is disabled.
+         * @default false
+         */
         this.disabled = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SortingDropdownTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -8510,10 +9905,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * score will be used for sorting.
  */
 const RELEVANCE_SORTING_KEY = 'lx-relevance';
+/**
+ * Dropdown for selecting sorting mode and direction.
+ * Displays available sorting options and allows toggling between ascending/descending order.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-sorting-dropdown
+ *   [currentSorting]="{ key: 'name', order: 'asc' }"
+ *   [sortingOptions]="sortOptions"
+ *   (apply)="handleSortChange($event)">
+ * </lx-sorting-dropdown>
+ * ```
+ */
 class SortingDropdownComponent {
     constructor() {
+        /**
+         * Available sorting options to choose from.
+         * @default []
+         */
         this.sortingOptions = [];
+        /**
+         * Whether to show ascending/descending direction options.
+         * @default true
+         */
         this.showDirectionOptions = true;
+        /** Event emitted when a new sorting configuration is applied. */
         this.apply = new EventEmitter();
         this.NAME = 'SortingDropdownComponent';
         this.sortingDirections = ['asc', 'desc'];
@@ -8564,17 +9982,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 /**
- * Switch component is a toggle switch that can be used to switch between two states.
+ * A toggle switch component for selecting between two states (on/off, true/false).
+ * Provides a visual toggle with optional label and supports disabled states.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-switch
+ *   [value]="isEnabled"
+ *   [label]="'Enable notifications'"
+ *   [labelInFront]="true"
+ *   (toggle)="handleToggle($event)">
+ * </lx-switch>
+ * ```
  */
 class SwitchComponent {
     constructor() {
-        /** Size of the switch */
+        /**
+         * Visual size variant of the switch.
+         * @default 'small'
+         */
         this.size = 'small';
-        /** Whether the switch is disabled */
+        /**
+         * Whether the switch is disabled and cannot be toggled.
+         * @default false
+         */
         this.disabled = false;
-        /** Whether the label is in front of the switch */
+        /**
+         * Whether the label should appear before (left of) the switch.
+         * @default true
+         */
         this.labelInFront = true;
-        /** Event that is emitted when the switch is toggled */
+        /**
+         * Event emitted when the switch is toggled, returning the new boolean value.
+         */
         this.toggle = new EventEmitter();
     }
     /** @internal */
@@ -9600,6 +11041,20 @@ const isRowSelectorActive = (params) => {
     return isSelectorActive({ ...params, selectorType: 'selector-row' });
 };
 
+/**
+ * Contextual bubble menu for table editing in the rich text editor.
+ *
+ * Provides three context-sensitive menus that appear when interacting with tables:
+ * - Row menu: appears when a table row selector is active
+ * - Column menu: appears when a table column selector is active
+ * - Table menu: appears when the entire table is selected
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-table-bubble-menu [editor]="editor" />
+ * ```
+ */
 class TableBubbleMenuComponent {
     constructor() {
         this.NAME = 'RichTextEditorTableActions';
@@ -10170,8 +11625,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 }]
         }] });
 
+/**
+ * Footer component for modals with content projection for action buttons.
+ *
+ * ### Projection slots
+ * - Default slot: Action buttons or footer content
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-modal-footer [border]="true">
+ *   <button lx-button (click)="cancel()">Cancel</button>
+ *   <button lx-button color="primary" (click)="save()">Save</button>
+ * </lx-modal-footer>
+ * ```
+ */
 class ModalFooterComponent {
     constructor() {
+        /**
+         * Whether to show a top border on the footer.
+         * @default false
+         */
         this.border = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -10184,9 +11658,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Header component for modals with optional title and content projection.
+ *
+ * ### Projection slots
+ * - Default slot: Custom header content displayed before the title
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-modal-header [title]="'Create New Item'" [bottomBorder]="true">
+ *   <button class="close-button">×</button>
+ * </lx-modal-header>
+ * ```
+ */
 class ModalHeaderComponent {
     constructor() {
+        /**
+         * The title text to display in the header.
+         * @default ''
+         */
         this.title = '';
+        /**
+         * Whether to show a bottom border on the header.
+         * @default true
+         */
         this.bottomBorder = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -10504,6 +12000,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 }]
         }] });
 
+/**
+ * Modal dialog for creating and editing hyperlinks in the rich text editor.
+ *
+ * Provides a form to input link text and URL with validation. Supports creating new links
+ * and editing existing ones. The modal state is managed by the link plugin.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-link-modal [editor]="editor" />
+ * ```
+ */
 class LinkModalComponent {
     constructor() {
         this.NAME = 'LinkModalComponent';
@@ -10575,9 +12083,32 @@ const ensureHttpProtocol = (url) => {
     return url.startsWith('http://') || url.startsWith('https://') ? url : `http://${url}`;
 };
 
+/**
+ * Toolbar component for the rich text editor providing formatting controls.
+ *
+ * Displays formatting buttons based on enabled Tiptap extensions, including text styles,
+ * bold/italic/underline, lists, alignment, links, code blocks, and table insertion.
+ * The toolbar visibility is controlled by the `isVisible` input and link modal state.
+ *
+ * ### Projection slots
+ * - `.diagram-btn`: Custom diagram button when `lxDiagram` extension is enabled
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-rich-text-editor-toolbar [editor]="editor" [isVisible]="true">
+ *   <button class="diagram-btn" lx-button>Insert Diagram</button>
+ * </lx-rich-text-editor-toolbar>
+ * ```
+ */
 class RichTextEditorToolbarComponent {
     constructor() {
         this.NAME = 'RichTextEditorToolbarComponent';
+        /**
+         * Controls the visibility of the toolbar.
+         *
+         * @default true
+         */
         this.isVisible = input(true);
         this.headingLevels = [];
         this.isLinkModalOpen = signal(false);
@@ -10785,16 +12316,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * Base component for custom Tiptap node views in Angular.
+ *
+ * Extend this component to create custom node views for the rich text editor.
+ * Provides all Tiptap NodeViewProps as required input signals.
+ */
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 class AngularNodeViewComponent {
     constructor() {
+        /** The Tiptap editor instance. */
         this.editor = input.required();
+        /** The ProseMirror node being rendered. */
         this.node = input.required();
+        /** Array of decorations for this node. */
         this.decorations = input.required();
+        /** Whether the node is currently selected. */
         this.selected = input.required();
+        /** The Tiptap extension that created this node. */
         this.extension = input.required();
+        /** Function to get the node's position in the document. */
         this.getPos = input.required();
+        /** Function to update the node's attributes. */
         this.updateAttributes = input.required();
+        /** Function to delete the node from the document. */
         this.deleteNode = input.required();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AngularNodeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -11236,25 +12781,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         }] });
 
 /**
- * The Popover component is based on the [ncstate-sat/popover](https://github.com/ncstate-sat/popover) library.
- *
- * ## Examples
-
- * This popover encapsulates this open source library: https://github.com/ncstate-sat/popover,
- * make sure to also check out the docs over there.
+ * A floating overlay component anchored to a trigger element.
+ * Based on the [ncstate-sat/popover](https://github.com/ncstate-sat/popover) library.
  *
- * As of today they are two trigger strategies to display a popover.
- * 1. Show on hovering the anchor and while hovering the popover body.
- * 2. Show on click and while hovering the popover body.
+ * The popover requires one of the trigger directives:
+ * - `lxPopoverHover`: Shows on hover (both anchor and popover body)
+ * - `lxPopoverClick`: Shows on click (stays open while hovering popover body)
  *
- * For use case 1. you would use the lxPopoverHover directive, which exports as hoverAnchor.
- *
- * ### Example:
+ * ### Example with hover trigger
+ * @example
  * ```html
  * <div lxPopoverHover
  *      hoverAnchor
  *      satPopoverAnchor
- *      #anchor="hoverAnchor"></div>
+ *      #anchor="hoverAnchor">Hover me</div>
  * <lx-popover [trigger]="anchor"
  *             horizontalAlign="after"
  *             verticalAlign="center">
@@ -11262,18 +12802,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * </lx-popover>
  * ```
  *
- * For use case 2. you would use the lxPopoverClick directive, which exports as clickAnchor.
- * Note: Since the only component where we use the lxPopoverClick directive (ReportComponent)
- * needs to fetch some data before opening it, we do not register a click EventListener in this directive,
- * but require the developer to implement that in the component, where the popover is used.
- *
- * ### Example:
+ * ### Example with click trigger
+ * @example
  * ```html
  * <div lxPopoverClick
  *      clickAnchor
  *      satPopoverAnchor
  *      #anchor="clickAnchor"
- *      (click)="popover.open()">Click Me!</div>
+ *      (click)="popover.open()">Click me</div>
  * <lx-popover [trigger]="anchor"
  *             horizontalAlign="after"
  *             verticalAlign="center"
@@ -11282,10 +12818,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * </lx-popover>
  * ```
  *
- * If this component is used with angularCompilerOptions strictTemplates=true,
- * satPopoverAnchor must be set to the reference to the SatPopover inside lx-popover.
- *
- * ### Example:
+ * ### With strict templates
+ * When using `strictTemplates=true`, bind `satPopoverAnchor` to the popover's internal reference:
+ * ### Example
+ * @example
  * ```html
  * <div [satPopoverAnchor]="popover.satPopover"></div>
  * <lx-popover #popover>
@@ -11700,6 +13236,27 @@ var LxTabGroupKeyCode;
     LxTabGroupKeyCode["End"] = "End";
 })(LxTabGroupKeyCode || (LxTabGroupKeyCode = {}));
 
+/**
+ * Individual tab component used inside `lx-tab-group`.
+ * Supports icons, counters, router links, and keyboard navigation.
+ * Content is projected and rendered by the parent tab group when the tab is active.
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-tab-group>
+ *   <lx-tab [label]="'General'" [icon]="'settings'" [disabled]="false">
+ *     <p>General content</p>
+ *   </lx-tab>
+ *   <lx-tab [label]="'Notifications'" [counter]="3">
+ *     <p>Notification content</p>
+ *   </lx-tab>
+ *   <lx-tab [label]="'Settings'" [tabLink]="['/settings']">
+ *     <p>Settings content</p>
+ *   </lx-tab>
+ * </lx-tab-group>
+ * ```
+ */
 class TabComponent {
     set isActive(value) {
         this._isActive = value;
@@ -11716,18 +13273,52 @@ class TabComponent {
         this.router = router;
         this.activatedRoute = activatedRoute;
         /**
-         * The `design` of the icon.
+         * The design of the icon.
          * @default NonInteractive
          */
         this.iconDesign = 'NonInteractive';
+        /**
+         * The label text displayed for the tab.
+         * @default ''
+         */
         this.label = '';
+        /**
+         * Options for the RouterLinkActive directive.
+         * @default { exact: true }
+         */
         this.routerLinkActiveOptions = { exact: true };
+        /**
+         * Size of the counter badge.
+         * @default 'default'
+         */
         this.counterBadgeSize = 'default';
+        /**
+         * Whether to remove margin from the tab.
+         * @default false
+         */
         this.noMargin = false;
+        /**
+         * Whether to remove left margin for the first tab.
+         * @default false
+         */
         this.noLeftMarginForFirstTab = false;
+        /**
+         * Background color of the tab.
+         * @default 'white'
+         */
         this.background = 'white';
+        /**
+         * Whether the tab is disabled and cannot be selected.
+         * @default false
+         */
         this.disabled = false;
+        /**
+         * Event emitted when the tab is selected.
+         */
         this.switch = new EventEmitter();
+        /**
+         * Event emitted when a keyboard key is pressed on the tab.
+         */
         this.keyDownAction = new EventEmitter();
         this._isActive = false;
         this.tabId = uniqueId$1('tab');
@@ -11812,6 +13403,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 args: [RouterLinkActive]
             }] } });
 
+/**
+ * Container for tab navigation that manages active tab state and keyboard interactions.
+ * Supports both static tabs and router-linked tabs with keyboard navigation (arrow keys, Home, End).
+ *
+ * ### Content Projection
+ * - Project `lx-tab` components as children
+ *
+ * ### Example
+ * @example
+ * ```html
+ * <lx-tab-group [selectedIndex]="0" (indexChange)="onTabChange($event)">
+ *   <lx-tab [label]="'General'" [icon]="'settings'">
+ *     <p>General content</p>
+ *   </lx-tab>
+ *   <lx-tab [label]="'Notifications'" [counter]="3">
+ *     <p>Notification content</p>
+ *   </lx-tab>
+ * </lx-tab-group>
+ * ```
+ */
 class TabGroupComponent {
     /** @internal */
     get tabIds() {
@@ -11826,11 +13437,19 @@ class TabGroupComponent {
     }
     constructor(cd) {
         this.cd = cd;
+        /**
+         * Whether the tabs should be centered.
+         * @default false
+         */
         this.isCentered = false;
         /**
-         * The tab whose content should be displayed.
+         * The index of the tab whose content should be displayed.
+         * @default 0
          */
         this.selectedIndex = 0;
+        /**
+         * Event emitted when the selected tab index changes.
+         */
         this.indexChange = new EventEmitter();
         /**
          * The tab that is currently focused via keyboard.