@progress/kendo-angular-buttons 19.1.1-develop.2 → 19.1.1

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

@@ -44,8 +44,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1749196463,
-    version: '19.1.1-develop.2',
+    publishDate: 1749539933,
+    version: '19.1.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -155,7 +155,12 @@ const DEFAULT_FILL_MODE$3 = 'solid';
  * Represents the Kendo UI Button component for Angular.
  *
  * As of package v17, the `span[kendoButton]` and `kendo-button` selectors are removed.
- * Please use the `button[kendoButton]` selector only.
+ * Use the `button[kendoButton]` selector only.
+ *
+ * @example
+ * ```html
+ * <button kendoButton [icon]="'save'" [themeColor]="'primary'">Save</button>
+ * ```
  */
 class ButtonComponent {
     renderer;
@@ -168,7 +173,7 @@ class ButtonComponent {
      */
     arrowIcon = false;
     /**
-     * Provides visual styling that indicates if the Button is active.
+     * Adds visual styling to indicate when the Button is active.
      *
      * @default false
      */
@@ -189,6 +194,7 @@ class ButtonComponent {
     }
     /**
      * Sets the selected state of the Button.
+     * Use with the `toggleable` property.
      *
      * @default false
      */
@@ -208,13 +214,12 @@ class ButtonComponent {
         return this.element.tabIndex;
     }
     /**
-     * Defines a URL which is used for an `img` element inside the Button.
+     * Specifies a URL for an `img` element inside the Button.
      * The URL can be relative or absolute. If relative, it is evaluated with relation to the web page URL.
      */
     imageUrl;
     /**
-     * Defines a CSS class&mdash;or multiple classes separated by spaces&mdash;
-     * which are applied to a `span` element inside the Button. Allows the usage of custom icons.
+     * Defines a CSS class, or multiple classes separated by spaces applied to a `span` element inside the Button. Use the `iconClass` to add custom icons.
      */
     set iconClass(value) {
         if (isDevMode() && value && (this.icon || this.svgIcon)) {
@@ -226,7 +231,7 @@ class ButtonComponent {
         return this._iconClass;
     }
     /**
-     * Defines the name for an existing font icon in the Kendo UI theme.
+     * Sets the name of an existing font icon in the Kendo UI theme.
      */
     set icon(name) {
         if (isDevMode() && name && this.iconClass) {
@@ -238,7 +243,7 @@ class ButtonComponent {
         return this._icon;
     }
     /**
-     * If set to `true`, it disables the Button.
+     * When `true`, disables the Button and prevents user interaction.
      *
      * @default false
      */
@@ -254,8 +259,8 @@ class ButtonComponent {
         return this.isDisabled;
     }
     /**
-     * The size property specifies the padding of the Button
-     * ([see example]({% slug appearance_button %}#toc-size)).
+     * Sets the padding of the Button.
+     * See [Button Appearance]({% slug appearance_button %}#size).
      *
      * @default 'medium'
      */
@@ -268,8 +273,8 @@ class ButtonComponent {
         return this._size;
     }
     /**
-     * The rounded property specifies the border radius of the Button
-     * ([see example](slug:appearance_button#toc-roundness)).
+     * Sets the border radius of the Button.
+     * See [Button Appearance](slug:appearance_button#roundness).
      *
      * @default 'medium'
      */
@@ -282,8 +287,8 @@ class ButtonComponent {
         return this._rounded;
     }
     /**
-     * The fillMode property specifies the background and border styles of the Button
-     * ([see example](slug:appearance_button#toc-fill-mode)).
+     * Sets the background and border styles of the Button.
+     * See [Button Appearance](slug:appearance_button#fill-mode).
      *
      * @default 'solid'
      */
@@ -296,9 +301,9 @@ class ButtonComponent {
         return this._fillMode;
     }
     /**
-     * The Button allows you to specify predefined theme colors.
-     * The theme color will be applied as a background and border color while also amending the text color accordingly
-     * ([see example](slug:appearance_button#toc-theme-colors)).
+     * Sets a predefined theme color for the Button.
+     * The theme color applies as a background and border color and adjusts the text color.
+     * See [Button Appearance](slug:appearance_button#theme-colors).
      *
      * @default 'base'
      */
@@ -311,7 +316,7 @@ class ButtonComponent {
         return this._themeColor;
     }
     /**
-     * Defines an SVGIcon to be rendered within the button.
+     * Sets an SVG icon to display inside the Button.
      */
     set svgIcon(icon) {
         if (isDevMode() && icon && this.iconClass) {
@@ -323,13 +328,12 @@ class ButtonComponent {
         return this._svgIcon;
     }
     /**
-     * Fires each time the selected state of a toggleable button is changed.
-     *
-     * The event argument is the new selected state (boolean).
+     * Fires when the selected state of a toggleable button changes.
+     * The event argument is the new selected state (`boolean`).
      */
     selectedChange = new EventEmitter();
     /**
-     * Fires each time the user clicks the button.
+     * Fires when the user clicks the Button.
      */
     click = new EventEmitter();
     element;
@@ -466,7 +470,7 @@ class ButtonComponent {
         }
     }
     /**
-     * Blurs the Button component.
+     * Removes focus from the Button component.
      */
     blur() {
         if (isDocumentAvailable()) {
@@ -580,7 +584,7 @@ class ButtonComponent {
                 [name]="$any(arrowIcon).icon || 'caret-alt-down'"
                 [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
         </span>
-        
+
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, decorators: [{
@@ -612,7 +616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [name]="$any(arrowIcon).icon || 'caret-alt-down'"
                 [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
         </span>
-        
+
     `,
                     standalone: true,
                     imports: [NgIf, IconWrapperComponent, NgClass]
@@ -709,34 +713,38 @@ class PreventableEvent {
 const tabindex = 'tabindex';
 /**
  * Represents the Kendo UI ButtonGroup component for Angular.
+ *
+ * @example
+ * ```html
+ * <kendo-buttongroup>
+ *   <button kendoButton>Left</button>
+ *   <button kendoButton>Middle</button>
+ *   <button kendoButton>Right</button>
+ * </kendo-buttongroup>
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link ButtonComponent}.
  */
 class ButtonGroupComponent {
     service;
     renderer;
     element;
     /**
-     * By default, the ButtonGroup is enabled.
-     * To disable the whole group of buttons, set its `disabled` attribute to `true`.
-     *
-     * To disable a specific button, set its own `disabled` attribute to `true`
-     * and leave the `disabled` attribute of the ButtonGroup undefined.
-     * If you define the `disabled` attribute of the ButtonGroup, it will take
-     * precedence over the `disabled` attributes of the underlying buttons and they will be ignored.
-     *
-     * For more information on how to configure the Button, refer to
-     * its [API documentation]({% slug api_buttons_buttoncomponent %}).
+     * To disable a specific button, set **only** its `disabled` property to `true`.
+     * If you also set the ButtonGroup `disabled` property, it takes precedence over
+     * the `disabled` properties of the underlying buttons and they are ignored.
      */
     disabled;
     /**
-     * The selection mode of the ButtonGroup.
+     * Sets the selection mode of the ButtonGroup.
+     *
      * @default 'multiple'
      */
     selection = 'multiple';
     /**
      * Sets the width of the ButtonGroup.
-     * If the width of the ButtonGroup is set:
-     * - The buttons resize automatically to fill the full width of the group wrapper.
-     * - The buttons acquire the same width.
+     * When set, the buttons resize automatically to fill the full width of the group wrapper and acquire the same width.
      */
     width;
     /**
@@ -750,16 +758,16 @@ class ButtonGroupComponent {
         return this._tabIndex;
     }
     /**
-     * When this option is set to `true` (default), the component is a single tab-stop,
-     * and focus is moved through the inner buttons via the arrow keys.
+     * When set to `true`, the component is a single tab-stop,
+     * and focus moves through the inner buttons using the arrow keys.
      *
-     * When the option is set to `false`, the inner buttons are part of the natural tab sequence of the page.
+     * When set to `false`, the inner buttons are part of the natural tab sequence of the page.
      *
      * @default true
      */
     navigable = true;
     /**
-     * Fires every time keyboard navigation occurs.
+     * Fires every time keyboard navigation occurs within the ButtonGroup.
      */
     navigate = new EventEmitter();
     buttons;
@@ -1026,7 +1034,12 @@ const DEFAULT_ROUNDED$2 = 'medium';
 const DEFAULT_THEME_COLOR$1 = 'base';
 const DEFAULT_FILL_MODE$2 = 'solid';
 /**
- * Displays a Chip that represents an input, attribute or an action.
+ * Displays a Chip that represents an input, attribute, or action.
+ *
+ * @example
+ * ```html
+ * <kendo-chip label="Chip Label"></kendo-chip>
+ * ```
  */
 class ChipComponent {
     element;
@@ -1043,14 +1056,13 @@ class ChipComponent {
      */
     icon;
     /**
-     * Defines an [`SVGIcon`](slug:api_icons_svgicon) icon to be rendered inside the Chip using
+     * Defines an [`SVGIcon`](slug:api_icons_svgicon) to render inside the Chip using
      * a [`KendoSVGIcon`](slug:api_icons_svgiconcomponent) component.
      */
     svgIcon;
     /**
-     * Defines a CSS class — or multiple classes separated by spaces —
-     * which are applied to a span element.
-     * Allows the usage of custom icons.
+     * Defines a CSS class, or multiple classes separated by spaces,
+     * applied to a `span` element. Use the `iconClass` to add custom icons.
      */
     iconClass;
     /**
@@ -1063,18 +1075,18 @@ class ChipComponent {
      */
     selected = false;
     /**
-     * Specifies if the Chip will be removable or not.
-     * If the property is set to `true`, the Chip renders a remove icon.
+     * Specifies if the Chip is removable.
+     * If set to `true`, the Chip renders a remove icon.
      * @default false
      */
     removable = false;
     /**
-     * Specifies a custom remove font icon class that will be rendered when the Chip is removable.
+     * Specifies a custom remove font icon class to render when the Chip is removable.
      * [see example]({% slug icons %})
      */
     removeIcon;
     /**
-     * Specifies a custom remove SVG icon that will be rendered when the Chip is removable.
+     * Specifies a custom remove SVG icon to render when the Chip is removable.
      */
     removeSvgIcon;
     /**
@@ -1086,29 +1098,25 @@ class ChipComponent {
     /**
      * @hidden
      *
-     * Specifies a custom menu font icon class that will be rendered when the Chip has menu.
+     * Specifies a custom menu font icon class to render when the Chip has a menu.
      */
     menuIcon;
     /**
      * @hidden
      *
-     * Specifies a custom menu SVG icon that will be rendered when the Chip has menu.
+     * Specifies a custom menu SVG icon to render when the Chip has a menu.
      */
     menuSvgIcon;
     /**
-     * If set to `true`, the Chip will be disabled.
+     * If set to `true`, the Chip is disabled.
      * @default false
      */
     disabled = false;
     /**
-     * The size property specifies the padding of the Chip
-     * ([see example]({% slug appearance_chip %}#toc-size)).
+     * Sets the padding of the Chip.
+     * See [Chip Appearance]({% slug appearance_chip %}#size).
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * @default 'medium'
      */
     set size(size) {
         const newSize = size ? size : DEFAULT_SIZE$1;
@@ -1120,15 +1128,10 @@ class ChipComponent {
         return this._size;
     }
     /**
-     * The rounded property specifies the border radius of the Chip
-     * ([see example](slug:appearance_chip#toc-roundness)).
+     * Sets the border radius of the Chip.
+     * See [Chip Appearance](slug:appearance_chip#roundness).
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `full`
-     * * `none`
+     * @default 'medium'
      */
     set rounded(rounded) {
         const newRounded = rounded ? rounded : DEFAULT_ROUNDED$2;
@@ -1139,13 +1142,10 @@ class ChipComponent {
         return this._rounded;
     }
     /**
-     * The fillMode property specifies the background and border styles of the Chip
-     * ([see example](slug:appearance_chip#toc-fill-mode)).
+     * Sets the background and border styles of the Chip.
+     * See [Chip Appearance](slug:appearance_chip#fill-mode).
      *
-     * The possible values are:
-     * * `solid` (default)
-     * * `outline`
-     * * `none`
+     * @default 'solid'
      */
     set fillMode(fillMode) {
         const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$2;
@@ -1156,17 +1156,11 @@ class ChipComponent {
         return this._fillMode;
     }
     /**
-     * The Chip allows you to specify predefined theme colors.
-     * The theme color will be applied as a background and border color while also amending the text color accordingly
-     * ([see example](slug:appearance_chip#toc-theme-colors)).
+     * Sets a predefined theme color for the Chip.
+     * The theme color applies as a background and border color and adjusts the text color.
+     * See [Chip Appearance](slug:appearance_chip#theme-colors).
      *
-     * The possible values are:
-     * * `base` (default)
-     * * `info`
-     * * `success`
-     * * `warning`
-     * * `error`
-     * * `none`
+     * @default 'base'
      */
     set themeColor(themeColor) {
         const newThemeColor = themeColor ? themeColor : DEFAULT_THEME_COLOR$1;
@@ -1177,17 +1171,17 @@ class ChipComponent {
         return this._themeColor;
     }
     /**
-     * Fires each time the user clicks the remove icon of the Chip.
+     * Fires when the user clicks the remove icon of the Chip.
      */
     remove = new EventEmitter();
     /**
      * @hidden
      *
-     * Fires each time the user clicks the menu icon of the Chip.
+     * Fires when the user clicks the menu icon of the Chip.
      */
     menuToggle = new EventEmitter();
     /**
-     * Fires each time the user clicks the content of the Chip.
+     * Fires when the user clicks the content of the Chip.
      */
     contentClick = new EventEmitter();
     tabIndex = 0;
@@ -1411,7 +1405,7 @@ class ChipComponent {
                     <img src="{{ avatarSettings.imageSrc }}" [ngStyle]="avatarSettings.imageCssStyle" [attr.alt]="avatarSettings.imageAltText" />
                 </span>
             </ng-container>
-    
+
             <ng-container *ngIf="avatarSettings?.initials">
                 <span class="k-avatar-text" [ngStyle]="avatarSettings.initialsCssStyle">{{ avatarSettings.initials.substring(0, 2) }}</span>
             </ng-container>
@@ -1472,7 +1466,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     <img src="{{ avatarSettings.imageSrc }}" [ngStyle]="avatarSettings.imageCssStyle" [attr.alt]="avatarSettings.imageAltText" />
                 </span>
             </ng-container>
-    
+
             <ng-container *ngIf="avatarSettings?.initials">
                 <span class="k-avatar-text" [ngStyle]="avatarSettings.initialsCssStyle">{{ avatarSettings.initials.substring(0, 2) }}</span>
             </ng-container>
@@ -1582,6 +1576,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['attr.dir']
             }] } });
 
+/**
+ * Represents the Kendo UI ChipList component for Angular. Displays a list of Chip components.
+ *
+ * @example
+ * ```html
+ * <kendo-chiplist selection="multiple">
+ *   <kendo-chip label="Chip 1"></kendo-chip>
+ *   <kendo-chip label="Chip 2"></kendo-chip>
+ * </kendo-chiplist>
+ * ```
+ * @remarks
+ * Supported children components are: {@link ChipComponent}.
+ */
 class ChipListComponent {
     localizationService;
     renderer;
@@ -1596,21 +1603,14 @@ class ChipListComponent {
     /**
      * Sets the selection mode of the ChipList.
      *
-     * The available values are:
-     * * `none` (default)
-     * * `single`
-     * * `multiple`
+     * @default 'none'
      */
     selection = 'none';
     /**
-     * The size property specifies the gap between the Chips in the ChipList
-     * ([see example]({% slug appearance_chiplist %}#toc-size)).
+     * Sets the gap between the Chips in the ChipList.
+     * See [ChipList Appearance]({% slug appearance_chiplist %}#size).
      *
-     * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `none`
+     * @default 'medium'
      */
     set size(size) {
         const sizeValue = size ? size : 'medium';
@@ -1622,11 +1622,11 @@ class ChipListComponent {
         return this._size;
     }
     /**
-     * Fires each time when the ChipList selection is changed.
+     * Fires when the ChipList selection changes.
      */
     selectedChange = new EventEmitter();
     /**
-     * Fires each time the user clicks on the remove icon of the Chip.
+     * Fires when the user clicks the remove icon of a Chip in the ChipList.
      */
     remove = new EventEmitter();
     chips;
@@ -1907,49 +1907,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Used for rendering the list item content.
+ * Renders the list item content.
  *
  * To define the item template, nest a `<ng-template>` tag with the `kendo<ComponentName>ItemTemplate` directive inside the component tag.
  *
- * For the DropDownButton, use the `kendoDropDownButtonItemTemplate` directive.
- * For the SplitButton, use the `kendoSplitButtonItemTemplate` directive.
+ * - Use the `kendoDropDownButtonItemTemplate` directive for the DropDownButton.
+ * - Use the `kendoSplitButtonItemTemplate` directive for the SplitButton.
  *
- * The template context is set to the current component. To get a reference to the current data item, use the `let-dataItem` directive.
+ * The template context is set to the current component. Use the `let-dataItem` directive to reference the current data item.
  *
  * @example
- * ```ts
- * _@Component({
- * selector: 'my-app',
- * template: `
- *  <kendo-splitbutton [data]="listItems">
- *    <ng-template kendoSplitButtonItemTemplate let-dataItem>
- *      <span>{{dataItem}} option</span>
- *    </ng-template>
- *  </kendo-splitbutton>
- *  <kendo-dropdownbutton [data]="listItems">
- *    <ng-template kendoDropDownButtonItemTemplate let-dataItem>
- *      <span>{{dataItem}} option</span>
- *    </ng-template>
- *  </kendo-dropdownbutton>
- * `
- * })
- * class AppComponent {
- *   public listItems: Array<any> = [{
- *      text: 'item1',
- *      icon: 'arrow-rotate-cw',
- *      disabled: false,
- *      click: (dataItem: any) => {
- *          //action
- *      }
- *  }, {
- *      text: 'item2',
- *      icon: 'arrow-rotate-cw',
- *      disabled: false,
- *      click: (dataItem: any) => {
- *          //action
- *      }
- *  }]
- * }
+ * ```html
+ * <kendo-splitbutton [data]="listItems">
+ *   <ng-template kendoSplitButtonItemTemplate let-dataItem>
+ *     <span>{{dataItem}} option</span>
+ *   </ng-template>
+ * </kendo-splitbutton>
+ * <kendo-dropdownbutton [data]="listItems">
+ *   <ng-template kendoDropDownButtonItemTemplate let-dataItem>
+ *     <span>{{dataItem}} option</span>
+ *   </ng-template>
+ * </kendo-dropdownbutton>
  * ```
  *
  * For more examples, refer to the article on the [DropDownButton templates](slug:itemstemplates_dropdownbutton).
@@ -2394,6 +2372,7 @@ class ListButton extends MultiTabStop {
     container;
     /**
      * Sets the disabled state of the DropDownButton.
+     * When `true`, the button is disabled and cannot be interacted with.
      */
     set disabled(value) {
         if (value && this.openState) {
@@ -2406,21 +2385,24 @@ class ListButton extends MultiTabStop {
     }
     /**
      * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     * Determines the order of focus when navigating with the keyboard.
+     *
+     * @default 0
      */
     tabIndex = 0;
     /**
-     * The CSS classes that will be rendered on the main button.
-     * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
+     * The CSS classes applied to the main button.
+     * Supports the same values as [`ngClass`](link:site.data.urls.angular['ngclassapi']).
      */
     buttonClass;
     /**
-     * Fires each time the popup is about to open.
-     * This event is preventable. If you cancel the event, the popup will remain closed.
+     * Fires when the popup is about to open.
+     * This event is preventable. Canceling the event keeps the popup closed.
      */
     open = new EventEmitter();
     /**
-     * Fires each time the popup is about to close.
-     * This event is preventable. If you cancel the event, the popup will remain open.
+     * Fires when the popup is about to close.
+     * This event is preventable. Canceling the event keeps the popup open.
      */
     close = new EventEmitter();
     /**
@@ -2444,12 +2426,6 @@ class ListButton extends MultiTabStop {
     }
     /**
      * Configures the popup of the DropDownButton.
-     *
-     * The available options are:
-     * - `animate: Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
-     * - `popupClass: String`&mdash;Specifies a list of CSS classes that are used to style the popup.
-     * - `appendTo: "root" | "component" | ViewContainerRef`&mdash;Specifies the component to which the popup will be appended.
-     * - `align: "left" | "center" | "right"`&mdash;Specifies the alignment of the popup.
      */
     set popupSettings(settings) {
         this._popupSettings = Object.assign({ animate: true, popupClass: '' }, settings);
@@ -2586,9 +2562,9 @@ class ListButton extends MultiTabStop {
     }
     /**
      * Toggles the visibility of the popup.
-     * If the `toggle` method is used to open or close the popup, the `open` and `close` events will not be fired.
+     * If the `toggle` method is used, the `open` and `close` events are not fired.
      *
-     * @param open - The state of the popup.
+     * @param open - The desired state of the popup.
      */
     toggle(open) {
         if (this.disabled) {
@@ -2802,28 +2778,26 @@ const DEFAULT_FILL_MODE$1 = 'solid';
 /**
  * Represents the Kendo UI DropDownButton component for Angular.
  *
+ * Use the DropDownButton to display a button with a popup list of actions.
+ *
  * @example
  * ```ts
- * _@Component({
- * selector: 'my-app',
- * template: `
- *  <kendo-dropdownbutton [data]="data">
- *    User Settings
- *  </kendo-dropdownbutton>
- * `
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-dropdownbutton [data]="data">
+ *       User Settings
+ *     </kendo-dropdownbutton>
+ *   `
  * })
  * class AppComponent {
- *   public data: Array<any> = [{
- *       text: 'My Profile'
- *   }, {
- *       text: 'Friend Requests'
- *   }, {
- *       text: 'Account Settings'
- *   }, {
- *       text: 'Support'
- *   }, {
- *       text: 'Log Out'
- *   }];
+ *   public data: Array<any> = [
+ *     { text: 'My Profile' },
+ *     { text: 'Friend Requests' },
+ *     { text: 'Account Settings' },
+ *     { text: 'Support' },
+ *     { text: 'Log Out' }
+ *   ];
  * }
  * ```
  */
@@ -2831,35 +2805,33 @@ class DropDownButtonComponent extends ListButton {
     containerService;
     renderer;
     /**
-     * Allows showing the default arrow icon or providing alternative one instead.
+     * Displays the default arrow icon or a custom one.
      * @default false
      */
     arrowIcon = false;
     /**
-     * Defines the name of an existing icon in the Kendo UI theme.
+     * Specifies the name of an existing icon in the Kendo UI theme.
      */
     icon = '';
     /**
-     * Defines an [`SVGIcon`](slug:api_icons_svgicon) to be rendered within the button.
+     * Specifies an [`SVGIcon`](slug:api_icons_svgicon) to render within the button.
      */
     svgIcon;
     /**
-     * Defines the list of CSS classes which are used for styling the Button with custom icons.
+     * Specifies a list of CSS classes for styling the button with custom icons.
      */
     iconClass = '';
     /**
-     * Defines a URL for styling the button with a custom image.
+     * Specifies a URL for styling the button with a custom image.
      */
     imageUrl = '';
     /**
      * Sets the data item field that represents the item text.
-     * If the data contains only primitive values, do not define it.
+     * If the data contains only primitive values, leave this undefined.
      */
     textField;
     /**
-     * Sets or gets the data of the DropDownButton.
-     *
-     * > The data has to be provided in an array-like list.
+     * Sets or gets the data of the DropDownButton. Provide the data as an array-like list.
      */
     set data(data) {
         this._data = data || [];
@@ -2868,38 +2840,18 @@ class DropDownButtonComponent extends ListButton {
         return this._data;
     }
     /**
-     * The size property specifies the padding of the DropDownButton
-     * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-size)).
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * Specifies the padding of the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#size).
+     * @default 'medium'
      */
     size = 'medium';
     /**
-     * The rounded property specifies the border radius of the DropDownButton
-     * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-rounded)).
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `full`
-     * * `none`
+     * Specifies the border radius of the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#roundness).
+     * @default 'medium'
      */
     rounded = 'medium';
     /**
-     * The fillMode property specifies the background and border styles of the DropDownButton
-     * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-fillMode)).
-     *
-     * The available values are:
-     * * `solid` (default)
-     * * `flat`
-     * * `outline`
-     * * `link`
-     * * `none`
+     * Specifies the background and border styles of the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#fill-mode).
+     * @default 'solid'
      */
     set fillMode(fillMode) {
         this._fillMode = fillMode === 'clear' ? 'flat' : fillMode;
@@ -2908,27 +2860,12 @@ class DropDownButtonComponent extends ListButton {
         return this._fillMode;
     }
     /**
-     * The DropDownButton allows you to specify predefined theme colors.
-     * The theme color will be applied as a background and border color while also amending the text color accordingly
-     * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
-     *
-     * The possible values are:
-     * * `base` &mdash;Applies coloring based on the `base` theme color. (default)
-     * * `primary` &mdash;Applies coloring based on the `primary` theme color.
-     * * `secondary`&mdash;Applies coloring based on the `secondary` theme color.
-     * * `tertiary`&mdash; Applies coloring based on the `tertiary` theme color.
-     * * `info`&mdash;Applies coloring based on the `info` theme color.
-     * * `success`&mdash; Applies coloring based on the `success` theme color.
-     * * `warning`&mdash; Applies coloring based on the `warning` theme color.
-     * * `error`&mdash; Applies coloring based on the `error` theme color.
-     * * `dark`&mdash; Applies coloring based on the `dark` theme color.
-     * * `light`&mdash; Applies coloring based on the `light` theme color.
-     * * `inverse`&mdash; Applies coloring based on the `inverse` theme color.
-     * * `none` &mdash;Removes the default CSS class (no class would be rendered).
+     * Specifies predefined theme colors for the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#theme-colors).
+     * @default 'base'
      */
     themeColor = 'base';
     /**
-     * Sets attributes to the main button.
+     * Sets attributes for the main button.
      */
     set buttonAttributes(buttonAttributes) {
         const newButtonAttributes = buttonAttributes ? buttonAttributes : null;
@@ -2939,15 +2876,16 @@ class DropDownButtonComponent extends ListButton {
         return this._buttonAttributes;
     }
     /**
-     * Fires each time the user clicks on a drop-down list item. The event data contains the data item bound to the clicked list item.
+     * Fires when the user clicks a drop-down list item.
+     * The event data contains the data item bound to the clicked list item.
      */
     itemClick = new EventEmitter();
     /**
-     * Fires each time the DropDownButton gets focused.
+     * Fires when the DropDownButton is focused.
      */
     onFocus = new EventEmitter();
     /**
-     * Fires each time the DropDownButton gets blurred.
+     * Fires when the DropDownButton is blurred.
      */
     onBlur = new EventEmitter();
     get focused() {
@@ -3022,7 +2960,7 @@ class DropDownButtonComponent extends ListButton {
         }
     }
     /**
-     * Focuses the DropDownButton component.
+     * Focuses the DropDownButton.
      */
     focus() {
         if (isDocumentAvailable()) {
@@ -3030,7 +2968,7 @@ class DropDownButtonComponent extends ListButton {
         }
     }
     /**
-     * Blurs the DropDownButton component.
+     * Blurs the DropDownButton.
      */
     blur() {
         if (isDocumentAvailable()) {
@@ -3349,10 +3287,18 @@ function closeAnimation(animationSettings) {
 }
 
 /**
- * Represents a template that defines the content of the whole dial item.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoDialItemTemplate` directive inside the `<kendo-floatingactionbutton>` tag
- * ([see example]({% slug templates_floatingactionbutton %}#toc-dial-item-template)).
+ * Represents a template that defines the content of a dial item.
+ * To define the template, nest an `<ng-template>` tag with the `kendoDialItemTemplate` directive inside the `<kendo-floatingactionbutton>` tag
+ *([see example]({% slug templates_floatingactionbutton %}#dial-item-template)).
+ *
+ * @example
+ * ```html
+ * <kendo-floatingactionbutton>
+ *     <ng-template kendoDialItemTemplate let-item="item">
+ *         {{ item.label }}
+ *     </ng-template>
+ * </kendo-floatingactionbutton>
+ * ```
  */
 class DialItemTemplateDirective {
     templateRef;
@@ -3374,9 +3320,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 /**
  * Represents a template that defines the content of the FloatingActionButton.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoFloatingActionButtonTemplate` directive inside the `<kendo-floatingactionbutton>` tag
- * ([see example]({% slug templates_floatingactionbutton %}#toc-floatingactionbutton-template)).
+ * To define the template, nest an `<ng-template>` tag with the `kendoFloatingActionButtonTemplate` directive inside the `<kendo-floatingactionbutton>` tag
+ *
+ * ([see example](slug:templates_floatingactionbutton#floatingactionbutton-template)).
+ *
+ * @example
+ * ```html
+ * <kendo-floatingactionbutton>
+ *     <ng-template kendoFloatingActionButtonTemplate>
+ *         Custom Content
+ *     </ng-template>
+ * </kendo-floatingactionbutton>
+ * ```
  */
 class FloatingActionButtonTemplateDirective {
     templateRef;
@@ -3651,10 +3606,17 @@ const DEFAULT_ROUNDED$1 = 'full';
 const DEFAULT_SIZE = 'medium';
 const DEFAULT_THEME_COLOR = 'primary';
 /**
+ * Represents the Kendo UI FloatingActionButton component for Angular.
+ * Use it to represent the primary or most common action in an application.
  *
- * Represents the [Kendo UI FloatingActionButton component for Angular]({% slug overview_floatingactionbutton %}).
- * Used to specify the primary or the most common action in an application.
- *
+ * @example
+ * ```html
+ * <kendo-floatingactionbutton
+ *     [icon]="'plus'"
+ *     [text]="'Add'"
+ *     [align]="{ horizontal: 'end', vertical: 'bottom' }">
+ * </kendo-floatingactionbutton>
+ * ```
  */
 class FloatingActionButtonComponent {
     renderer;
@@ -3677,22 +3639,8 @@ class FloatingActionButtonComponent {
     dialItemTemplate;
     fabTemplate;
     /**
-     * Specifies the theme color of the FloatingActionButton
-     * ([see example](slug:appearance_floatingactionbutton#toc-theme-colors)).
-     * The theme color will be applied as background color of the component.
-     *
-     * The possible values are:
-     * * `primary` (Default)&mdash;Applies coloring based on the `primary` theme color.
-     * * `secondary`&mdash;Applies coloring based on the `secondary` theme color.
-     * * `tertiary`&mdash; Applies coloring based on the `tertiary` theme color.
-     * * `info`&mdash;Applies coloring based on the `info` theme color.
-     * * `success`&mdash; Applies coloring based on the `success` theme color.
-     * * `warning`&mdash; Applies coloring based on the `warning` theme color.
-     * * `error`&mdash; Applies coloring based on the `error` theme color.
-     * * `dark`&mdash; Applies coloring based on the `dark` theme color.
-     * * `light`&mdash; Applies coloring based on the `light` theme color.
-     * * `inverse`&mdash; Applies coloring based on the `inverse` theme color.
-     * * `none`&mdash; Removes the built in theme color.
+     * Specifies the theme color of the FloatingActionButton ([see example](slug:appearance_floatingactionbutton#theme-colors)).
+     * @default "primary"
      */
     set themeColor(themeColor) {
         const newThemeColor = themeColor ? themeColor : DEFAULT_THEME_COLOR;
@@ -3703,14 +3651,8 @@ class FloatingActionButtonComponent {
         return this._themeColor;
     }
     /**
-     * Specifies the size of the FloatingActionButton
-     * ([see example]({% slug appearance_floatingactionbutton %}#toc-size)).
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (Default)
-     * * `large`
-     * * `none`
+     * Specifies the size of the FloatingActionButton ([see example](slug:appearance_floatingactionbutton#size)).
+     * @default "medium"
      */
     set size(size) {
         const newSize = size ? size : DEFAULT_SIZE;
@@ -3721,14 +3663,9 @@ class FloatingActionButtonComponent {
         return this._size;
     }
     /**
-     * The rounded property specifies the border radius of the FloatingActionButton.
+     * Specifies the border radius of the FloatingActionButton ([see example](slug:appearance_floatingactionbutton#roundness)).
      *
-     * The possible values are:
-     * * `small`
-     * * `medium`
-     * * `large`
-     * * `full` (default)
-     * * `none`
+     * @default "full"
      */
     set rounded(rounded) {
         const newRounded = rounded ? rounded : DEFAULT_ROUNDED$1;
@@ -3740,6 +3677,7 @@ class FloatingActionButtonComponent {
     }
     /**
      * Specifies whether the FloatingActionButton is disabled.
+     * @default false
      */
     set disabled(disabled) {
         this._disabled = disabled;
@@ -3748,15 +3686,8 @@ class FloatingActionButtonComponent {
         return this._disabled;
     }
     /**
-     * Specifies the horizontal and vertical alignment of the FloatingActionButton
-     * ([see example](slug:positioning_floatingactionbutton#toc-alignment)).
-     *
-     * The possible values are:
-     * * `{ horizontal: 'start'|'center'|'end', vertical: 'top'|'middle'|'bottom' }`
-     *
-     * The default value is:
-     * * `{ horizontal: 'end', vertical: 'bottom' }`
-     *
+     * Specifies the alignment of the FloatingActionButton ([see example](slug:positioning_floatingactionbutton#alignment)).
+     * @default { horizontal: 'end', vertical: 'top' }
      */
     set align(align) {
         this._align = Object.assign(this._align, align);
@@ -3765,11 +3696,8 @@ class FloatingActionButtonComponent {
         return this._align;
     }
     /**
-     * Specifies the horizontal and vertical offset position of the FloatingActionButton
-     * ([see example]({% slug positioning_floatingactionbutton %}#toc-offset)).
-     *
-     * * The default value is:
-     * * `{ x: '16px', y: '16px' }`
+     * Specifies the offset position of the FloatingActionButton ([see example]({% slug positioning_floatingactionbutton %}#offset)).
+     * @default { x: '16px', y: '16px' }
      */
     set offset(offset) {
         this._offset = Object.assign(this._offset, offset);
@@ -3779,17 +3707,12 @@ class FloatingActionButtonComponent {
         return this._offset;
     }
     /**
-     * Specifies the positionMode of the FloatingActionButton
-     * ([see example](slug:positioning_floatingactionbutton#toc-position-mode)).
-     *
-     * * The possible values are:
-     * * `absolute`&mdash;Positions the FloatingActionButton absolutely to its first positioned parent element.
-     * * `fixed` (Default)&mdash;Positions the FloatingActionButton relative to the viewport. It always stays in the same place even if the page is scrolled.
+     * Specifies the position mode of the FloatingActionButton ([see example](slug:positioning_floatingactionbutton#position-mode)).
+     * @default "fixed"
      */
     positionMode = 'fixed';
     /**
      * Defines the name of an existing icon in a Kendo UI theme.
-     * If provided, the icon will be rendered inside the FloatingActionButton by a `span.k-icon` element.
      */
     icon;
     /**
@@ -3797,8 +3720,7 @@ class FloatingActionButtonComponent {
      */
     svgIcon;
     /**
-     * Defines a CSS class or multiple classes separated by spaces which are applied to a `span` element.
-     * Allows the usage of custom icons, rendered inside the FloatingActionButton by a `span` element.
+     * Defines a CSS class or multiple classes for custom icons.
      */
     iconClass;
     /**
@@ -3817,46 +3739,37 @@ class FloatingActionButtonComponent {
     text;
     /**
      * Specifies the animation settings of the FloatingActionButton dial items.
-     * ([see example]({% slug dialitems_floatingactionbutton %}#toc-animation)).
-     *
-     * The possible values are:
-     * * Boolean
-     *    * (Default) `true`&mdash;Applies the default [`DialItemAnimation`]({% slug api_buttons_dialitemanimation %}) settings.
-     *    * `false`
-     * * `DialItemAnimation`
-     *    * `duration`&mdash;Specifies the animation duration in milliseconds for each dial item. Defaults to `180ms`.
-     *    * `gap`&mdash;Specifies the animation duration gap in milliseconds after each dial item is animated. Defaults to `90ms`.
+     * @default true
      */
     dialItemAnimation = true;
     /**
      * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the FloatingActionButton.
+     * @default 0
      */
     tabIndex = 0;
     /**
-     * Specifies the collection of the dial items that will be rendered in the FloatingActionButton popup.
+     * Specifies the collection of dial items rendered in the FloatingActionButton popup.
      */
     dialItems = [];
     /**
-     * Fires each time the FloatingActionButton gets blurred.
+     * Fires when the FloatingActionButton is blurred.
      */
     onBlur = new EventEmitter();
     /**
-     * Fires each time the FloatingActionButton gets focused.
+     * Fires when the FloatingActionButton is focused.
      */
     onFocus = new EventEmitter();
     /**
-     * Fires each time a dial item is clicked.
+     * Fires when a dial item is clicked.
      */
     dialItemClick = new EventEmitter();
     /**
-     * Fires each time the popup is about to open.
-     * This event is preventable. If you cancel the event, the popup will remain closed
-     * ([more information and example](slug:events_floatingactionbutton)).
+     * Fires when the popup is about to open. This event is preventable
+     *  ([more information and example](slug:events_floatingactionbutton)).
      */
     open = new EventEmitter();
     /**
-     * Fires each time the popup is about to close.
-     * This event is preventable. If you cancel the event, the popup will remain open
+     * Fires when the popup is about to close. This event is preventable
      * ([more information and example](slug:events_floatingactionbutton)).
      */
     close = new EventEmitter();
@@ -4578,25 +4491,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class Messages extends ComponentMessages {
     /**
-     * The text for the SplitButton aria-label.
+     * Specifies the text for the SplitButton `aria-label`.
      *
-     * The text for the aria-label consists of a two-part message - the text of the SplitButton and a localizable string.
-     * For a SplitButton with text 'Reply', the default aria-label will be 'Reply splitbutton'.
+     * The `aria-label` text consists of two parts: the SplitButton text and a localizable string.
+     * For example, for a SplitButton with the text `'Reply'`, the default `aria-label` is `'Reply splitbutton'`.
      *
-     * To allow reordering of the SplitButton text and the localizable part, the splitButtonLabel accepts a string with a
-     * placeholder for the button text - e.g. 'splitbutton for {buttonText}'. The '{buttonText}' placeholder will be replaced
-     * internally with the current SplitButton text, and the resulting aria-label will be rendered as 'splitbutton for Reply'.
+     * To reorder the SplitButton text and the localizable part, use the `splitButtonLabel` property with a
+     * placeholder for the button text, such as `'splitbutton for {buttonText}'`. The `{buttonText}` placeholder
+     * is replaced internally with the current SplitButton text. For instance, the resulting `aria-label` is
+     * rendered as `'splitbutton for Reply'`.
      *
      * @example
-     *
-     * ```ts-no-run
-     *      <kendo-splitbutton>
-     *          <kendo-splitbutton-messages
-     *              splitButtonLabel="splitbutton for {buttonText}"
-     *          >
-     *          </kendo-splitbutton-messages>
-     *      </kendo-splitbutton>
-     *  ```
+     * ```ts
+     * <kendo-splitbutton>
+     *     <kendo-splitbutton-messages
+     *         splitButtonLabel="splitbutton for {buttonText}">
+     *     </kendo-splitbutton-messages>
+     * </kendo-splitbutton>
+     * ```
      */
     splitButtonLabel;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
@@ -4613,8 +4525,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Custom component messages override default component messages
- * ([see example]({% slug rtl_buttons %}).
+ * Represents a custom component for overriding the default SplitButton messages.
+ * ([see example]({% slug rtl_buttons %})).
  */
 class SplitButtonCustomMessagesComponent extends Messages {
     service;
@@ -4689,39 +4601,27 @@ const DEFAULT_FILL_MODE = 'solid';
  *
  * @example
  * ```ts
- * _@Component({
+ * @Component({
  * selector: 'my-app',
  * template: `
- *  <kendo-splitbutton [data]="data" icon="clipboard"
- *      (itemClick)="onSplitButtonItemClick($event)"
- *      (buttonClick)="onSplitButtonClick()">Paste</kendo-splitbutton>
+ *  <kendo-splitbutton [data]="items" (buttonClick)="onSplitButtonClick()">Paste</kendo-splitbutton>
  * `
  * })
  *
  * class AppComponent {
- *   public data: Array<any> = [{
+ *   public items: Array<any> = [{
  *       text: 'Keep Text Only',
  *       icon: 'clipboard-text',
  *       click: () => { console.log('Keep Text Only click handler'); }
  *   }, {
  *       text: 'Paste as HTML',
  *       icon: 'clipboard-code'
- *   }, {
- *       text: 'Paste Markdown',
- *       icon: 'clipboard-markdown'
- *   }, {
- *       text: 'Set Default Paste'
- *   }];
+ *     }
+ *  ];
  *
  *   public onSplitButtonClick(dataItem: any): void {
  *       console.log('Paste');
  *   }
- *
- *   public onSplitButtonItemClick(dataItem: any): void {
- *       if (dataItem) {
- *           console.log(dataItem.text);
- *       }
- *   }
  * }
  * ```
  */
@@ -4729,53 +4629,39 @@ class SplitButtonComponent extends ListButton {
     localization;
     renderer;
     /**
-     * Sets the text of the SplitButton.
+     * Sets the text displayed within the SplitButton.
      */
     text = '';
     /**
-     * Defines an icon to be rendered next to the button text.
-     * ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)).
+     * Specifies an icon to display next to the button text ([see example]({% slug databinding_splitbutton %}#arrays-of-complex-data)).
      */
     icon = '';
     /**
-     * Defines an SVGIcon to be rendered next to the button text.
+     * Specifies an `SVGIcon` to display next to the button text.
      */
     svgIcon;
     /**
-     * Defines an icon with a custom CSS class to be rendered next to the button text
-     * ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)).
+     * Specifies a custom CSS class for the icon displayed next to the button text ([see example]({% slug databinding_splitbutton %}#arrays-of-complex-data)).
      */
     iconClass;
     /**
-     * Defines the type attribute of the main button
+     * Specifies the `type` attribute of the main button.
      */
     type = 'button';
     /**
-     * Defines the location of an image to be displayed next to the button text
-     * ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)).
+     * Specifies the URL of an image to display next to the button text ([see example]({% slug databinding_splitbutton %}#arrays-of-complex-data)).
      */
     imageUrl = '';
     /**
-     * The size property specifies the padding of the SplitButton
-     * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-size)).
+     * Configures the padding of the SplitButton ([see example]({% slug api_buttons_splitbuttoncomponent %}#size)).
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * @default 'medium'
      */
     size = 'medium';
     /**
-     * The rounded property specifies the border radius of the SplitButton
-     * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-rounded)).
+     * Configures the border radius of the SplitButton ([see example]({% slug api_buttons_splitbuttoncomponent %}#rounded)).
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `full`
-     * * `none`
+     * @default 'medium'
      */
     set rounded(rounded) {
         const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
@@ -4786,14 +4672,9 @@ class SplitButtonComponent extends ListButton {
         return this._rounded;
     }
     /**
-     * The fillMode property specifies the background and border styles of the SplitButton
-     * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-fillMode)).
+     * Configures the background and border styles of the SplitButton ([see example]({% slug api_buttons_splitbuttoncomponent %}#fillMode)).
      *
-     * The available values are:
-     * * `solid` (default)
-     * * `flat`
-     * * `outline`
-     * * `link`
+     * @default 'solid'
      */
     set fillMode(fillMode) {
         const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
@@ -4803,28 +4684,13 @@ class SplitButtonComponent extends ListButton {
         return this._fillMode;
     }
     /**
-     * The SplitButton allows you to specify predefined theme colors.
-     * The theme color will be applied as a background and border color while also amending the text color accordingly
-     * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-themeColor)).
+     * Configures the theme color of the SplitButton. The theme color applies to the background, border, and text ([see example]({% slug api_buttons_splitbuttoncomponent %}#themeColor)).
      *
-     * The possible values are:
-     * * `base` &mdash;Applies coloring based on the `base` theme color. (default)
-     * * `primary` &mdash;Applies coloring based on the `primary` theme color.
-     * * `secondary`&mdash;Applies coloring based on the `secondary` theme color.
-     * * `tertiary`&mdash; Applies coloring based on the `tertiary` theme color.
-     * * `info`&mdash;Applies coloring based on the `info` theme color.
-     * * `success`&mdash; Applies coloring based on the `success` theme color.
-     * * `warning`&mdash; Applies coloring based on the `warning` theme color.
-     * * `error`&mdash; Applies coloring based on the `error` theme color.
-     * * `dark`&mdash; Applies coloring based on the `dark` theme color.
-     * * `light`&mdash; Applies coloring based on the `light` theme color.
-     * * `inverse`&mdash; Applies coloring based on the `inverse` theme color.
-     * * `none`&mdash; Removes the built in theme color.
+     * @default 'base'
      */
     themeColor = 'base';
     /**
-     * When set to `true`, disables a SplitButton item
-     * ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)).
+     * Disables the SplitButton when set to `true` ([see example]({% slug databinding_splitbutton %}#arrays-of-complex-data)).
      */
     set disabled(value) {
         if (this.isOpen) {
@@ -4836,13 +4702,7 @@ class SplitButtonComponent extends ListButton {
         return this._disabled;
     }
     /**
-     * Configures the popup of the SplitButton.
-     *
-     * The available options are:
-     * - `animate: Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
-     * - `popupClass: String`&mdash;Specifies a list of CSS classes that are used to style the popup.
-     * - `appendTo: "root" | "component" | ViewContainerRef`&mdash;Specifies the component to which the popup will be appended.
-     * - `align: "left" | "center" | "right"`&mdash;Specifies the alignment of the popup.
+     * Configures the popup settings of the SplitButton.
      */
     set popupSettings(settings) {
         this._popupSettings = Object.assign({ animate: true, popupClass: '' }, settings);
@@ -4851,7 +4711,7 @@ class SplitButtonComponent extends ListButton {
         return this._popupSettings;
     }
     /**
-     * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      */
     tabIndex = 0;
     /**
@@ -4859,9 +4719,7 @@ class SplitButtonComponent extends ListButton {
      */
     textField;
     /**
-     * Sets the data of the SplitButton.
-     *
-     * > The data has to be provided in an array-like list.
+     * Sets the data for the SplitButton. Provide the data as an array-like list.
      */
     set data(data) {
         this._data = data || [];
@@ -4873,22 +4731,20 @@ class SplitButtonComponent extends ListButton {
         return this._data;
     }
     /**
-     * The CSS classes that will be rendered on the button which opens the popup.
-     * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
+     * Specifies the CSS classes for the button that opens the popup.
+     * Supports values compatible with [`ngClass`](link:site.data.urls.angular['ngclassapi']).
      */
     arrowButtonClass;
     /**
-     * Specifies the name of the [font icon](slug:icons#icons-list) that will
-     * be rendered for the button which opens the popup.
+     * Specifies the name of the font icon displayed on the button that opens the popup.
      */
     arrowButtonIcon = 'caret-alt-down';
     /**
-     * Specifies the [`SVGIcon`](slug:api_icons_svgicon) that will
-     * be rendered for the button which opens the popup.
+     * Specifies the [`SVGIcon`](slug:api_icons_svgiconcomponent) displayed on the button that opens the popup.
      */
     arrowButtonSvgIcon = caretAltDownIcon;
     /**
-     * Sets attributes to the main button.
+     * Sets attributes for the main button.
      */
     set buttonAttributes(buttonAttributes) {
         const newButtonAttributes = buttonAttributes ? buttonAttributes : null;
@@ -4899,75 +4755,31 @@ class SplitButtonComponent extends ListButton {
         return this._buttonAttributes;
     }
     /**
-     * Fires each time the user clicks the main button.
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *        <kendo-splitbutton (buttonClick)="onSplitButtonClick()" [data]="data">
-     *            Reply
-     *        </kendo-splitbutton>
-     *    `
-     * })
-     * class AppComponent {
-     *    public data: Array<any> = ['Reply All', 'Forward', 'Reply & Delete'];
-     *
-     *    public onSplitButtonClick(): void {
-     *      console.log('SplitButton click');
-     *    }
-     * }
-     * ```
-     *
+     * Emits an event when the main button is clicked.
      */
     buttonClick = new EventEmitter();
     /**
-     * Fires each time the user clicks on the drop-down list. The event data contains the data item bound to the clicked list item.
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     *     selector: 'my-app',
-     *    template: `
-     *        <kendo-splitbutton (itemClick)="onSplitButtonItemClick($event)" [data]="data">
-     *          Reply
-     *      </kendo-splitbutton>
-     *    `
-     * })
-     * class AppComponent {
-     *    public data: Array<any> = ['Reply All', 'Forward', 'Reply & Delete'];
-     *
-     *   public onSplitButtonItemClick(dataItem?: string): void {
-     *        if (dataItem) {
-     *            console.log(dataItem);
-     *       }
-     *    }
-     * }
-     * ```
-     *
+     * Emits an event when an item in the drop-down list is clicked. The event data contains the clicked item's data.
      */
     itemClick = new EventEmitter();
     /**
-     * Fires each time the SplitButton gets focused.
+     * Emits an event when the SplitButton gains focus.
      */
     onFocus = new EventEmitter();
     /**
-     * Fires each time the SplitButton gets blurred.
+     * Emits an event when the SplitButton is blurred.
      */
     onBlur = new EventEmitter();
     /**
-     * Fires each time the popup is about to open.
-     * This event is preventable. If you cancel the event, the popup will remain closed.
+     * Emits an event before the popup opens. This event is preventable.
      */
     open = new EventEmitter();
     /**
-     * Fires each time the popup is about to close.
-     * This event is preventable. If you cancel the event, the popup will remain open.
+     * Emits an event before the popup closes. This event is preventable.
      */
     close = new EventEmitter();
     /**
-     * An item template that helps to customize the item content.
+     * Specifies a template to customize the content of the items in the drop-down list.
      */
     itemTemplate;
     activeArrow = false;
@@ -5499,40 +5311,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Utility array that contains all `Button` related components and directives
+ * Use the `KENDO_BUTTON` utility array to add all Button-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_BUTTON],
+ *   // ...
+ * })
+ * export class MyComponent {}
+ * ```
  */
 const KENDO_BUTTON = [
     ButtonComponent
 ];
 /**
- * Utility array that contains all `ButtonGroup` related components and directives
+ * Use the `KENDO_BUTTONGROUP` utility array to add all ButtonGroup-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_BUTTONGROUP],
+ *   // ...
+ * })
+ * export class MyComponent {}
+ * ```
  */
 const KENDO_BUTTONGROUP = [
     ButtonComponent,
     ButtonGroupComponent
 ];
 /**
- * Utility array that contains all `DropDownButton` related components and directives
+ * Use the `KENDO_DROPDOWNBUTTON` utility array to add all DropDownButton-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_DROPDOWNBUTTON],
+ *   // ...
+ * })
+ * export class MyComponent {}
+ * ```
  */
 const KENDO_DROPDOWNBUTTON = [
     DropDownButtonComponent,
     ButtonItemTemplateDirective
 ];
 /**
- * Utility array that contains all `Chip` related components and directives
+ * Use the `KENDO_CHIP` utility array to add all Chip-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_CHIP],
+ *   // ...
+ * })
+ * export class MyComponent {}
+ * ```
  */
 const KENDO_CHIP = [
     ChipComponent
 ];
 /**
- * Utility array that contains all `ChipList` related components and directives
+ * Use the `KENDO_CHIPLIST` utility array to add all ChipList-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_CHIPLIST],
+ *   // ...
+ * })
+ * export class MyComponent {}
+ * ```
  */
 const KENDO_CHIPLIST = [
     ChipComponent,
     ChipListComponent
 ];
 /**
- * Utility array that contains all `FloatingActionButton` related components and directives
+ * Use the `KENDO_FLOATINGACTIONBUTTON` utility array to add all FloatingActionButton-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_FLOATINGACTIONBUTTON],
+ *   // ...
+ * })
+ * export class MyComponent {}
+ * ```
  */
 const KENDO_FLOATINGACTIONBUTTON = [
     FloatingActionButtonComponent,
@@ -5540,7 +5412,17 @@ const KENDO_FLOATINGACTIONBUTTON = [
     FloatingActionButtonTemplateDirective
 ];
 /**
- * Utility array that contains all `SplitButton` related components and directives
+ * Use the `KENDO_SPLITBUTTON` utility array to add all SplitButton-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_SPLITBUTTON],
+ *   // ...
+ * })
+ * export class MyComponent {}
+ * ```
  */
 const KENDO_SPLITBUTTON = [
     SplitButtonComponent,
@@ -5549,7 +5431,17 @@ const KENDO_SPLITBUTTON = [
     ButtonItemTemplateDirective
 ];
 /**
- * Utility array that contains all `@progress/kendo-angular-buttons` related components and directives
+ * Use the `KENDO_BUTTONS` utility array to add all `@progress/kendo-angular-buttons`-related components and directives to a standalone Angular component.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_BUTTONS],
+ *   // ...
+ * })
+ * export class MyComponent {}
+ * ```
  */
 const KENDO_BUTTONS = [
     ...KENDO_BUTTON,
@@ -5563,12 +5455,29 @@ const KENDO_BUTTONS = [
 
 //IMPORTANT: NgModule export kept for backwards compatibility
 /**
+ * Represents the [NgModule](link:site.data.urls.angular['ngmodules'])
+ * definition for the ButtonGroup directive.
  *
- * The exported package module.
+ * Required for adding ButtonGroup features in NgModule-based Angular applications.
  *
  * The package exports:
  * - `ButtonGroupComponent`&mdash;The ButtonGroup component class.
  * - `ButtonComponent`&mdash;The Button component class.
+ *
+ * @example
+ * ```typescript
+ * import { ButtonGroupModule } from '@progress/kendo-angular-buttons';
+ * import { NgModule } from '@angular/core';
+ * import { BrowserModule } from '@angular/platform-browser';
+ * import { AppComponent } from './app.component';
+ *
+ * @NgModule({
+ *   declarations: [AppComponent],
+ *   imports: [BrowserModule, ButtonGroupModule],
+ *   bootstrap: [AppComponent]
+ * })
+ * export class AppModule {}
+ * ```
  */
 class ButtonGroupModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -5589,31 +5498,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Represents the [NgModule](link:site.data.urls.angular['ngmodules'])
  * definition for the Button directive.
  *
- * @example
+ * Required for adding Button features in NgModule-based Angular applications.
  *
- * ```ts-no-run
- * // Import the Button module
+ * @example
+ * ```typescript
  * import { ButtonModule } from '@progress/kendo-angular-buttons';
- *
- * // 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, ButtonModule], // import Button module
- *     bootstrap:    [AppComponent]
+ * @NgModule({
+ *   declarations: [AppComponent],
+ *   imports: [BrowserModule, ButtonModule],
+ *   bootstrap: [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 class ButtonModule {
@@ -5635,31 +5534,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Represents the [NgModule](link:site.data.urls.angular['ngmodules'])
  * definition for the Buttons components.
  *
+ * Required for adding all Button features in NgModule-based Angular applications.
+ *
  * @example
  *
  * ```ts-no-run
- * // Import the Buttons module
  * import { ButtonsModule } from '@progress/kendo-angular-buttons';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
+ * @NgModule({
  *     declarations: [AppComponent], // declare app component
  *     imports:      [BrowserModule, ButtonsModule], // import Buttons module
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 class ButtonsModule {
@@ -5676,10 +5565,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-//IMPORTANT: NgModule export kept for backwards compatibility
+// IMPORTANT: NgModule export kept for backwards compatibility.
 /**
+ * Represents the exported package module.
  *
- * The exported package module.
+ * Required for adding SplitButton features in NgModule-based Angular applications.
  *
  * The package exports:
  * - `SplitButtonComponent`&mdash;The SplitButton component class.
@@ -5701,12 +5591,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 //IMPORTANT: NgModule export kept for backwards compatibility
 /**
+ * Exports the package module.
  *
- * The exported package module.
+ * Required for adding DropDownButton features in NgModule-based Angular applications.
  *
- * The package exports:
- * - `DropDownButtonComponent`&mdash;The DropDownButtonComponent component class.
- * - `ButtonItemTemplateDirective`&mdash;The Button item template directive.
+ * The module includes:
+ * - `DropDownButtonComponent`&mdash;The component class for the DropDownButton.
+ * - `ButtonItemTemplateDirective`&mdash;The directive for the button item template.
+ *
+ * @example
+ * ```typescript
+ * import { DropDownButtonModule } from '@progress/kendo-angular-buttons';
+ * import { NgModule } from '@angular/core';
+ * import { BrowserModule } from '@angular/platform-browser';
+ * import { AppComponent } from './app.component';
+ *
+ * @NgModule({
+ *   declarations: [AppComponent],
+ *   imports: [BrowserModule, DropDownButtonModule],
+ *   bootstrap: [AppComponent]
+ * })
+ * export class AppModule {}
+ * ```
  */
 class DropDownButtonModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -5727,28 +5633,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Chip and ChipList components.
  *
- * @example
+ * Required for adding Chip and ChipList features in NgModule-based Angular applications.
  *
- * ```ts-no-run
- * // Import the Chip module
+ * @example
+ * ```typescript
  * import { ChipModule } from '@progress/kendo-angular-buttons';
- *
- * // 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, ChipModule], // import Chip module
- *     bootstrap:    [AppComponent]
+ * @NgModule({
+ *   declarations: [AppComponent],
+ *   imports: [BrowserModule, ChipModule],
+ *   bootstrap: [AppComponent]
  * })
  * export class AppModule {}
- *
  * ```
  */
 class ChipModule {
@@ -5765,33 +5664,25 @@ 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 FloatingActionButton component.
+ * Represents the NgModule definition for the FloatingActionButton component.
  *
- * @example
+ * Required for adding FloatingActionButton features in NgModule-based Angular applications.
  *
- * ```ts-no-run
- * // Import the FloatingActionButton module
+ * @example
+ * ```ts
  * import { FloatingActionButtonModule } from '@progress/kendo-angular-buttons';
- *
- * // The browser platform with a compiler
  * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
  * import { AppComponent } from './app.component';
+ * import { BrowserModule } from '@angular/platform-browser';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, FloatingActionButtonModule], // import FloatingActionButton module
- *     bootstrap:    [AppComponent]
+ * @NgModule({
+ *     declarations: [AppComponent],
+ *     imports: [BrowserModule, FloatingActionButtonModule],
+ *     bootstrap: [AppComponent]
  * })
  * export class AppModule {}
- *
  * ```
  */
 class FloatingActionButtonModule {