@progress/kendo-angular-layout 19.1.2-develop.3 → 19.1.2-develop.5

package/fesm2022/progress-kendo-angular-layout.mjs

@@ -29,20 +29,19 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1750152493,
-    version: '19.1.2-develop.3',
+    publishDate: 1750430829,
+    version: '19.1.2-develop.5',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
 /**
- * Represents the expand modes of the PanelBar.
- * By default, the expand mode is set to `multiple`.
+ * Defines the expand modes of the PanelBar.
  */
 var PanelBarExpandMode;
 (function (PanelBarExpandMode) {
     /**
      * Allows you to expand only one item at a time.
-     * When you expand an item, the item that was previously expanded is coll.
+     * When you expand an item, the item that was previously expanded is collapsed.
      */
     PanelBarExpandMode[PanelBarExpandMode["Single"] = 0] = "Single";
     /**
@@ -56,7 +55,7 @@ var PanelBarExpandMode;
      */
     PanelBarExpandMode[PanelBarExpandMode["Multiple"] = 2] = "Multiple";
     /**
-     * By default, the expand mode is set to `multiple`.
+     * The default expand mode set to `multiple`.
      */
     PanelBarExpandMode[PanelBarExpandMode["Default"] = 2] = "Default";
 })(PanelBarExpandMode || (PanelBarExpandMode = {}));
@@ -109,8 +108,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return []; } });
 
 /**
- * Represents the content template of the declaratively initialized PanelBar items.
+ * Defines the content template of the declaratively initialized PanelBar items.
+ * To define the content template, nest an `<ng-template>` tag
+ * with the `kendoPanelBarContent` directive inside the `<kendo-panelbar-item>` tag.
  * The content can be expanded or collapsed through the item.
+ *
+ * @example
+ * ```html
+ * <kendo-panelbar-item title="Item">
+ *   <div kendoPanelBarContent>
+ *     <p>Item content goes here</p>
+ *   </div>
+ * </kendo-panelbar-item>
+ * ```
  */
 class PanelBarContentDirective {
     templateRef;
@@ -129,29 +139,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /**
- * Represents the template directive of the PanelBar which helps to customize the item title
+ * Defines the template directive of the PanelBar which helps to customize the item title
  * ([more information and example]({% slug templates_panelbar %}#toc-customizing-the-appearance-of-the-title)).
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoPanelBarItemTitle` directive inside the `<kendo-panelbar-item>` tag.
  *
- * > The `kendoPanelBarItemTitle` directive overrides the PanelBarItem [title]({% slug api_layout_panelbaritemcomponent %}#toc-title) option.
+ * The `kendoPanelBarItemTitle` directive overrides the PanelBarItem [title]({% slug api_layout_panelbaritemcomponent %}#toc-title) option.
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *        <kendo-panelbar>
- *            <kendo-panelbar-item [expanded]="true">
- *                <ng-template kendoPanelBarItemTitle>
- *                    Item Title
- *                </ng-template>
- *            </kendo-panelbar-item>
- *        </kendo-panelbar>
- *     `
- * })
- *
- * class AppComponent {}
- *
+ * ```html
+ * <kendo-panelbar>
+ *   <kendo-panelbar-item [expanded]="true">
+ *     <ng-template kendoPanelBarItemTitle>
+ *       Item Title
+ *     </ng-template>
+ *   </kendo-panelbar-item>
+ * </kendo-panelbar>
  * ```
  */
 class PanelBarItemTitleDirective {
@@ -302,7 +305,14 @@ const closestItem = (target, targetAttr, scope) => closestInScope(target, hasIte
  */
 let nextId = 0;
 /**
- * Represents the items of the PanelBar.
+ * Represents the PanelBar item component for Angular. Defines the items of the PanelBar.
+ *
+ * @example
+ * ```html
+ * <kendo-panelbar-item title="Item 1" [expanded]="true">
+ *   <kendo-panelbar-item title="Sub Item 1"></kendo-panelbar-item>
+ * </kendo-panelbar-item>
+ * ```
  */
 class PanelBarItemComponent {
     parent;
@@ -319,17 +329,21 @@ class PanelBarItemComponent {
      */
     id = `default-${nextId++}`;
     /**
-     * Defines the icon that will be rendered next to the title ([see example]({% slug items_panelbar %}#toc-title-icons)).
+     * Defines the icon that renders next to the title ([see example]({% slug items_panelbar %}#toc-title-icons)).
+     *
+     * @default ''
      */
     icon = '';
     /**
-     * Defines  the icon that will be rendered next to the title by using a custom CSS class
+     * Defines the icon that renders next to the title by using a custom CSS class
      * ([see example]({% slug items_panelbar %}#toc-title-icons)).
+     *
+     * @default ''
      */
     iconClass = '';
     /**
-     * Defines an SVGIcon to be rendered.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Defines an SVG icon to render.
+     * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
      */
     set svgIcon(icon) {
         if (isDevMode() && icon && this.icon && this.iconClass) {
@@ -341,12 +355,16 @@ class PanelBarItemComponent {
         return this._svgIcon;
     }
     /**
-     * Defines the location of the image that will be displayed next to the title
+     * Defines the location of the image that displays next to the title
      * ([see example]({% slug items_panelbar %}#toc-title-images)).
+     *
+     * @default ''
      */
     imageUrl = '';
     /**
      * When set to `true`, disables a PanelBar item ([see example]({% slug items_panelbar %}#toc-disabled-state)).
+     *
+     * @default false
      */
     disabled = false;
     /**
@@ -365,13 +383,13 @@ class PanelBarItemComponent {
     }
     /**
      * Sets the selected state of a PanelBar item ([see example]({% slug items_panelbar %}#toc-selected-state)).
+     *
+     * @default false
      */
     selected = false;
     /**
      * Sets the content of the PanelBar item.
-     * By design, it is used when the
-     * [items]({% slug api_layout_panelbarcomponent %}#toc-items)
-     * property of the PanelBar is set.
+     * It is used when the [`items`]({% slug api_layout_panelbarcomponent %}#toc-items) property of the PanelBar is set.
      */
     content;
     /**
@@ -637,7 +655,7 @@ class PanelBarItemComponent {
                 >
                 </kendo-icon-wrapper>
             </span>
-            <div 
+            <div
                 #contentWrapper
                 *ngIf="keepContent || (!disabled && expanded && (hasChildItems || hasContent))"
                 [@toggle]="state"
@@ -791,7 +809,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 >
                 </kendo-icon-wrapper>
             </span>
-            <div 
+            <div
                 #contentWrapper
                 *ngIf="keepContent || (!disabled && expanded && (hasChildItems || hasContent))"
                 [@toggle]="state"
@@ -948,7 +966,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Represents the template directive of the PanelBar which helps to customize the item content.
+ * Defines the template directive of the PanelBar which helps to customize the item content.
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoPanelBarItemTemplate` directive inside the `<kendo-panelbar>` tag.
+ *
+ * @example
+ * ```html
+ * <kendo-panelbar>
+ *   <ng-template kendoPanelBarItemTemplate let-dataItem>
+ *     <span>{{ dataItem.title }}</span>
+ *   </ng-template>
+ * </kendo-panelbar>
+ * ```
  */
 class PanelBarItemTemplateDirective {
     templateRef;
@@ -975,18 +1004,15 @@ class PreventableEvent {
     prevented = false;
     /**
      * Prevents the default action for a specified event.
-     * In this way, the source component suppresses
-     * the built-in behavior that follows the event.
+     * The source component suppresses the built-in behavior that follows the event.
      */
     preventDefault() {
         this.prevented = true;
     }
     /**
-     * Returns `true` if the event was prevented
-     * by any of its subscribers.
+     * Returns `true` if the event was prevented by any of its subscribers.
      *
-     * @returns `true` if the default action was prevented.
-     * Otherwise, returns `false`.
+     * @returns `true` if the default action was prevented. Otherwise, returns `false`.
      */
     isDefaultPrevented() {
         return this.prevented;
@@ -1000,61 +1026,81 @@ class PreventableEvent {
 }
 
 /**
- * Arguments for the `collapse` event of the PanelBar.
+ * Defines the arguments for the `collapse` event of the PanelBar.
  */
 class PanelBarCollapseEvent extends PreventableEvent {
     /**
-     * The item that will be collapsed.
+     * Defines the item that will be collapsed.
      */
     item;
 }
 
 /**
- * Arguments for the `expand` event of the PanelBar.
+ * Defines the arguments for the `expand` event of the PanelBar.
  */
 class PanelBarExpandEvent extends PreventableEvent {
     /**
-     * The item that will be expanded.
+     * Defines the item that will be expanded.
      */
     item;
 }
 
 /**
- * Arguments for the `select` event of the PanelBar.
+ * Defines the arguments for the `select` event of the PanelBar.
  */
 class PanelBarSelectEvent extends PreventableEvent {
     /**
-     * The item that will be selected.
+     * Defines the item that will be selected.
      */
     item;
 }
 
 /**
- * Arguments for the `stateChange` event of the PanelBar.
+ * Defines the arguments for the `stateChange` event of the PanelBar.
  */
 class PanelBarStateChangeEvent {
     /**
-     * A collection of all modified items.
+     * Defines a collection of all modified items.
      */
     items;
 }
 
 /**
- * Arguments for the `itemClick` event of the PanelBar.
+ * Defines the arguments for the `itemClick` event of the PanelBar.
  */
 class PanelBarItemClickEvent {
     /**
-     * The clicked item.
+     * Defines the clicked item.
      */
     item;
     /**
-     * The DOM event that triggered the `itemClick` event.
+     * Defines the DOM event that triggered the `itemClick` event.
      */
     originalEvent;
 }
 
 /**
- * Represents the [Kendo UI PanelBar component for Angular]({% slug overview_panelbar %}).
+ * Represents the Kendo UI PanelBar component for Angular.
+ * Displays hierarchical data as an expandable and collapsible accordion-style interface ([see overview]({% slug overview_panelbar %})).
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-panelbar [items]="items" expandMode="single">
+ *     </kendo-panelbar>
+ *   `
+ * })
+ * class AppComponent {
+ *   items = [
+ *     { title: 'Item 1', expanded: true, content: 'Content 1' },
+ *     { title: 'Item 2', content: 'Content 2' }
+ *   ];
+ * }
+ * ```
+ * @remarks
+ * Supported children components are: {@link PanelBarItemComponent}.
  */
 // TODO: add styles as input prop
 class PanelBarComponent {
@@ -1062,31 +1108,33 @@ class PanelBarComponent {
     /**
      * Sets the expand mode of the PanelBar through the `PanelBarExpandMode` enum ([see example]({% slug expandmodes_panelbar %})).
      *
-     * The available modes are:
-     * - `"single"`&mdash;Expands only one item at a time. Expanding an item collapses the item that was previously expanded.
-     * - `"multiple"`&mdash;The default mode of the PanelBar.
-     * Expands more than one item at a time. Items can also be toggled.
-     * - `"full"`&mdash;Expands only one item at a time.
-     * The expanded area occupies the entire height of the PanelBar. Requires you to set the `height` property.
+     * @default 'multiple
      */
     expandMode = PanelBarExpandMode.Default;
     /**
      * Allows the PanelBar to modify the selected state of the items.
+     *
+     * @default true
      */
     selectable = true;
     /**
      * Sets the animate state of the PanelBar ([see example]({% slug animations_panelbar %})).
+     *
+     * @default true
      */
     animate = true;
     /**
      * Sets the height of the component when the `"full"` expand mode is used.
-     * This option is ignored in the `"multiple"` and `"single"` expand modes.
+     * This option is ignored when the `"multiple"` or `"single"` expand modes are used.
+     *
+     * @default '400px'
      */
     height = '400px';
     /**
      * When set to `true`, the PanelBar renders the content of all items and they are persisted in the DOM
      * ([see example]({% slug templates_panelbar %}#toc-collections)).
-     * By default, this option is set to `false`.
+     *
+     * @default false
      */
     get keepItemContent() {
         return this._keepItemContent;
@@ -1108,31 +1156,32 @@ class PanelBarComponent {
         return this._items;
     }
     /**
-     * Fires each time the user interacts with a PanelBar item
+     * Fires when the state of the PanelBar changes.
+     * This event is triggered when an item is selected, expanded, or collapsed.
      * ([see example](slug:routing_panelbar#using-router-service)).
      * The event data contains a collection of all items that are modified.
      */
     stateChange = new EventEmitter();
     /**
      * Fires when an item is about to be selected.
-     * ([see example]({% slug events_panelbar %}))
-     * This event is preventable. If you cancel it, the item will not be selected.
+     * This event is preventable. If you cancel it, the item will not be selected
+     * ([see example]({% slug events_panelbar %})).
      */
     select = new EventEmitter();
     /**
      * Fires when an item is about to be expanded.
-     * ([see example]({% slug events_panelbar %}))
-     * This event is preventable. If you cancel it, the item will remain collapsed.
+     * This event is preventable. If you cancel it, the item will remain collapsed
+     * ([see example]({% slug events_panelbar %})).
      */
     expand = new EventEmitter();
     /**
      * Fires when an item is about to be collapsed.
-     * ([see example]({% slug events_panelbar %}))
-     * This event is preventable. If you cancel it, the item will remain expanded.
+     * This event is preventable. If you cancel it, the item will remain expanded
+     * ([see example]({% slug events_panelbar %})).
      */
     collapse = new EventEmitter();
     /**
-     * Fires when the user clicks an item ([see example]({% slug events_panelbar %})).
+     * Fires when an item is clicked ([see example]({% slug events_panelbar %})).
      */
     itemClick = new EventEmitter();
     hostClasses = true;
@@ -1906,6 +1955,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 /**
  * Represents the pane component of the Splitter.
+ *
+ * @example
+ * ```html
+ * <kendo-splitter>
+ *   <kendo-splitter-pane size="30%" [collapsible]="true">
+ *     Left pane content
+ *   </kendo-splitter-pane>
+ *   <kendo-splitter-pane>
+ *     Right pane content
+ *   </kendo-splitter-pane>
+ * </kendo-splitter>
+ * ```
  */
 class SplitterPaneComponent {
     element;
@@ -1923,9 +1984,9 @@ class SplitterPaneComponent {
         return this._order;
     }
     /**
-     * Sets the initial size of the pane.
-     * Accepts units in pixel and percentage values.
-     * Has to be between the `min` and `max` properties.
+     * Defines the initial size of the pane.
+     * Accepts values in pixels and percentages.
+     * The value must be between the `min` and `max` properties.
      */
     set size(newSize) {
         this._size = newSize;
@@ -1937,9 +1998,9 @@ class SplitterPaneComponent {
         return this._size;
     }
     /**
-     * Sets the HTML attributes of the splitter bar.
-     * The property accepts string key-value based pairs.
-     * Attributes which are essential for certain functionalities cannot be changed.
+     * Defines the HTML attributes of the splitter bar.
+     * Accepts string key-value pairs.
+     * You cannot change attributes that are essential for certain functionalities.
      */
     set splitterBarAttributes(attributes) {
         this._splitterBarAttributes = attributes;
@@ -1952,34 +2013,42 @@ class SplitterPaneComponent {
         return this._splitterBarAttributes;
     }
     /**
-     * The CSS classes that will be rendered on the splitter bar.
-     * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
+     * Defines the CSS classes that are rendered on the splitter bar.
+     * Supports the same values as [`ngClass`](link:site.data.urls.angular['ngclassapi']).
      */
     splitterBarClass;
     /**
-     * Sets the minimum possible size of the pane.
-     * Accepts units in pixel and percentage values.
+     * Defines the minimum possible size of the pane.
+     * Accepts values in pixels and percentages.
      */
     min;
     /**
-     * Sets the maximum possible size of the pane.
-     * Accepts units in pixel and percentage values.
+     * Defines the maximum possible size of the pane.
+     * Accepts values in pixels and percentages.
      */
     max;
     /**
-     * Specifies if the user is allowed to resize the pane and provide space for other panes.
+     * Determines if you can resize the pane and provide space for other panes.
+     *
+     * @default true
      */
     resizable = true;
     /**
-     * Specifies if the user is allowed to hide the pane and provide space for other panes.
+     * Determines if you can hide the pane and provide space for other panes.
+     *
+     * @default false
      */
     collapsible = false;
     /**
-     * Specifies if overflowing content is scrollable or hidden.
+     * Determines if overflowing content is scrollable or hidden.
+     *
+     * @default true
      */
     scrollable = true;
     /**
-     * Specifies if the pane is initially collapsed.
+     * Determines if the pane is initially collapsed.
+     *
+     * @default false
      */
     collapsed = false;
     /**
@@ -2002,15 +2071,15 @@ class SplitterPaneComponent {
      */
     overlayContent = false;
     /**
-     * Fires each time the user resizes the Splitter pane.
+     * Fires when the Splitter pane size changes.
      * The event data contains the new pane size.
-     * Allows a two-way binding of the pane `size` property.
+     * Enables two-way binding of the pane `size` property.
      */
     sizeChange = new EventEmitter();
     /**
-     * Fires each time the `collapsed` property changes.
+     * Fires when the Splitter pane collapses or expands.
      * The event data contains the new property state.
-     * Allows a two-way binding of the `collapsed` pane property.
+     * Enables two-way binding of the `collapsed` pane property.
      */
     collapsedChange = new EventEmitter();
     get isHidden() {
@@ -2476,41 +2545,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-const SIZING_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/layout/splitter/panes/#toc-size';
+const SIZING_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/layout/splitter/panes/#specifying-the-dimensions';
 /**
  * Represents the [Kendo UI Splitter component for Angular]({% slug overview_splitter %}).
  *
- * ```ts-preview
- *
- *  @Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-splitter [style.height.px]="280">
- *
- *          <kendo-splitter-pane [collapsible]="true" size="30%">
- *            <h3>Inner splitter / left pane</h3>
- *            <p>Resizable and collapsible.</p>
- *          </kendo-splitter-pane>
- *
- *          <kendo-splitter-pane>
- *            <h3>Inner splitter / center pane</h3>
- *            <p>Resizable only.</p>
- *          </kendo-splitter-pane>
- *
- *          <kendo-splitter-pane [collapsible]="true" size="30%">
- *            <h3>Inner splitter / right pane</h3>
- *            <p>Resizable and collapsible.</p>
- *          </kendo-splitter-pane>
- *
- *        </kendo-splitter>
- *      `,
- *    styles: [ `
- *        h3 { font-size: 1.2em; }
- *        h3, p { margin: 10px; padding: 0; }
- *    ` ]
- *  })
- *  class AppComponent {}
+ * @example
+ * ```html
+ * <kendo-splitter [style.height.px]="280">
+ *   <kendo-splitter-pane [collapsible]="true" size="30%">
+ *     <h3>Left pane</h3>
+ *   </kendo-splitter-pane>
+ *   <kendo-splitter-pane>
+ *     <h3>Right pane</h3>
+ *   </kendo-splitter-pane>
+ * </kendo-splitter>
  * ```
+ * @remarks
+ * Supported children components are: {@link SplitterPaneComponent}.
  */
 class SplitterComponent {
     element;
@@ -2520,17 +2571,20 @@ class SplitterComponent {
     ngZone;
     enclosingPane;
     /**
-     * Specifies the orientation of the panes within the Splitter.
-     * Panes in a horizontal Splitter are placed horizontally.
-     * Panes in a vertical Splitter are placed vertically.
+     * Defines the orientation of the panes within the Splitter.
+     * Use `horizontal` to place panes horizontally or `vertical` to place them vertically.
+     *
+     * @default 'horizontal'
      */
     orientation = 'horizontal';
     /**
-     * Sets the width or height (depending on the orientation) of the Splitter splitbars in pixels.
+     * Defines the width or height of the Splitter splitbars in pixels.
+     * The dimension depends on the orientation of the Splitter.
      */
     splitbarWidth;
     /**
-     * The distance in pixels that the separator is moved with during keyboard navigation.
+     * Defines the distance in pixels that you move the separator during keyboard navigation.
+     *
      * @default 10
      */
     set resizeStep(value) {
@@ -2540,14 +2594,13 @@ class SplitterComponent {
         return this.splitterService.resizeStep;
     }
     /**
-     * The CSS classes that will be rendered on the splitter bars.
-     * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
+     * Defines the CSS classes that are rendered on the splitter bars.
+     * Supports the same values as [`ngClass`](link:site.data.urls.angular['ngclassapi']).
      */
     splitterBarClass;
     /**
-     * Fires after a Splitter pane is resized or collapsed.
-     * Useful for triggering layout calculations on components
-     * which are positioned inside the panes.
+     * Fires when the layout of the Splitter changes.
+     * Use this event to trigger layout calculations on components that are positioned inside the panes.
      */
     layoutChange;
     get hostClasses() {
@@ -2779,32 +2832,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 /**
  * Represents the content template of the Kendo UI TabStrip.
- * To define the template, nest a `<ng-template>` tag with the `kendoTabContent` inside the component tag.
+ * To define the template, nest an `<ng-template>` tag with the `kendoTabContent` directive inside the component tag.
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *         <kendo-tabstrip [ngStyle]="{'width': '400px'}" [animate]="true">
- *           <kendo-tabstrip-tab title="Paris" [selected]="true">
- *             <ng-template kendoTabContent>
- *               <h3>Content 1</h3>
- *             </ng-template>
- *           </kendo-tabstrip-tab>
- *
- *           <kendo-tabstrip-tab title="Sofia">
- *             <ng-template kendoTabContent>
- *               <h3>Content 2</h3>
- *             </ng-template>
- *           </kendo-tabstrip-tab>
- *         </kendo-tabstrip>
- *     `
- * })
- *
- * class AppComponent {}
- *
+ * ```html
+ * <kendo-tabstrip>
+ *   <kendo-tabstrip-tab title="First Tab">
+ *     <ng-template kendoTabContent>
+ *       <div class="tab-content">
+ *         <h2>Welcome</h2>
+ *         <p>This is the content of the first tab.</p>
+ *       </div>
+ *     </ng-template>
+ *   </kendo-tabstrip-tab>
+ * </kendo-tabstrip>
  * ```
  */
 class TabContentDirective {
@@ -2825,37 +2866,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 /**
  * Represents the title template of the Kendo UI TabStrip.
- * To define the template, nest a `<ng-template>` tag with the `kendoTabTitle` directive inside the component tag.
- *
- * > The `kendoTabTitle` directive overrides the TabStripTab [title]({% slug api_layout_tabstriptabcomponent %}#toc-title) option.
+ * To define the template, nest an `<ng-template>` tag with the `kendoTabTitle` directive inside the component tag.
+ * The `kendoTabTitle` directive overrides the TabStripTab [`title`]({% slug api_layout_tabstriptabcomponent %}#toc-title) option.
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *         <kendo-tabstrip>
- *           <kendo-tabstrip-tab [selected]="true">
- *             <ng-template kendoTabTitle>
- *               <h4>Custom Title</h4>
- *             </ng-template>
- *             <ng-template kendoTabContent>
- *               <h3>Content 1</h3>
- *             </ng-template>
- *           </kendo-tabstrip-tab>
- *
- *           <kendo-tabstrip-tab title="Sofia">
- *             <ng-template kendoTabContent>
- *               <h3>Content 2</h3>
- *             </ng-template>
- *           </kendo-tabstrip-tab>
- *         </kendo-tabstrip>
- *     `
- * })
- *
- * class AppComponent {}
- *
+ * ```html
+ * <kendo-tabstrip>
+ *   <kendo-tabstrip-tab>
+ *     <ng-template kendoTabTitle>
+ *       <span class="custom-title">My Custom Title</span>
+ *     </ng-template>
+ *   </kendo-tabstrip-tab>
+ * </kendo-tabstrip>
  * ```
  */
 class TabTitleDirective {
@@ -2894,52 +2916,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /**
- * Represents the tab component of the TabStrip.
+ * Represents the Kendo UI TabStrip tab component.
+ * Use this component to define individual tabs within a TabStrip.
+ *
+ * @example
+ * ```html
+ * <kendo-tabstrip>
+ *   <kendo-tabstrip-tab title="Home" [selected]="true">
+ *     <ng-template kendoTabContent>
+ *       Home content here
+ *     </ng-template>
+ *   </kendo-tabstrip-tab>
+ * </kendo-tabstrip>
+ * ```
  */
 class TabStripTabComponent {
     /**
-     * Sets the tab title ([see example](slug:tabs_tabstrip#toc-tab-titles)).
+     * Sets the title text for the tab ([see example](slug:tabs_tabstrip#toc-tab-titles)).
      */
     title;
     /**
-     * Used to disable a tab ([see example]({% slug tabs_tabstrip %}#toc-disabled-tabs)).
+     * Disables the tab and prevents user interaction ([see example]({% slug tabs_tabstrip %}#toc-disabled-tabs)).
      *
-     * Defaults to `false`.
+     * @default false
      */
     disabled = false;
     /**
-     * The CSS classes that will be rendered on the `tab` element.
-     * Supports the type of values that are supported by [ngClass](link:site.data.urls.angular['ngclassapi']).
+     * Specifies the CSS classes to apply to the `tab` element.
+     * Accepts the same values as [`ngClass`](link:site.data.urls.angular['ngclassapi']).
      */
     cssClass;
     /**
-     * The CSS styles that will be rendered on the `tab` element.
-     * Supports the type of values that are supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
+     * Specifies the CSS styles to apply to the `tab` element.
+     * Accepts the same values as [`ngStyle`](link:site.data.urls.angular['ngstyleapi']).
      */
     cssStyle;
     /**
-     * Determines which tab will be selected upon the initial loading of the TabStrip
+     * Selects the tab when the TabStrip loads
      * ([see example](slug:tabs_tabstrip#toc-selected-tab)).
      */
     selected;
     /**
-     * When set to `true`, a close button will be rendered inside the tab.
-     * This option overrides the value of the TabStrip `closable` option.
+     * Shows a close button inside the tab when set to `true`.
+     * This setting overrides the TabStrip `closable` option.
      */
     closable;
     /**
-     * Defines the name for an existing font icon in the Kendo UI theme for the close icon.
-     * This option overrides the value of the TabStrip `closeIcon` option.
+     * Sets the name of an existing font icon in the Kendo UI theme for the close button.
+     * This setting overrides the TabStrip `closeIcon` option.
      */
     closeIcon;
     /**
-     * Allows the usage of custom icons by defining a custom CSS class, or multiple classes separated by spaces.
-     * This option overrides the value of the TabStrip `closeIcon` option.
+     * Sets custom CSS classes for the close button icon.
+     * You can define a single class or multiple classes separated by spaces.
+     * This setting overrides the TabStrip `closeIcon` option.
      */
     closeIconClass;
     /**
-     * Defines an SVGIcon to be rendered for the close icon.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Sets an SVG icon for the close button.
+     * You can use an [existing Kendo SVG icon](slug:svgicon_list) or provide a custom one.
      */
     closeSVGIcon;
     get tabContent() {
@@ -3004,7 +3039,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 /**
  * Arguments for the `tabClose` event of the TabStrip.
- * The `tabClose` event fires when the close button of the tab is clicked.
+ * The `tabClose` event fires when a tab is closed (clicked on the close button).
  *
  */
 class TabCloseEvent {
@@ -3014,6 +3049,7 @@ class TabCloseEvent {
      * Constructs the event arguments for the `tabClose` event.
      * @param index - The index of the closed tab.
      * @param tab - The closed tab instance
+     * @hidden
      */
     constructor(index, tab) {
         this.index = index;
@@ -3023,7 +3059,7 @@ class TabCloseEvent {
 
 /**
  * Arguments for the `select` event of the TabStrip.
- * The `select` event fires when a tab is selected (clicked).
+ * The `select` event fires when tab is selected (clicked).
  */
 class SelectEvent extends PreventableEvent$1 {
     index;
@@ -3032,6 +3068,8 @@ class SelectEvent extends PreventableEvent$1 {
      * Constructs the event arguments for the `select` event.
      * @param index - The index of the selected tab.
      * @param title - The title of the selected tab.
+     *
+     * @hidden
      */
     constructor(index, title) {
         super();
@@ -3511,12 +3549,12 @@ const normalizeScrollableSettings = (settings) => normalizeSettings(settings ===
 
 /**
  * Arguments for the `tabScroll` event of the TabStrip.
- * The `tabScroll` event fires when the tabs are being scrolled.
+ * The `tabScroll` event fires when you scroll the tabs.
  *
  */
 class TabScrollEvent extends PreventableEvent$1 {
     /**
-     * The DOM event that triggered the tab scroll.
+     * The original DOM event that caused the tab scroll.
      */
     originalEvent;
     /**
@@ -3865,15 +3903,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class TabStripMessages extends ComponentMessages {
     /**
-     * The title for the **Close** button in the TabStrip tab.
+     * Sets the title for the **Close** button in the TabStrip tab.
      */
     closeTitle;
     /**
-     * The title for the **Previous Tab** button when the Tabstrip is scrollable.
+     * Sets the title for the **Previous Tab** button when the TabStrip is scrollable.
      */
     previousTabButton;
     /**
-     * The title for the **Next Tab** button when the Tabstrip is scrollable.
+     * Sets the title for the **Next Tab** button when the TabStrip is scrollable.
      */
     nextTabButton;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
@@ -3926,6 +3964,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 /**
  * Represents the [Kendo UI TabStrip component for Angular]({% slug overview_tabstrip %}).
+ *
+ * @example
+ * ```html
+ * <kendo-tabstrip>
+ *   <kendo-tabstrip-tab [title]="'First Tab'">
+ *     <ng-template kendoTabContent>
+ *       <p>Content of the first tab.</p>
+ *     </ng-template>
+ *   </kendo-tabstrip-tab>
+ *   <kendo-tabstrip-tab [title]="'Second Tab'">
+ *     <ng-template kendoTabContent>
+ *       <p>Content of the second tab.</p>
+ *     </ng-template>
+ *   </kendo-tabstrip-tab>
+ * </kendo-tabstrip>
+ * ```
+ * @remarks
+ * Supported children components are: {@link TabStripCustomMessagesComponent}, {@link TabStripTabComponent}.
  */
 class TabStripComponent {
     localization;
@@ -3936,6 +3992,7 @@ class TabStripComponent {
     ngZone;
     /**
      * Sets the height of the TabStrip.
+     * Accepts a CSS size value, such as `100px`, `50%`, or `auto`.
      */
     set height(value) {
         this._height = value;
@@ -3945,7 +4002,7 @@ class TabStripComponent {
         return this._height;
     }
     /**
-     * Enables the tab animation.
+     * Sets whether the TabStrip should animate when switching tabs.
      *
      * @default true
      */
@@ -3953,34 +4010,30 @@ class TabStripComponent {
     /**
      * Sets the alignment of the tabs.
      *
-     * @default: 'start'
+     * @default 'start'
      */
     tabAlignment = 'start';
     /**
-     * Sets the position of the tabs. Defaults to `top`.
+     * Sets the position of the tabs.
      *
      * @default 'top'
      */
     tabPosition = 'top';
     /**
-     * When set to `true`, the component renders all tabs and they are persisted in the DOM.
-     * By default, `keepTabContent` is `false`.
+     * When set to `true`, the tabs are persisted in the DOM and their content is not destroyed when they are not selected ([see example](slug:rendering_tabstrip)).
      *
      * @default false
      */
     keepTabContent = false;
     /**
-     * When set to `true`, a close button will be rendered inside each tab.
-     * By default, `closable` is `false`.
+     * When set to `true`, renders a close button inside each tab.
      *
      * @default false
      */
     closable = false;
     /**
-     * Enables the scrolling of the tab list. When set to `true` and the total size of all tabs
-     * is greater than the size of the TabStrip container, scroll buttons will be rendered on each end of the tab list.
-     *
-     * By default, `scrollable` is `false`.
+     * Enables scrolling of the tab list.
+     * When set to `true` and the total size of all tabs exceeds the size of the TabStrip container, scroll buttons appear on each end of the tab list.
      *
      * @default false
      */
@@ -3997,14 +4050,9 @@ class TabStripComponent {
         return this._scrollableSettings;
     }
     /**
-     * Specifies the size of the TabStrip.
-     * ([see example](slug:api_layout_tabstripcomponent#toc-size).
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (Default)
-     * * `large`
-     * * `none`
+     * Sets the size of the TabStrip.
+     * [See example](slug:api_layout_tabstripcomponent#toc-size).
+     * @default 'medium'
      */
     set size(value) {
         switch (value) {
@@ -4035,16 +4083,17 @@ class TabStripComponent {
         return this._size;
     }
     /**
-     * Defines the name for an existing font icon in the Kendo UI theme for the close icon.
+     * Defines the name of an existing font icon in the Kendo UI theme for the close icon.
+     * @default 'x'
      */
     closeIcon = 'x';
     /**
-     * Allows defining a custom CSS class, or multiple classes separated by spaces, which will be applied to the close button.
+     * Defines a custom CSS class, or multiple classes separated by spaces, applied to the close button.
      */
     closeIconClass;
     /**
-     * Defines an SVGIcon to be rendered for the close icon.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Defines an SVGIcon to render for the close icon.
+     * The input accepts either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
      */
     set closeSVGIcon(icon) {
         if (isDevMode() && icon && this.closeIcon && this.closeIcon !== 'x') {
@@ -4056,23 +4105,23 @@ class TabStripComponent {
         return this._closeSVGIcon;
     }
     /**
-     * Determines whether the content associated with each tab will be rendered.
+     * If set to `false`, the content area is hidden, but the tab headers are still visible.
      *
      * @default true
      */
     showContentArea = true;
     /**
-     * Fires each time the user selects a tab ([see example](slug:events_tabstrip)).
+     * Fires each time a tab is selected.
      * The event data contains the index of the selected tab and its title.
      */
     tabSelect = new EventEmitter();
     /**
-     * Fires each time the user closes a tab.
+     * Fires each time a tab is closed.
      * The event data contains the index of the closed tab and its instance.
      */
     tabClose = new EventEmitter();
     /**
-     * Fires each time the user scrolls the TabStrip list.
+     * Fires when the tab list is scrolled.
      * The event is preventable.
      */
     tabScroll = new EventEmitter();
@@ -4239,8 +4288,9 @@ class TabStripComponent {
         return isTablistHorizontal(this.tabPosition) ? 'k-hstack' : 'k-vstack';
     }
     /**
-     * Allows the user to select a tab programmatically.
-     * @param {number} index - The index of the tab that will be selected.
+     * Allows you to programmatically select a tab by its index.
+     * If the tab is disabled, it will not be selected.
+     * @param {number} index The index of the tab that will be selected.
      */
     selectTab(index) {
         const tab = getTabByIndex(this.tabs, index);
@@ -4459,10 +4509,10 @@ class TabStripComponent {
                 <ul role="tablist" #tablist
                     class="k-reset k-tabstrip-items"
                     [ngClass]="{
-                        'k-tabstrip-items-start': tabAlignment === 'start', 
-                        'k-tabstrip-items-center': tabAlignment === 'center', 
-                        'k-tabstrip-items-end': tabAlignment === 'end', 
-                        'k-tabstrip-items-stretched': tabAlignment === 'stretched', 
+                        'k-tabstrip-items-start': tabAlignment === 'start',
+                        'k-tabstrip-items-center': tabAlignment === 'center',
+                        'k-tabstrip-items-end': tabAlignment === 'end',
+                        'k-tabstrip-items-stretched': tabAlignment === 'stretched',
                         'k-tabstrip-items-justify': tabAlignment === 'justify',
                         'k-tabstrip-items-scroll': mouseScrollEnabled
                     }"
@@ -4642,10 +4692,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 <ul role="tablist" #tablist
                     class="k-reset k-tabstrip-items"
                     [ngClass]="{
-                        'k-tabstrip-items-start': tabAlignment === 'start', 
-                        'k-tabstrip-items-center': tabAlignment === 'center', 
-                        'k-tabstrip-items-end': tabAlignment === 'end', 
-                        'k-tabstrip-items-stretched': tabAlignment === 'stretched', 
+                        'k-tabstrip-items-start': tabAlignment === 'start',
+                        'k-tabstrip-items-center': tabAlignment === 'center',
+                        'k-tabstrip-items-end': tabAlignment === 'end',
+                        'k-tabstrip-items-stretched': tabAlignment === 'stretched',
                         'k-tabstrip-items-justify': tabAlignment === 'justify',
                         'k-tabstrip-items-scroll': mouseScrollEnabled
                     }"
@@ -4807,8 +4857,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Custom component messages override default component messages
- * ([see example]({% slug rtl_layout %})).
+ * Represents the custom messages component for the TabStrip.
+ * It allows you to override the default messages used in the TabStrip component ([see example]({% slug rtl_layout %})).
+ *
+ * ```html
+ * <kendo-tabstrip>
+ *   <kendo-tabstrip-messages
+ *     closeTitle="Close this tab"
+ *     previousTabButton="Go to previous tab"
+ *   </kendo-tabstrip-messages>
+ * </kendo-tabstrip>
+ * ```
  */
 class TabStripCustomMessagesComponent extends TabStripMessages {
     service;
@@ -4843,11 +4902,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
 /**
- * Represents a template that defines the content of the Drawer.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoDrawerTemplate` directive inside the `<kendo-drawer>` tag.
- * Using this template directive will override all other templates,
- * for example, `kendoDrawerHeaderTemplate` and `kendoDrawerItemTemplate`.
+ * Defines a template that specifies the content of the Drawer.
+ * To define the template, nest an `<ng-template>` tag with the `kendoDrawerTemplate` directive inside the `<kendo-drawer>` tag.
+ * Using this template directive overrides all other templates, for example, `kendoDrawerHeaderTemplate` and `kendoDrawerItemTemplate`.
+ *
+ * @example
+ * ```html
+ * <kendo-drawer>
+ *   <ng-template kendoDrawerTemplate>
+ *     <div class="custom-drawer-content">
+ *       <h3>Custom Drawer</h3>
+ *       <ul>
+ *         <li>Custom Item 1</li>
+ *         <li>Custom Item 2</li>
+ *       </ul>
+ *     </div>
+ *   </ng-template>
+ * </kendo-drawer>
+ * ```
  */
 class DrawerTemplateDirective {
     templateRef;
@@ -4868,9 +4940,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }]; } });
 
 /**
- * Represents a template that defines the item content of the Drawer.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoDrawerItemTemplate` directive inside the `<kendo-drawer>` tag.
+ * Defines a template that specifies the item content of the Drawer.
+ * To define the template, nest an `<ng-template>` tag with the `kendoDrawerItemTemplate` directive inside the `<kendo-drawer>` tag.
+ *
+ * The `let-item` context variable provides access to the item data.
+ *
+ * For the Hierarchical Drawer, the `kendoDrawerItemTemplate` directive provides additional context fields:
+ *
+ * * `level`&mdash;A number that indicates the nesting level of the current item. Use the `let-level="level"` syntax to access the nesting level.
+ * * `hasChildren`&mdash;A boolean that indicates whether the current item has nested items. Use the `let-hasChildren="hasChildren"` syntax to access the value.
+ * * `isItemExpanded`&mdash;A boolean that holds information about the expanded state of the current item, which indicates whether its children are visible or not. Use the `let-isItemExpanded="isItemExpanded"` syntax to access the value of the expanded state.
+ *
+ * @example
+ * ```html
+ * <kendo-drawer>
+ *   <ng-template kendoDrawerItemTemplate let-item>
+ *     <span class="custom-item">{{ item.text }}</span>
+ *   </ng-template>
+ * </kendo-drawer>
+ * ```
  */
 class DrawerItemTemplateDirective {
     templateRef;
@@ -4891,9 +4979,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }]; } });
 
 /**
- * Represents a template that defines the header content of the Drawer.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoDrawerHeaderTemplate` directive inside the `<kendo-drawer>` tag.
+ * Defines a template that specifies the header content of the Drawer.
+ * To define the template, nest an `<ng-template>` tag with the `kendoDrawerHeaderTemplate` directive inside the `<kendo-drawer>` tag.
+ *
+ * @example
+ * ```html
+ * <kendo-drawer>
+ *   <ng-template kendoDrawerHeaderTemplate>
+ *     <h3>Navigation Menu</h3>
+ *   </ng-template>
+ * </kendo-drawer>
+ * ```
  */
 class DrawerHeaderTemplateDirective {
     templateRef;
@@ -4914,9 +5010,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }]; } });
 
 /**
- * Represents a template that defines the footer content of the Drawer.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoDrawerFooterTemplate` directive inside the `<kendo-drawer>` tag.
+ * Defines a template that specifies the footer content of the Drawer.
+ * To define the template, nest an `<ng-template>` tag with the `kendoDrawerFooterTemplate` directive inside the `<kendo-drawer>` tag.
+ *
+ * @example
+ * ```html
+ * <kendo-drawer>
+ *   <ng-template kendoDrawerFooterTemplate>
+ *     <p>© 2023 Company Name</p>
+ *   </ng-template>
+ * </kendo-drawer>
+ * ```
  */
 class DrawerFooterTemplateDirective {
     templateRef;
@@ -5559,32 +5663,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 const DEFAULT_ANIMATION = { type: 'slide', duration: 200 };
 /**
  * Represents the [Kendo UI Drawer component for Angular]({% slug overview_drawer %}).
+ * Provides a dismissible or permanently visible panel for navigation in responsive web applications.
  *
  * @example
- * ```ts-preview
- * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-drawer-container>
- *             <kendo-drawer #drawer
- *                  [items]="items"
- *                  mode="overlay"
- *                  [(expanded)]="expanded">
- *              </kendo-drawer>
- *              <kendo-drawer-content>
- *                  <button class="k-button" (click)="drawer.toggle()">Open the Drawer</button>
- *              </kendo-drawer-content>
- *        </kendo-drawer-container>
- *    `
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-drawer-container>
+ *       <kendo-drawer #drawer
+ *         [items]="items"
+ *         mode="overlay"
+ *         [(expanded)]="expanded">
+ *       </kendo-drawer>
+ *       <kendo-drawer-content>
+ *         <button class="k-button" (click)="drawer.toggle()">Open the Drawer</button>
+ *       </kendo-drawer-content>
+ *     </kendo-drawer-container>
+ *   `
  * })
  * class AppComponent {
- *    public expanded = false;
- *
- *    public items: any[] = [
- *      { text: 'Inbox', icon: 'k-i-inbox' },
- *      { text: 'Notifications', icon: 'k-i-bell' },
- *      { text: 'Date', icon: 'k-i-calendar' }
- *    ];
+ *   public expanded = false;
+ *   public items = [
+ *     { text: 'Inbox', icon: 'inbox' },
+ *     { text: 'Notifications', icon: 'bell' }
+ *   ];
  * }
  * ```
  */
@@ -5619,52 +5722,58 @@ class DrawerComponent {
         return this.drawerWidth;
     }
     /**
-     * Specifies the mode in which the Drawer will be displayed.
+     * Specifies the mode in which the Drawer displays.
      *
-     * The possible values are:
-     * * (Default) `overlay`
-     * * `push`
+     * @default 'overlay'
      */
     mode = 'overlay';
     /**
      * Specifies the position of the Drawer
      * ([see example]({% slug positioning_drawer %})).
      *
-     * The possible values are:
-     * * (Default) `start`
-     * * `end`
+     * @default 'start'
      */
     position = 'start';
     /**
-     * Enables the mini (compact) view of the Drawer which is displayed when the component is collapsed
+     * Enables the mini (compact) view of the Drawer which displays when the component is collapsed
      * ([see example]({% slug expandmodespositions_drawer %}#toc-mini-view)).
+     *
+     * @default false
      */
     mini = false;
     /**
      * Specifies the state of the Drawer.
+     *
+     * @default false
      */
     expanded = false;
     /**
      * Defines the width of the Drawer when it is expanded.
-     * Defaults to `240`.
+     *
+     * @default 240
      */
     width = 240;
     /**
-     * Defines the width of the Drawer when the mini view is enabled
-     * and the component is collapsed. Defaults to `60`.
+     * Defines the width of the Drawer when the mini view is enabled and the component is collapsed.
+     *
+     * @default 50
      */
     miniWidth = 50;
     /**
-     * Specifies if the Drawer will be automatically collapsed when an item
-     * or the overlay is clicked. Defaults to `true`.
+     * Specifies if the Drawer automatically collapses when an item or the overlay is clicked.
+     *
+     * @default true
      */
     autoCollapse = true;
     /**
-     * The collection of items that will be rendered in the Drawer.
+     * Defines the collection of items that render in the Drawer.
+     *
+     * @default []
      */
     items = [];
     /**
      * Defines a callback function which determines if an item should be expanded.
+     * This is useful for hierarchical data structures where the expansion state of an item depends on its parent or other items.
      */
     set isItemExpanded(fn) {
         if (isDevMode && isPresent(fn) && typeof fn !== 'function') {
@@ -5680,16 +5789,10 @@ class DrawerComponent {
      */
     direction;
     /**
-     * Specifies the animation settings of the Drawer.
+     * Specifies the animation settings of the Drawer
      * ([see example]({% slug interaction_drawer %}#toc-toggling-between-states)).
      *
-     * The possible values are:
-     * * Boolean
-     *    * (Default) `true`
-     *    * `false`
-     * * `DrawerAnimation`
-     *    * (Default) `type?: 'slide'`
-     *    * `duration`&mdash;Accepts a number in milliseconds. Defaults to `300ms`.
+     * @default { type: 'slide', duration: 200 }
      */
     animation = DEFAULT_ANIMATION;
     /**
@@ -5701,11 +5804,12 @@ class DrawerComponent {
      */
     collapse = new EventEmitter();
     /**
-     * Fires when a Drawer item is selected. This event is preventable.
+     * Fires when an item in the Drawer is selected.
+     * This event is preventable.
      */
     select = new EventEmitter();
     /**
-     * Fires when the `expanded` property of the component was updated.
+     * Fires when the `expanded` property of the component is updated.
      * Used to provide a two-way binding for the `expanded` property.
      */
     expandedChange = new EventEmitter();
@@ -5772,8 +5876,9 @@ class DrawerComponent {
     }
     /**
      * Toggles the visibility of the Drawer.
+     * If the `expanded` parameter is not provided, the Drawer will toggle between expanded and collapsed states.
      *
-     * @param expanded? - Boolean. Specifies if the Drawer will be expanded or collapsed.
+     * @param expanded Specifies if the Drawer will be expanded or collapsed.
      */
     toggle(expanded) {
         const previous = this.expanded;
@@ -5987,7 +6092,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Serves as a container for the [Kendo UI Drawer component for Angular]({% slug overview_drawer %}) and its content.
+ * Serves as a container for the [Drawer component]({% slug overview_drawer %}) and its content.
+ *
+ * @example
+ * ```html
+ * <kendo-drawer-container>
+ *   <kendo-drawer [items]="items"></kendo-drawer>
+ *   <kendo-drawer-content>
+ *     <h1>Main Content</h1>
+ *   </kendo-drawer-content>
+ * </kendo-drawer-container>
+ * ```
+ * @remarks
+ * Supported children components are: {@link DrawerComponent}, {@link DrawerContentComponent}.
  */
 class DrawerContainerComponent {
     localizationService;
@@ -6098,7 +6215,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Represents the content of the [Kendo UI Drawer component for Angular]({% slug overview_drawer %}).
+ * Defines the content of the Drawer component.
+ *
+ * @example
+ * ```html
+ * <kendo-drawer-content>
+ *   <h1>Main Content Area</h1>
+ *   <p>Your application content goes here.</p>
+ * </kendo-drawer-content>
+ * ```
  */
 class DrawerContentComponent {
     hostClasses = true;
@@ -6124,23 +6249,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Arguments for the `select` event of the Drawer.
+ * Defines the arguments for the `select` event of the Drawer.
  */
 class DrawerSelectEvent extends PreventableEvent$1 {
     /**
-     * The index of the selected item in the `items` collection.
+     * Defines the index of the selected item in the `items` collection.
      */
     index;
     /**
-     * The selected Drawer item.
+     * Defines the selected Drawer item.
      */
     item;
     /**
-     * The DOM event that triggered the selection.
+     * Defines the DOM event that triggered the selection.
      */
     originalEvent;
     /**
-     * The Drawer that triggered the event.
+     * Defines the Drawer that triggered the event.
      */
     sender;
     /**
@@ -6153,9 +6278,20 @@ class DrawerSelectEvent extends PreventableEvent$1 {
 }
 
 /**
- * Represents a template that defines the content of the whole Step.
+ * Use this template to define custom content for the entire step.
  * To define the template, nest an `<ng-template>` tag
  * with the `kendoStepperStepTemplate` directive inside the `<kendo-stepper>` tag.
+ *
+ * @example
+ * ```html
+ * <kendo-stepper>
+ *   <ng-template kendoStepperStepTemplate let-step="step" let-index="index">
+ *     <div class="custom-step">
+ *       <span>{{ step.label }}</span>
+ *     </div>
+ *   </ng-template>
+ * </kendo-stepper>
+ * ```
  */
 class StepperStepTemplateDirective {
     templateRef;
@@ -6176,9 +6312,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }]; } });
 
 /**
- * Represents a template that defines the content of the Step label.
+ * Use this template to define custom content for the step label.
  * To define the template, nest an `<ng-template>` tag
  * with the `kendoStepperLabelTemplate` directive inside the `<kendo-stepper>` tag.
+ *
+ * @example
+ * ```html
+ * <kendo-stepper>
+ *   <ng-template kendoStepperLabelTemplate let-step="step" let-index="index">
+ *     <span class="custom-label">{{ step.label }}</span>
+ *   </ng-template>
+ * </kendo-stepper>
+ * ```
  */
 class StepperLabelTemplateDirective {
     templateRef;
@@ -6199,9 +6344,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }]; } });
 
 /**
- * Represents a template that defines the content of the Step indicator.
+ * Use this template to define custom content for the step indicator.
  * To define the template, nest an `<ng-template>` tag
  * with the `kendoStepperIndicatorTemplate` directive inside the `<kendo-stepper>` tag.
+ *
+ * @example
+ * ```html
+ * <kendo-stepper>
+ *   <ng-template kendoStepperIndicatorTemplate let-step="step" let-index="index">
+ *     <span>{{ index + 1 }}</span>
+ *   </ng-template>
+ * </kendo-stepper>
+ * ```
  */
 class StepperIndicatorTemplateDirective {
     templateRef;
@@ -6241,19 +6395,19 @@ handlersRTL[Keys.ArrowRight] = 'left';
  */
 let StepperActivateEvent$1 = class StepperActivateEvent extends PreventableEvent$1 {
     /**
-     * The index of the activated step in the `steps` collection.
+     * Specifies the index of the activated step in the `steps` collection.
      */
     index;
     /**
-     * The activated step.
+     * Specifies the activated step.
      */
     step;
     /**
-     * The DOM event that triggered the step activation.
+     * Specifies the DOM event that triggered the step activation.
      */
     originalEvent;
     /**
-     * The Stepper that triggered the event.
+     * Specifies the Stepper that triggered the event.
      */
     sender;
     /**
@@ -6929,7 +7083,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class StepperMessages extends ComponentMessages {
     /**
-     * The optional text.
+     * Specifies the optional text.
      */
     optional;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepperMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
@@ -6983,20 +7137,22 @@ const DEFAULT_ANIMATION_DURATION = 400;
  * Represents the [Kendo UI Stepper component for Angular]({% slug overview_stepper %}).
  *
  * @example
- * ```ts-preview
- * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-stepper [steps]="steps">
- *        </kendo-stepper>
- *    `
+ * ```ts
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-stepper [steps]="steps">
+ *     </kendo-stepper>
+ *   `
  * })
  * class AppComponent {
- *    public steps: Array<StepperStep> = [
- *      { label: 'Step One' }, { label: 'Step Two' }, { label: 'Step Three' }
- *    ];
+ *   public steps: Array<StepperStep> = [
+ *     { label: 'Step One' }, { label: 'Step Two' }, { label: 'Step Three' }
+ *   ];
  * }
  * ```
+ * @remarks
+ * Supported children components are: {@link StepperCustomMessagesComponent}.
  */
 class StepperComponent {
     renderer;
@@ -7013,10 +7169,7 @@ class StepperComponent {
     /**
      * Specifies the type of the steps in the Stepper.
      *
-     * The possible values are:
-     * * (Default) `indicator`
-     * * `label`
-     * * `full`
+     * @default 'indicator'
      */
     stepType = 'indicator';
     /**
@@ -7029,13 +7182,11 @@ class StepperComponent {
      * Specifies the orientation of the Stepper
      * ([see example]({% slug orientation_stepper %})).
      *
-     * The possible values are:
-     * * (Default) `horizontal`
-     * * `vertical`
+     * @default 'horizontal'
      */
     orientation = 'horizontal';
     /**
-     * The index of the current step.
+     * Specifies the index of the current step.
      */
     set currentStep(value) {
         this.stepperService.currentStep = value;
@@ -7044,8 +7195,8 @@ class StepperComponent {
         return this.stepperService.currentStep;
     }
     /**
-     * The collection of steps that will be rendered in the Stepper.
-     * ([see example]({% slug step_appearance_stepper %}))
+     * Specifies the collection of steps that will be rendered in the Stepper
+     * ([see example]({% slug step_appearance_stepper %})).
      */
     set steps(steps) {
         if (isPresent(steps) && steps.length > 0) {
@@ -7056,8 +7207,8 @@ class StepperComponent {
         return this._steps;
     }
     /**
-     * Defines an SVG icon to be rendered inside the step indicator instead of the default numeric or text content.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Specifies an SVG icon to be rendered inside the step indicator instead of the default numeric or text content.
+     * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
      */
     set svgIcon(icon) {
         this._svgIcon = icon;
@@ -7066,42 +7217,38 @@ class StepperComponent {
         return this._svgIcon;
     }
     /**
-     * Defines an SVGIcon to be rendered for the success icon.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Specifies an SVG icon to be rendered for the success icon.
+     * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
      */
     successSVGIcon;
     /**
-     * Defines an SVGIcon to be rendered for the error icon.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Specifies an SVG icon to be rendered for the error icon.
+     * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
      */
     errorSVGIcon;
     /**
-     * Specifies a custom icon that will be rendered inside the step
-     * for valid previous steps.
+     * Specifies an SVG icon that will be rendered inside the step for valid previous steps.
+     * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
      */
     successIcon;
     /**
-     * Specifies a custom icon that will be rendered inside the step
-     * for invalid previous steps.
-     */
+    * Specifies an SVG icon that will be rendered inside the step for invalid previous steps.
+    * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+    */
     errorIcon;
     /**
-     * Specifies the duration of the progress indicator animation in milliseconds. Defaults to `400ms`.
+     * Specifies the duration of the progress indicator animation in milliseconds.
      *
-     * The possible values are:
-     *  * Boolean
-     *    * (Default) `true`
-     *    * false
-     *  * Number
+     * @default true
      */
     animation = true;
     /**
-     * Fires when a step is about to be activated. This event is preventable.
+     * Fires when a step is about to be activated. You can prevent this event.
      */
     activate = new EventEmitter();
     /**
      * Fires when the `currentStep` property of the component was updated.
-     * Used to provide a two-way binding for the `currentStep` property.
+     * Use this event to provide a two-way binding for the `currentStep` property.
      */
     currentStepChange = new EventEmitter();
     /**
@@ -7388,23 +7535,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Arguments for the `activate` event of the Stepper.
+ * Represents the arguments for the `activate` event of the Stepper.
  */
 class StepperActivateEvent extends PreventableEvent$1 {
     /**
-     * The index of the activated step in the `steps` collection.
+     * Specifies the index of the activated step in the `steps` collection.
      */
     index;
     /**
-     * The activated step.
+     * Specifies the activated step.
      */
     step;
     /**
-     * The DOM event that triggered the step activation.
+     * Specifies the DOM event that triggered the step activation.
      */
     originalEvent;
     /**
-     * The Stepper that triggered the event.
+     * Specifies the Stepper that triggered the event.
      */
     sender;
     /**
@@ -7417,8 +7564,16 @@ class StepperActivateEvent extends PreventableEvent$1 {
 }
 
 /**
- * Custom component messages override default component messages
+ * Provides custom component messages that override default component messages
  * ([see example]({% slug rtl_layout %})).
+ *
+ * ```html
+ * <kendo-stepper>
+ *   <kendo-stepper-messages
+ *     optional="Optional step"
+ *   ></kendo-stepper-messages>
+ * </kendo-stepper>
+ * ```
  */
 class StepperCustomMessagesComponent extends StepperMessages {
     service;
@@ -7457,7 +7612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class Messages extends ComponentMessages {
     /**
-     * The alt attribute text of the image in the avatar.
+     * Defines the alt attribute text of the image in the Avatar.
      */
     avatarAlt;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
@@ -7510,7 +7665,26 @@ const DEFAULT_SIZE = 'medium';
 const DEFAULT_THEME_COLOR = 'primary';
 const DEFAULT_FILL_MODE = 'solid';
 /**
- * Displays images, icons or initials representing people or other entities.
+ * Represents the Kendo UI Avatar component for Angular. Displays images, icons, or initials representing people or other entities.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-avatar [imageSrc]="userImage" size="large"></kendo-avatar>
+ *     <kendo-avatar [initials]="userInitials" themeColor="primary"></kendo-avatar>
+ *     <kendo-avatar [icon]="userIcon" fillMode="outline"></kendo-avatar>
+ *   `
+ * })
+ * class AppComponent {
+ *   userImage = 'path/to/image.jpg';
+ *   userInitials = 'JD';
+ *   userIcon = 'user';
+ * }
+ * ```
+ * @remarks
+ * Supported children components are: {@link AvatarCustomMessagesComponent}.
  */
 class AvatarComponent {
     localization;
@@ -7537,14 +7711,10 @@ class AvatarComponent {
         this.rounded = mapShapeToRounded(shape);
     }
     /**
-     * Specifies the size of the avatar
+     * Specifies the size of the Avatar
      * ([see example]({% slug appearance_avatar %}#toc-size)).
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (Default)
-     * * `large`
-     * * `none`
+     * @default 'medium'
      */
     set size(size) {
         if (size !== this._size) {
@@ -7557,15 +7727,10 @@ class AvatarComponent {
         return this._size;
     }
     /**
-     * Specifies the rounded styling of the avatar
+     * Specifies the rounded styling of the Avatar
      * ([see example](slug:appearance_avatar#toc-roundness)).
      *
-     * The possible values are:
-     * * `small`
-     * * `medium`
-     * * `large`
-     * * `full` (Default)
-     * * `none`
+     * @default 'full'
      */
     set rounded(rounded) {
         if (rounded !== this._rounded) {
@@ -7578,22 +7743,10 @@ class AvatarComponent {
         return this._rounded;
     }
     /**
-     * Specifies the theme color of the avatar.
-     * The theme color will be applied as background and border color, while also amending the text color accordingly.
+     * Specifies the theme color of the Avatar.
+     * The theme color applies as background and border color while adjusting the text color accordingly.
      *
-     * The possible values are:
-     * * `base`&mdash; Applies the base coloring value.
-     * * `primary` (Default)&mdash;Applies coloring based on primary theme color.
-     * * `secondary`&mdash;Applies coloring based on secondary theme color.
-     * * `tertiary`&mdash; Applies coloring based on tertiary theme color.
-     * * `info`&mdash;Applies coloring based on info theme color.
-     * * `success`&mdash; Applies coloring based on success theme color.
-     * * `warning`&mdash; Applies coloring based on warning theme color.
-     * * `error`&mdash; Applies coloring based on error theme color.
-     * * `dark`&mdash; Applies coloring based on dark theme color.
-     * * `light`&mdash; Applies coloring based on light theme color.
-     * * `inverse`&mdash; Applies coloring based on inverted theme color.
-     * * `none`&mdash; Removes the styling associated with the theme color.
+     * @default 'primary'
      */
     set themeColor(themeColor) {
         if (themeColor !== this._themeColor) {
@@ -7606,12 +7759,9 @@ class AvatarComponent {
         return this._themeColor;
     }
     /**
-     * Specifies the appearance fill style of the avatar.
+     * Specifies the fill style of the Avatar.
      *
-     * The possible values are:
-     * * `solid` (Default)
-     * * `outline`
-     * * `none`
+     * @default 'solid'
      */
     set fillMode(fillMode) {
         if (fillMode !== this.fillMode) {
@@ -7633,17 +7783,18 @@ class AvatarComponent {
         this.fillMode = fillMode;
     }
     /**
-     * Sets a border to the avatar.
+     * Adds a border to the Avatar.
+     *
+     * @default false
      */
     border = false;
     /**
-     * Defines a CSS class — or multiple classes separated by spaces —
-     * which are applied to a span element inside the avatar.
-     * Allows the usage of custom icons.
+     * Defines a CSS class or multiple classes separated by spaces.
+     * You can apply these classes to a `span` element inside the Avatar and also use custom icons.
      */
     iconClass;
     /**
-     * Sets the width of the avatar.
+     * Sets the width of the Avatar.
      */
     width;
     /**
@@ -7653,7 +7804,7 @@ class AvatarComponent {
         return this.width;
     }
     /**
-     * Sets the height of the avatar.
+     * Sets the height of the Avatar.
      */
     height;
     /**
@@ -7663,26 +7814,26 @@ class AvatarComponent {
         return this.height;
     }
     /**
-     * The CSS styles that will be rendered on the content element of the avatar.
-     * Supports the type of values that are supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
+     * Defines the CSS styles that render on the content element of the Avatar.
+     * Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports.
      */
     cssStyle;
     /**
-     * Sets `initials` to the avatar.
+     * Sets the initials for the Avatar.
      */
     initials;
     /**
-     * Sets the `icon` for the avatar.
+     * Sets the icon for the Avatar.
      * All [Kendo UI Icons](slug:icons#icons-list) are supported.
      */
     icon;
     /**
-     * Sets the `image` source of the avatar.
+     * Sets the image source of the Avatar.
      */
     imageSrc;
     /**
-     * Defines an SVGIcon to be rendered.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Defines an SVG icon to render.
+     * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
      */
     set svgIcon(icon) {
         if (isDevMode() && icon && this.icon && this.iconClass) {
@@ -7900,8 +8051,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // eslint-disable no-forward-ref
 /**
- * Custom component messages override default component messages
+ * Provides custom component messages that override default component messages
  * ([see example]({% slug rtl_layout %})).
+ *
+ * ```html
+ * <kendo-avatar>
+ *   <kendo-avatar-messages
+ *     avatarAlt="User's profile picture"
+ *   ></kendo-avatar-messages>
+ * </kendo-avatar>
+ * ```
  */
 class AvatarCustomMessagesComponent extends Messages {
     service;
@@ -7936,7 +8095,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
 /**
- * Represents the [Kendo UI Card component for Angular]({% slug overview_card %})
+ * Represents the Kendo UI Card component for Angular.
+ * Displays content in a structured container with customizable layout and styling ([Card overview]({% slug overview_card %})).
+ *
+ * @example
+ * ```html
+ * <kendo-card orientation="vertical">
+ *   <kendo-card-header>
+ *     <h5 kendoCardTitle>Card Title</h5>
+ *   </kendo-card-header>
+ *   <kendo-card-body>
+ *     <p>Card content goes here.</p>
+ *   </kendo-card-body>
+ * </kendo-card>
+ * ```
+ * @remarks
+ * Supported children components are: {@link CardFooterComponent}, {@link CardHeaderComponent}, {@link CardActionsComponent}, {@link CardBodyComponent}.
  */
 class CardComponent {
     localizationService;
@@ -7957,15 +8131,13 @@ class CardComponent {
     /**
      * Specifies the layout of the Card content.
      *
-     * The possible values are:
-     * * (Default) `vertical`
-     * * `horizontal`
-     *
+     * @default 'vertical'
      */
     orientation = 'vertical';
     /**
      * Defines the width of the Card.
-     * Defaults to `285px`.
+     *
+     * @default '285px'
      */
     width = '285px';
     dynamicRTLSubscription;
@@ -8032,7 +8204,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Specifies the content in the Card header.
+ * Defines the content in the Card header.
+ * The header can include a title, subtitle, and other elements that provide context for the Card's content.
+ *
+ * @example
+ * ```html
+ * <kendo-card-header>
+ *   <h5 kendoCardTitle>Card Title</h5>
+ *   <p kendoCardSubtitle>Card Subtitle</p>
+ * </kendo-card-header>
+ * ```
  */
 class CardHeaderComponent {
     hostClass = true;
@@ -8056,7 +8237,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Specifies the content in the Card body.
+ * Defines the content in the Card body.
+ * The body is the main area of the Card where the primary content is displayed.
+ *
+ * @example
+ * ```html
+ * <kendo-card-body>
+ *   <p>Main content of the card.</p>
+ * </kendo-card-body>
+ * ```
  */
 class CardBodyComponent {
     hostClass = true;
@@ -8080,7 +8269,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Specifies the content in the Card footer.
+ * Defines the content in the Card footer.
+ * The footer can include additional information, actions, or links related to the Card's content.
+ *
+ * @example
+ * ```html
+ * <kendo-card-footer>
+ *   <p>Footer content</p>
+ * </kendo-card-footer>
+ * ```
  */
 class CardFooterComponent {
     hostClass = true;
@@ -8104,8 +8301,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Specifies the action buttons of the Card.
- * * ([see example]({% slug actions_card %})).
+ * Defines the action buttons of the Card ([see example]({% slug actions_card %})).
+ * The Card actions can be used to perform operations related to the Card's content, such as saving, editing, or deleting.
+ *
+ * @example
+ * ```html
+ * <kendo-card-actions
+ *   layout="end"
+ *   orientation="horizontal">
+ * </kendo-card-actions>
+ * ```
  */
 class CardActionsComponent {
     hostClass = true;
@@ -8128,27 +8333,20 @@ class CardActionsComponent {
         return this.orientation === 'horizontal';
     }
     /**
-     * Specifies the layout of the Card action buttons.
-     *
-     * * The possible values are:
-     * * (Default) `horizontal`
-     * * `vertical`
+     * Specifies the orientation of the Card action buttons.
      *
+     * @default 'horizontal'
      */
     orientation = 'horizontal';
     /**
      * Specifies the layout of the Card action buttons.
      *
-     * The possible values are:
-     * * (Default) `start`
-     * * `center`
-     * * `end`
-     * * `stretched`
-     *
+     * @default 'start'
      */
     layout = 'start';
     /**
-     * Allows the declarative specification of the Card actions.
+     * Defines the Card actions declaratively.
+     * You can pass an array of `CardAction` objects or a `TemplateRef`.
      */
     set actions(value) {
         if (Array.isArray(value)) {
@@ -8159,7 +8357,7 @@ class CardActionsComponent {
         }
     }
     /**
-     * Fires when the user clicks an action button.
+     * Fires when you click an action button.
      */
     action = new EventEmitter();
     /**
@@ -8264,7 +8462,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Specifies a separator in the content of the Card.
+ * Defines a separator in the content of the Card.
+ * The separator can be used to visually divide sections within the Card.
+ *
+ * ```html
+ * <kendo-card>
+ *  <div kendoCardSeparator></div>
+ *  <p>Content below the separator</p>
+ * </kendo-card>
+ * ```
  */
 class CardSeparatorDirective {
     hostClass = true;
@@ -8281,9 +8487,7 @@ class CardSeparatorDirective {
     /**
      * Specifies the orientation of the Card separator.
      *
-     * The possible values are:
-     * (Default) `horizontal`
-     * `vertical`
+     * @default 'horizontal'
      */
     orientation = 'horizontal';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -8314,7 +8518,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Specifies the text and styles for the title of the Card.
+ * Defines the text and styles for the title of the Card.
+ * The title is displayed at the top of the Card, above the subtitle and content.
+ *
+ * ```html
+ * <kendo-card>
+ *   <h3 kendoCardTitle>Card Title</h3>
+ * </kendo-card>
+ * ```
  */
 class CardTitleDirective {
     hostClass = true;
@@ -8333,7 +8544,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Specifies the text and styles for the subtitle of the Card.
+ * Defines the text and styles for the subtitle of the Card.
+ * The subtitle is displayed below the title and above the content of the Card.
+ *
+ * ```html
+ * <kendo-card>
+ *  <h4 kendoCardSubtitle>Card Subtitle</h4>
+ * </kendo-card>
+ * ```
  */
 class CardSubtitleDirective {
     hostClass = true;
@@ -8352,7 +8570,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Specifies any media that will be displayed and aligned in the Card.
+ * Defines any media that displays and aligns in the Card.
+ * The media can be an image, video, or any other media type.
+ *
+ * ```html
+ * <kendo-card>
+ *  <div kendoCardMedia>
+ *   <img src="path/to/image.jpg" alt="Card Media">
+ *  </div>
+ * </kendo-card>
+ * ```
  */
 class CardMediaDirective {
     hostClass = true;
@@ -8371,28 +8598,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * The settings of the Card action buttons.
+ * Defines the settings of the Card action buttons.
  */
 class CardAction {
     /**
-     * Determines if the action button is styled as a primary button.
+     * Specifies whether the action button uses primary styling.
      */
     primary;
     /**
-     * Determines if the action button is styled as a flat button.
+     * Specifies whether the action button uses flat styling.
      */
     flat;
     /**
-     * The text of the action button.
+     * Defines the text of the action button.
      */
     text;
 }
 
 /**
- * Represents a template that defines the content of the ExpansionPanel title.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoExpansionPanelTitleDirective` directive inside the `<kendo-expansionpanel>` tag.
+ * Defines a template that specifies the content of the ExpansionPanel title.
+ * To define the template, nest an `<ng-template>` tag with the `kendoExpansionPanelTitleDirective` directive inside the `<kendo-expansionpanel>` tag
  * ([see example]({% slug title_expansionpanel %}#toc-title-template)).
+ *
+ * @example
+ * ```html
+ * <kendo-expansionpanel>
+ *   <ng-template kendoExpansionPanelTitleDirective>
+ *     <h3>Custom Title</h3>
+ *   </ng-template>
+ *   <p>Panel content</p>
+ * </kendo-expansionpanel>
+ * ```
  */
 class ExpansionPanelTitleDirective {
     templateRef;
@@ -8432,11 +8668,11 @@ function collapse(duration, height) {
 }
 
 /**
- * Arguments for the `action` event of the ExpansionPanel.
+ * Defines the arguments for the `action` event of the ExpansionPanel.
  */
 class ExpansionPanelActionEvent extends PreventableEvent$1 {
     /**
-     * The action that will take place upon interaction with the ExpansionPanel.
+     * Defines the action that takes place upon interaction with the ExpansionPanel.
      */
     action;
     /**
@@ -8451,19 +8687,16 @@ class ExpansionPanelActionEvent extends PreventableEvent$1 {
 const DEFAULT_DURATION = 200;
 const CONTENT_HIDDEN_CLASS = 'k-hidden';
 /**
- * Represents the [Kendo UI ExpansionPanel component for Angular]({% slug overview_expansionpanel %}).
+ * Represents the Kendo UI ExpansionPanel component for Angular. Provides an expandable and collapsible content container with customizable header and animation ([see overview]({% slug overview_expansionpanel %})).
  *
  * @example
- * ```ts-preview
- * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-expansionpanel title="Chile" subtitle="South America">
- *              There are various theories about the origin of the word Chile.
- *        </kendo-expansionpanel>
- *    `
- * })
- * class AppComponent {}
+ * ```html
+ * <kendo-expansionpanel
+ *   title="Chile"
+ *   subtitle="South America"
+ *   [expanded]="isExpanded">
+ *   There are various theories about the origin of the word Chile.
+ * </kendo-expansionpanel>
  * ```
  */
 class ExpansionPanelComponent {
@@ -8478,7 +8711,7 @@ class ExpansionPanelComponent {
      */
     title = '';
     /**
-     * Specifies the secondary text in the header of the ExpansionPanel, which is rendered next to the collapse/expand icon
+     * Specifies the secondary text in the header of the ExpansionPanel, which renders next to the collapse/expand icon
      * ([see example](slug:title_expansionpanel#toc-titles-and-subtitles)).
      */
     subtitle = '';
@@ -8490,7 +8723,7 @@ class ExpansionPanelComponent {
      */
     disabled = false;
     /**
-     * Specifies whether the ExpansionPanel is expanded. The property supports two-way binding.
+     * Specifies whether the ExpansionPanel is expanded. The property supports two-way binding
      * ([see example]({% slug interaction_expansionpanel %}#toc-setting-the-initial-state)).
      *
      * @default false
@@ -8511,8 +8744,8 @@ class ExpansionPanelComponent {
         return this._expanded;
     }
     /**
-     * Defines an SVGIcon for the expanded state of the component.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Defines an SVG icon for the expanded state of the component.
+     * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
      */
     set svgExpandIcon(icon) {
         if (isDevMode() && icon && this.expandIcon) {
@@ -8524,8 +8757,8 @@ class ExpansionPanelComponent {
         return this._svgExpandIcon;
     }
     /**
-     * Defines an SVGIcon for the collapsed state of the component.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Defines an SVG icon for the collapsed state of the component.
+     * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
      */
     set svgCollapseIcon(icon) {
         if (isDevMode() && icon && this.collapseIcon) {
@@ -8537,12 +8770,12 @@ class ExpansionPanelComponent {
         return this._svgCollapseIcon;
     }
     /**
-     * Sets a custom icon via css class(es), for the collapsed state of the component
+     * Sets a custom icon via CSS class(es) for the collapsed state of the component
      * ([see example]({% slug icons_expansionpanel %}#toc-icons)).
      */
     expandIcon;
     /**
-     * Sets a custom icon via css class(es), for the expanded state of the component
+     * Sets a custom icon via CSS class(es) for the expanded state of the component
      * ([see example]({% slug icons_expansionpanel %}#toc-icons)).
      */
     collapseIcon;
@@ -8550,11 +8783,7 @@ class ExpansionPanelComponent {
      * Specifies the animation settings of the ExpansionPanel
      * ([see example]({% slug animations_expansionpanel %})).
      *
-     * The possible values are:
-     * * Boolean
-     *    * (Default) `true` Numeric values represent duration. Default duration is 200ms.
-     *    * false
-     * * Number
+     * @default true
      */
     animation = true;
     /**
@@ -8569,12 +8798,12 @@ class ExpansionPanelComponent {
      */
     action = new EventEmitter();
     /**
-     * Fires when the ExpansionPanel is expanded. If there is animation it will fire when the animation is complete
+     * Fires when the ExpansionPanel is expanded. If there is animation it fires when the animation is complete
      * ([see example](slug:events_expansionpanel)).
      */
     expand = new EventEmitter();
     /**
-     * Fires when the ExpansionPanel is collapsed. If there is animation it will fire when the animation is complete
+     * Fires when the ExpansionPanel is collapsed. If there is animation it fires when the animation is complete
      * ([see example](slug:events_expansionpanel)).
      */
     collapse = new EventEmitter();
@@ -8714,7 +8943,7 @@ class ExpansionPanelComponent {
      * Toggles the visibility of the ExpansionPanel
      * ([see example](slug:interaction_expansionpanel#toggling-between-states)).
      *
-     * @param expanded? - Boolean. Specifies, whether the ExpansionPanel will be expanded or collapsed.
+     * @param expanded Specifies whether the ExpansionPanel will be expanded or collapsed.
      */
     toggle(expanded) {
         const previous = this.expanded;
@@ -9131,8 +9360,9 @@ const REVERSE_OVERLAP_THRESHOLD = -0.7;
 const HINT_BORDERS_HEIGHT = 2;
 
 /**
- * Arguments for the `reorder` event. The event fires when the order or starting
- * positions of the items is changed via the UI. If you prevent the event, the change is canceled ([see example]({% slug reordering_tilelayout %}#toc-handling-the-reorder-event)).
+ * Arguments for the `reorder` event.
+ * The event fires when you change the order or starting positions of items through the UI.
+ * You can prevent this event to cancel the reorder operation.
  */
 class TileLayoutReorderEvent extends PreventableEvent$1 {
     item;
@@ -9169,8 +9399,9 @@ class TileLayoutReorderEvent extends PreventableEvent$1 {
 }
 
 /**
- * Arguments for the `resize` event. The `resize` event fires when any item size
- * is changed from the UI. If you cancel the event, the change is prevented ([see example]({% slug resizing_tilelayout %}#toc-handling-the-resize-event)).
+ * Arguments for the `resize` event.
+ * The `resize` event fires when you change any item size through the UI.
+ * You can prevent this event to stop the resize operation.
  */
 class TileLayoutResizeEvent extends PreventableEvent$1 {
     item;
@@ -9785,8 +10016,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; } });
 
 /**
- * Holds the content of the header section of the TileLayoutItem component.
- * This is the area which can be dragged to reorder the items if reordering is enabled for this item.
+ * Contains the header content of the `TileLayoutItem` component.
+ * You can drag this area to reorder items when reordering is enabled.
+ *
+ * @example
+ * ```html
+ * <kendo-tilelayout-item>
+ *   <kendo-tilelayout-item-header>
+ *     <h3>Custom Header</h3>
+ *   </kendo-tilelayout-item-header>
+ *   <p>Item content</p>
+ * </kendo-tilelayout-item>
+ * ```
  */
 class TileLayoutItemHeaderComponent {
     hostClass = true;
@@ -9869,6 +10110,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 /**
  * Represents a tile item within the TileLayoutComponent.
+ *
+ * @example
+ * ```html
+ * <kendo-tilelayout>
+ *   <kendo-tilelayout-item [title]="'Item 1'" [colSpan]="2">
+ *     <p>Item content goes here</p>
+ *   </kendo-tilelayout-item>
+ * </kendo-tilelayout>
+ * ```
+ * @remarks
+ * Supported children components are: {@link TileLayoutItemBodyComponent}, {@link TileLayoutItemHeaderComponent}.
  */
 class TileLayoutItemComponent {
     elem;
@@ -9878,23 +10130,22 @@ class TileLayoutItemComponent {
     draggingService;
     keyboardNavigationService;
     /**
-     * The title that will be rendered in the item header ([see example]({% slug tiles_tilelayout %}#toc-tiles-configuration)).
+     * Sets the title text that appears in the item header ([see example]({% slug tiles_tilelayout %}#toc-tiles-configuration)).
      */
     title;
     /**
-     * Determines how many rows will the tile item span ([see example](slug:resizing_tilelayout#programmatic-resizing)).
+     * Sets how many rows the tile item spans ([see example](slug:resizing_tilelayout#programmatic-resizing)).
      * @default 1
      */
     rowSpan = 1;
     /**
-     * Determines how many columns will the tile item span ([see example](slug:resizing_tilelayout#programmatic-resizing)).
+     *  Sets how many columns the tile item spans ([see example](slug:resizing_tilelayout#programmatic-resizing)).
      * @default 1
      */
     colSpan = 1;
     /**
-     * Determines the order of the tile items within the TileLayout.
-     * If not set, the items will receive increasing sequential order in accordance with
-     * their position in the DOM when initially rendered.
+     * Sets the order of the tile item within the TileLayout.
+     * When not set, items receive increasing order values based on their DOM position.
      */
     set order(value) {
         this._order = value;
@@ -9904,21 +10155,21 @@ class TileLayoutItemComponent {
         return this._order;
     }
     /**
-     * Sets the starting column of the item ([see example](slug:tiles_tilelayout#size-and-position)).
+     * Sets the starting column position of the item ([see example](slug:tiles_tilelayout#size-and-position)).
      */
     col;
     /**
-     * Sets the starting row of the item ([see example](slug:tiles_tilelayout#size-and-position)).
+     * Sets the starting row position of the item ([see example](slug:tiles_tilelayout#size-and-position)).
      */
     row;
     /**
-     * Determines whether the item can be reordered. By default all items are reorderable when the [reorderable]({% slug api_layout_tilelayoutcomponent %}#toc-reorderable) property of the TileLayoutComponent is set to `true` ([see example]({% slug reordering_tilelayout %}#toc-disabling-reordering)).
+     * Enables or disables individual item reordering.
      *
      * @default true
      */
     reorderable = true;
     /**
-     * Determines whether the item can be resized. By default all items are resizable when the [resizable]({% slug api_layout_tilelayoutcomponent %}#resizable) property of the TileLayoutComponent is set to `true` ([see example](slug:resizing_tilelayout#toc-disabling-resizing)).
+     * Enables or disables individual item resizing.
      * @default true
      */
     resizable = true;
@@ -10164,6 +10415,16 @@ const autoFlowClasses = {
 };
 /**
  * Represents the [Kendo UI TileLayout component for Angular]({% slug overview_tilelayout %})
+ *
+ * @example
+ * ```html
+ * <kendo-tilelayout [columns]="3" [gap]="10">
+ *   <kendo-tilelayout-item>Content 1</kendo-tilelayout-item>
+ *   <kendo-tilelayout-item>Content 2</kendo-tilelayout-item>
+ * </kendo-tilelayout>
+ * ```
+ * @remarks
+ * Supported children components are: {@link TileLayoutItemComponent}.
  */
 class TileLayoutComponent {
     zone;
@@ -10173,22 +10434,22 @@ class TileLayoutComponent {
     draggingService;
     navigationService;
     /**
-     * Defines the number of columns ([see example](slug:tiles_tilelayout#size-and-position)).
+     * Specifies the number of columns ([see example](slug:tiles_tilelayout#size-and-position)).
      * @default 1
      */
     columns = 1;
     /**
-     * Determines the width of the columns. Numeric values are treated as pixels ([see example](slug:tiles_tilelayout#size-and-position)).
+     * Sets the width of the columns.
+     * Use numeric values for pixels or string values for other CSS units ([see example](slug:tiles_tilelayout#size-and-position)).
      * @default '1fr'
      */
     columnWidth = '1fr';
     /**
-     * The numeric values which determine the spacing in pixels between the layout items horizontally and vertically.
-     * Properties:
-     * * rows - the vertical spacing. Numeric values are treated as pixels. Defaults to `16`.
-     * * columns - the horizontal spacing. Numeric values are treated as pixels. Defaults to `16`.
+     * Sets the spacing between layout items in pixels.
+     * Use an object with `rows` and `columns` properties to set different horizontal and vertical spacing.
+     * Use a single number to apply the same spacing to both directions.
      *
-     * When bound to a single numeric value, it will be set to both `rows` and `columns` properties.
+     * @default { rows: 16, columns: 16 }
      */
     set gap(value) {
         this._gap = (typeof value === 'number') ? { rows: value, columns: value } : Object.assign(this._gap, value);
@@ -10197,48 +10458,42 @@ class TileLayoutComponent {
         return this._gap;
     }
     /**
-     * Determines whether the reordering functionality will be enabled ([see example]({% slug reordering_tilelayout %})).
+     * Enables or disables item reordering ([see example]({% slug reordering_tilelayout %})).
      * @default false
      */
     reorderable = false;
     /**
-     * Determines whether the resizing functionality will be enabled ([see example]({% slug resizing_tilelayout %})).
+     * Enables or disables item resizing ([see example]({% slug resizing_tilelayout %})).
      * @default false
      */
     resizable = false;
     /**
-     * Determines the height of the rows. Numeric values are treated as pixels ([see example](slug:tiles_tilelayout#size-and-position)).
+     * Sets the height of the rows.
+     * Use numeric values for pixels or string values for other CSS units ([see example](slug:tiles_tilelayout#size-and-position)).
      * @default '1fr'
      */
     rowHeight = '1fr';
     /**
-     * Controls how the auto-placement algorithm works, specifying exactly how auto-placed items are flowed in the TileLayout ([see example]({% slug tiles_autoflow_tilelayout %})).
-     * For further reference, check the [grid-auto-flow CSS article](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow).
      *
-     * The possible values are:
-     * * (Default) `column`
-     * * `row`
-     * * `row dense`
-     * * `column dense`
-     * * `none`
+     * Controls how the auto-placement algorithm works, specifying exactly how auto-placed items are flowed in the TileLayout ([see example]({% slug tiles_autoflow_tilelayout %})).
      *
+     * For further reference, check the [grid-auto-flow CSS article](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow).
+     * @default 'column'
      */
     autoFlow = 'column';
     /**
-     * When the keyboard navigation is enabled, the user can use dedicated shortcuts to interact with the TileLayout.
-     * By default, navigation is enabled. To disable it and include focusable TileLayout content as a part of the natural tab sequence of the page, set the property to `false`.
-     *
+     * Enables or disables [keyboard navigation](slug:keyboard_navigation_tilelayout).
      * @default true
      */
     navigable = true;
     /**
-     * Fires when the user completes the reordering of the item ([see example]({% slug reordering_tilelayout %})).
-     * This event is preventable. If you cancel it, the item will not be reordered.
+     * Fires when item reordering is completed ([see example]({% slug reordering_tilelayout %})).
+     * You can prevent this event to cancel the reorder operation.
      */
     reorder = new EventEmitter();
     /**
-     * Fires when the user completes the resizing of the item ([see example]({% slug resizing_tilelayout %})).
-     * This event is preventable. If you cancel it, the item will not be resized.
+     * Fires when item resizing is completed ([see example]({% slug resizing_tilelayout %})).
+     * You can prevent this event to cancel the resize operation.
      */
     resize = new EventEmitter();
     hostClass = true;
@@ -10260,7 +10515,8 @@ class TileLayoutComponent {
         return this.draggingService.order;
     }
     /**
-     * A query list of all declared [TileLayoutItemComponent]({% slug api_layout_tilelayoutitemcomponent %}) items.
+     * Contains a query list of the `TileLayoutItemComponent` instances that are used in the TileLayout.
+     * This allows you to access the items programmatically and manipulate their properties or listen to their events.
      */
     items;
     hint;
@@ -10513,7 +10769,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Holds the main content of the TileLayoutItem component.
+ * Contains the main content of the `TileLayoutItem` component.
+ *
+ * @example
+ * ```html
+ * <kendo-tilelayout-item>
+ *   <kendo-tilelayout-item-body>
+ *     <p>Main content goes here</p>
+ *   </kendo-tilelayout-item-body>
+ * </kendo-tilelayout-item>
+ * ```
  */
 class TileLayoutItemBodyComponent {
     hostClass = true;
@@ -10642,7 +10907,23 @@ const validateGridLayoutRowsCols = (arr) => {
 };
 
 /**
- * Represents the [Kendo UI GridLayout component for Angular]({% slug overview_gridlayout %}).
+ * Represents the Kendo UI GridLayout component for Angular.
+ * Arranges child components in a two-dimensional grid layout with customizable rows, columns, and gaps ([see overview]({% slug overview_gridlayout %})).
+ *
+ * @example
+ * ```html
+ * <kendo-gridlayout [rows]="[100, 200]" [cols]="['1fr', '2fr']" [gap]="10">
+ *   <kendo-gridlayout-item [row]="1" [col]="1">
+ *     <p>Item 1</p>
+ *   </kendo-gridlayout-item>
+ *   <kendo-gridlayout-item [row]="1" [col]="2">
+ *     <p>Item 2</p>
+ *   </kendo-gridlayout-item>
+ * </kendo-gridlayout>
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link GridLayoutItemComponent}.
  */
 class GridLayoutComponent {
     renderer;
@@ -10656,31 +10937,22 @@ class GridLayoutComponent {
      * Specifies the number of rows and their height
      * ([More details](slug:layout_gridlayout#toc-rows-and-columns)).
      *
-     * Accepts an array, which serves two purposes:
-     *
-     * The number of elements in the array defines the number of rows.
-     * Each array element defines the size of the corresponding row. The possible array values are:
-     * * `number` - Defines the size in pixels.
-     * * `string` - Enables the usage of arbitrary units e.g. `20%` or `auto`.
-     * * [GridLayoutRowSize]({% slug api_layout_gridlayoutrowsize %}) - Configuration object, which accepts a `height` key.
+     * You can define rows by passing an array where the number of elements determines the number of rows or each element defines the size of the corresponding row.
+     * For example, you can use CSS units like `px`, `%`, `fr`, or `auto` to define the row sizes.
      */
     rows;
     /**
      * Specifies the number of columns and their widths
      * ([More details](slug:layout_gridlayout#toc-rows-and-columns)).
      *
-     * Accepts an array, which serves two purposes:
-     *
-     * The number of elements in the array defines the number of columns.
-     * Each array element defines the size of the corresponding column. The possible array values are:
-     * * `number` - Defines the size in pixels.
-     * * `string` - Enables the usage of arbitrary units e.g. `20%` or `auto`.
-     * * [GridLayoutColSize]({% slug api_layout_gridlayoutcolsize %}) - Configuration object, which accepts a `width` key.
+     * You can define columns by passing an array where the number of elements determines the number of columns or each element defines the size of the corresponding column.
+     * For example, you can use CSS units like `px`, `%`, `fr`, or `auto` to define the column sizes.
      */
     cols;
     /**
-     * Specifies the gaps between the elements. The default value is `0`
-     * ([see example](slug:layout_gridlayout#toc-gap)).
+     * Specifies the gaps between the elements ([see example](slug:layout_gridlayout#toc-gap)).
+     *
+     * @default 0
      */
     gap = 0;
     /**
@@ -10801,6 +11073,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Represents the GridLayout item component. Defines the positioning and spanning of individual items within a GridLayout.
+ *
+ * @example
+ * ```html
+ * <kendo-gridlayout-item [row]="1" [col]="2" [rowSpan]="2" [colSpan]="1">
+ *   <div>Grid item content</div>
+ * </kendo-gridlayout-item>
+ * ```
+ */
 class GridLayoutItemComponent {
     renderer;
     element;
@@ -10815,13 +11097,15 @@ class GridLayoutItemComponent {
      */
     col;
     /**
-     * Determines how many rows will the item span. The default size is one row
-     * ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
+     * Specifies how many rows the item spans ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
+     *
+     * @default 1
      */
     rowSpan;
     /**
-     * Determines how many columns will the item span. The default size is one column
-     * ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
+     * Specifies how many columns the item spans ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
+     *
+     * @default 1
      */
     colSpan;
     constructor(renderer, element) {
@@ -10867,7 +11151,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Represents the [Kendo UI StackLayout component for Angular]({% slug overview_stacklayout %}).
+ * Represents the Kendo UI StackLayout component for Angular.
+ * Arranges child components in a single row or column with customizable alignment and spacing ([see overview]({% slug overview_stacklayout %})).
+ *
+ * @example
+ * ```html
+ * <kendo-stacklayout orientation="horizontal" [gap]="16">
+ *   <button class="k-button">Button 1</button>
+ *   <button class="k-button">Button 2</button>
+ *   <button class="k-button">Button 3</button>
+ * </kendo-stacklayout>
+ * ```
  */
 class StackLayoutComponent {
     renderer;
@@ -10895,17 +11189,16 @@ class StackLayoutComponent {
         return this._align;
     }
     /**
-     * Specifies the gap between the inner StackLayout elements. The default value is `0`
-     * ([see example](slug:layout_stacklayout#toc-gap)).
+     * Specifies the gap between the inner StackLayout elements ([see example](slug:layout_stacklayout#toc-gap)).
+     *
+     * @default 0
      */
     gap = 0;
     /**
      * Specifies the orientation of the StackLayout
      * ([see example]({% slug layout_stacklayout %}#toc-orientation)).
      *
-     * The possible values are:
-     * (Default) `horizontal`
-     * `vertical`
+     * @default 'horizontal'
      */
     orientation = 'horizontal';
     _align = {
@@ -11073,8 +11366,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * with the `kendoTimelineCardActionsTemplate` directive inside the `<kendo-timeline>` tag.
  *
  * The following values are available as context variables:
- * - `let-event="event"` (`TimelineEvent`) - The current card's event. Also available as implicit context variable.
- * - `let-index="index"` (`number`) - The current event index.
+ * - `let-event="event"` (`TimelineEvent`)&mdash;The current card's event. Also available as implicit context variable.
+ * - `let-index="index"` (`number`)&mdash;The current event index.
+ *
+ * @example
+ * ```html
+ * <kendo-timeline [events]="events">
+ *   <ng-template kendoTimelineCardActionsTemplate let-event let-index="index">
+ *     Content for the actions of the card with index {{ index }} and event {{ event.title }}.
+ *   </ng-template>
+ * </kendo-timeline>
+ * ```
  */
 class TimelineCardActionsTemplateDirective {
     templateRef;
@@ -11099,8 +11401,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * with the `kendoTimelineCardBodyTemplate` directive inside the `<kendo-timeline>` tag.
  *
  * The following values are available as context variables:
- * - `let-event="event"` (`TimelineEvent`) - The current card's event. Also available as implicit context variable.
- * - `let-index="index"` (`number`) - The current event index.
+ * - `let-event="event"` (`TimelineEvent`)&mdash;The current card's event. Also available as implicit context variable.
+ * - `let-index="index"` (`number`)&mdash;The current event index.
+ *
+ * @example
+ * ```html
+ * <kendo-timeline [events]="events">
+ *   <ng-template kendoTimelineCardBodyTemplate let-event let-index="index">
+ *     Component for the body of the card with index {{ index }} and event {{ event.title }}.
+ *   </ng-template>
+ * </kendo-timeline>
+ * ```
  */
 class TimelineCardBodyTemplateDirective {
     templateRef;
@@ -11125,8 +11436,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * with the `kendoTimelineCardHeaderTemplate` directive inside the `<kendo-timeline>` tag.
  *
  * The following values are available as context variables:
- * - `let-event="event"` (`TimelineEvent`) - The current card's event. Also available as implicit context variable.
- * - `let-index="index"` (`number`) - The current event index.
+ * - `let-event="event"` (`TimelineEvent`)&mdash;The current card's event. Also available as implicit context variable.
+ * - `let-index="index"` (`number`)&mdash;The current event index.
+ *
+ * @example
+ * ```html
+ * <kendo-timeline [events]="events">
+ *   <ng-template kendoTimelineCardHeaderTemplate let-event let-index="index">
+ *     <span class="k-event-title">Title: {{ event.title }}</span>
+ *     <div kendoCardSubtitle>Event number {{ index }}</div>
+ *   </ng-template>
+ * </kendo-timeline>
+ * ```
  */
 class TimelineCardHeaderTemplateDirective {
     templateRef;
@@ -12572,6 +12893,9 @@ const DEFAULT_EVENT_HEIGHT = 600;
 const DEFAULT_DATE_FORMAT = 'MMMM dd, yyyy';
 /**
  * Represents the [Kendo UI Timeline component for Angular]({% slug overview_timeline %}).
+ *
+ * @remarks
+ * Supported children components are: {@link TimelineCustomMessagesComponent}.
  */
 class TimelineComponent {
     timelineService;
@@ -13005,14 +13329,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Utility array that contains all `Avatar` related components and directives.
+ * Use the `KENDO_AVATAR` utility array to add all Avatar-related components and directives to a standalone Angular component.
  */
 const KENDO_AVATAR = [
     AvatarComponent,
     AvatarCustomMessagesComponent
 ];
 /**
- * Utility array that contains all `Card` related components and directives.
+ * Use the `KENDO_CARD` utility array to add all Card-related components and directives to a standalone Angular component.
  */
 const KENDO_CARD = [
     CardComponent,
@@ -13026,7 +13350,7 @@ const KENDO_CARD = [
     CardTitleDirective
 ];
 /**
- * Utility array that contains all `Drawer` related components and directives.
+ * Use the `KENDO_DRAWER` utility array to add all Drawer-related components and directives to a standalone Angular component.
  */
 const KENDO_DRAWER = [
     DrawerComponent,
@@ -13038,21 +13362,21 @@ const KENDO_DRAWER = [
     DrawerItemTemplateDirective
 ];
 /**
- * Utility array that contains all `ExpansionPanel` related components and directives.
+ * Use the `KENDO_EXPANSIONPANEL` utility array to add all ExpansionPanel-related components and directives to a standalone Angular component.
  */
 const KENDO_EXPANSIONPANEL = [
     ExpansionPanelComponent,
     ExpansionPanelTitleDirective
 ];
 /**
- * Utility array that contains all `GridLayout` related components and directives.
+ * Use the `KENDO_GRIDLAYOUT` utility array to add all GridLayout-related components and directives to a standalone Angular component.
  */
 const KENDO_GRIDLAYOUT = [
     GridLayoutComponent,
     GridLayoutItemComponent
 ];
 /**
- * Utility array that contains all `PanelBar` related components and directives.
+ * Use the `KENDO_PANELBAR` utility array to add all PanelBar-related components and directives to a standalone Angular component.
  */
 const KENDO_PANELBAR = [
     PanelBarComponent,
@@ -13062,20 +13386,20 @@ const KENDO_PANELBAR = [
     PanelBarItemTitleDirective
 ];
 /**
- * Utility array that contains all `Splitter` related components and directives.
+ * Use the `KENDO_SPLITTER` utility array to add all Splitter-related components and directives to a standalone Angular component.
  */
 const KENDO_SPLITTER = [
     SplitterComponent,
     SplitterPaneComponent
 ];
 /**
- * Utility array that contains all `StackLayout` related components and directives.
+ * Use the `KENDO_STACKLAYOUT` utility array to add all StackLayout-related components and directives to a standalone Angular component.
  */
 const KENDO_STACKLAYOUT = [
     StackLayoutComponent
 ];
 /**
- * Utility array that contains all `Stepper` related components and directives.
+ * Use the `KENDO_STEPPER` utility array to add all Stepper-related components and directives to a standalone Angular component.
  */
 const KENDO_STEPPER = [
     StepperComponent,
@@ -13085,7 +13409,7 @@ const KENDO_STEPPER = [
     StepperStepTemplateDirective
 ];
 /**
- * Utility array that contains all `TabStrip` related components and directives.
+ * Use the `KENDO_TABSTRIP` utility array to add all TabStrip-related components and directives to a standalone Angular component.
  */
 const KENDO_TABSTRIP = [
     TabStripComponent,
@@ -13095,7 +13419,7 @@ const KENDO_TABSTRIP = [
     TabStripCustomMessagesComponent
 ];
 /**
- * Utility array that contains all `TileLayout` related components and directives.
+ * Use the `KENDO_TILELAYOUT` utility array to add all TileLayout-related components and directives to a standalone Angular component.
  */
 const KENDO_TILELAYOUT = [
     TileLayoutComponent,
@@ -13104,7 +13428,7 @@ const KENDO_TILELAYOUT = [
     TileLayoutItemHeaderComponent
 ];
 /**
- * Utility array that contains all `Timeline` related components and directives
+ * Use the `KENDO_TIMELINE` utility array to add all Timeline-related components and directives to a standalone Angular component.
  */
 const KENDO_TIMELINE = [
     TimelineComponent,
@@ -13114,7 +13438,7 @@ const KENDO_TIMELINE = [
     TimelineCardHeaderTemplateDirective
 ];
 /**
- * Utility array that contains all `@progress/kendo-angular-layout` related components and directives.
+ * Use the `KENDO_LAYOUT` utility array to add all `@progress/kendo-angular-layout`-related components and directives to a standalone Angular component.
  */
 const KENDO_LAYOUT = [
     ...KENDO_AVATAR,
@@ -13133,8 +13457,20 @@ const KENDO_LAYOUT = [
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the Avatar component.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the Avatar component.
+ *
+ * Use this module to add the Avatar component to your NgModule-based Angular application.
+ *
+ * @example
+ * ```typescript
+ * import { AvatarModule } from '@progress/kendo-angular-layout';
+ * import { NgModule } from '@angular/core';
+ *
+ * @NgModule({
+ *   imports: [AvatarModule]
+ * })
+ * export class AppModule { }
+ * ```
  */
 class AvatarModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -13151,8 +13487,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the Card component.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the Card component.
+ *
+ * Use this module to add the Card component to your NgModule-based Angular application.
+ *
+ * @example
+ * ```typescript
+ * import { CardModule } from '@progress/kendo-angular-layout';
+ * import { NgModule } from '@angular/core';
+ *
+ * @NgModule({
+ *   imports: [CardModule]
+ * })
+ * export class AppModule { }
+ * ```
  */
 class CardModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -13169,8 +13517,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the Drawer component.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the Drawer component.
+ *
+ * Use this module to add the Drawer component to your NgModule-based Angular application.
+ *
+ * @example
+ * ```typescript
+ * import { DrawerModule } from '@progress/kendo-angular-layout';
+ * import { NgModule } from '@angular/core';
+ *
+ * @NgModule({
+ *   imports: [DrawerModule]
+ * })
+ * export class AppModule { }
+ * ```
  */
 class DrawerModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -13187,34 +13547,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the Layout components.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the Layout components.
  *
- * @example
+ * Use this module to add all Layout package components to your NgModule-based Angular application.
  *
- * ```ts-no-run
- * // Import the Layout module
+ * @example
+ * ```typescript
  * import { LayoutModule } from '@progress/kendo-angular-layout';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
+ * import { BrowserModule } from '@angular/platform-browser';
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, LayoutModule], // import Layout module
- *     bootstrap:    [AppComponent]
+ * @NgModule({
+ *   declarations: [AppComponent],
+ *   imports: [BrowserModule, LayoutModule],
+ *   bootstrap: [AppComponent]
  * })
- * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
+ * export class AppModule { }
  * ```
  */
 class LayoutModule {
@@ -13232,15 +13581,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the PanelBar component.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the PanelBar component.
  *
- * The module registers:
- * - `PanelBarComponent`&mdash;The `PanelBar` component class.
- * - `PanelBarItemComponent`&mdash;The `PanelBarItem` component class.
- * - `PanelBarContentComponent`&mdash;The `PanelBarContent` component class.
- * - `PanelBarItemTemplateDirective&mdash;The `PanelBarItemTemplate` directive.
- * - `PanelBarItemTitleDirective&mdash;The `PanelBarItemTitle` directive.
+ * Use this module to add the PanelBar component to your NgModule-based Angular application.
+ *
+ * @example
+ * ```typescript
+ * import { PanelBarModule } from '@progress/kendo-angular-layout';
+ * import { NgModule } from '@angular/core';
+ *
+ * @NgModule({
+ *   imports: [PanelBarModule]
+ * })
+ * export class AppModule { }
+ * ```
  */
 class PanelBarModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -13257,12 +13611,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the Splitter component.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the Splitter component.
+ *
+ * Use this module to add the Splitter component to your NgModule-based Angular application.
+ *
+ * @example
+ * ```typescript
+ * import { SplitterModule } from '@progress/kendo-angular-layout';
+ * import { NgModule } from '@angular/core';
  *
- * The module registers:
- * - `SplitterComponent`&mdash;The `Splitter` component class.
- * - `SplitterPaneComponent`&mdash;The `SplitterPane` component class.
+ * @NgModule({
+ *   imports: [SplitterModule]
+ * })
+ * export class AppModule { }
+ * ```
  */
 class SplitterModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -13279,8 +13641,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the Stepper component.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the Stepper component.
+ *
+ * Use this module to add the Stepper component to your NgModule-based Angular application.
+ *
+ * @example
+ * ```typescript
+ * import { StepperModule } from '@progress/kendo-angular-layout';
+ * import { NgModule } from '@angular/core';
+ *
+ * @NgModule({
+ *   imports: [StepperModule]
+ * })
+ * export class AppModule { }
+ * ```
  */
 class StepperModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -13297,14 +13671,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the TabStrip component.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the TabStrip component.
  *
- * The module registers:
- * - `TabStripComponent`&mdash;The `TabStrip` component class.
- * - `TabStripTabComponent`&mdash;The `TabStripTab` component class.
- * - `TabContentDirective`&mdash;The tab content directive used on the `<ng-template>` tag.
- * - `TabTitleDirective`&mdash;The tab title directive used on the `<ng-template>` tag.
+ * Use this module to add the TabStrip component to your NgModule-based Angular application.
+ *
+ * @example
+ * ```typescript
+ * import { TabStripModule } from '@progress/kendo-angular-layout';
+ * import { NgModule } from '@angular/core';
+ *
+ * @NgModule({
+ *   imports: [TabStripModule]
+ * })
+ * export class AppModule { }
+ * ```
  */
 class TabStripModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -13321,8 +13701,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the ExpansionPanel component.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the ExpansionPanel component.
+ *
+ * Use this module to add the ExpansionPanel component to your NgModule-based Angular application.
+ *
+ * @example
+ * ```typescript
+ * import { ExpansionPanelModule } from '@progress/kendo-angular-layout';
+ * import { NgModule } from '@angular/core';
+ *
+ * @NgModule({
+ *   imports: [ExpansionPanelModule]
+ * })
+ * export class AppModule { }
+ * ```
  */
 class ExpansionPanelModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExpansionPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -13339,14 +13731,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the TileLayout component.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the TileLayout component.
+ *
+ * Use this module to add the TileLayout component to your NgModule-based Angular application.
+ *
+ * @example
+ * ```typescript
+ * import { TileLayoutModule } from '@progress/kendo-angular-layout';
+ * import { NgModule } from '@angular/core';
  *
- * The module registers:
- * - `TileLayoutComponent`&mdash;The `TileLayoutComponent` component class.
- * - `TileLayoutItemComponent`&mdash;The `TileLayoutItemComponent` component class.
- * - `TileLayoutItemHeaderComponent`&mdash;The `TileLayoutItemHeaderComponent` component class.
- * - `TileLayoutItemBodyComponent`&mdash;The `TileLayoutItemBodyComponent` component class.
+ * @NgModule({
+ *   imports: [TileLayoutModule]
+ * })
+ * export class AppModule { }
+ * ```
  */
 class TileLayoutModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -13363,8 +13761,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the StackLayout component.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the StackLayout component.
+ *
+ * Use this module to add the StackLayout component to your NgModule-based Angular application.
+ *
+ * @example
+ * ```typescript
+ * import { StackLayoutModule } from '@progress/kendo-angular-layout';
+ * import { NgModule } from '@angular/core';
+ *
+ * @NgModule({
+ *   imports: [StackLayoutModule]
+ * })
+ * export class AppModule { }
+ * ```
  */
 class StackLayoutModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StackLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -13381,8 +13791,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the GridLayout component.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the GridLayout component.
+ *
+ * Use this module to add the GridLayout component to your NgModule-based Angular application.
+ *
+ * @example
+ * ```typescript
+ * import { GridLayoutModule } from '@progress/kendo-angular-layout';
+ * import { NgModule } from '@angular/core';
+ *
+ * @NgModule({
+ *   imports: [GridLayoutModule]
+ * })
+ * export class AppModule { }
+ * ```
  */
 class GridLayoutModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -13399,11 +13821,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the Timeline component.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the Timeline component.
  *
- * The module registers:
- * - `TimelineComponent`&mdash;The `TimelineComponent` component class.
+ * Use this module to add the Timeline component to your NgModule-based Angular application.
+ *
+ * @example
+ * ```typescript
+ * import { TimelineModule } from '@progress/kendo-angular-layout';
+ * import { NgModule } from '@angular/core';
+ *
+ * @NgModule({
+ *   imports: [TimelineModule]
+ * })
+ * export class AppModule { }
+ * ```
  */
 class TimelineModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });