@progress/kendo-angular-toolbar 22.1.0-develop.9 → 23.0.0-develop.10

package/common/fillmode.d.ts

@@ -5,4 +5,4 @@
 /**
  * Represents the possible fill mode options of the ToolBar.
  */
-export type ToolbarFillMode = 'solid' | 'flat' | 'outline' | 'none';
+export type ToolbarFillMode = 'solid' | 'flat' | 'outline';

package/common/overflow-settings.d.ts

@@ -35,11 +35,11 @@ export interface ToolbarOverflowSettings {
      */
     nextButtonIcon?: string;
     /**
-     * Sets an `SVGIcon` for the previous button icon. Accepts an [existing Kendo SVG icon](slug:svgicon_list) or a custom one. Applies when the overflow mode is set to `'scroll'`.
+     * Sets an `SVGIcon` for the previous button icon. Accepts an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one. Applies when the overflow mode is set to `'scroll'`.
      */
     prevSVGButtonIcon?: SVGIcon;
     /**
-     * Sets an `SVGIcon` for the next button icon. Accepts an [existing Kendo SVG icon](slug:svgicon_list) or a custom one. Applies when the overflow mode is set to `'scroll'`.
+     * Sets an `SVGIcon` for the next button icon. Accepts an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one. Applies when the overflow mode is set to `'scroll'`.
      */
     nextSVGButtonIcon?: SVGIcon;
 }

package/common/size.d.ts

@@ -4,6 +4,5 @@
 *-------------------------------------------------------------------------------------------*/
 /**
  * Represents the possible size options of the ToolBar.
- * @default `medium`
  */
-export type ToolbarSize = 'small' | 'medium' | 'large' | 'none';
+export type ToolbarSize = 'small' | 'medium' | 'large';

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

@@ -27,7 +27,7 @@ const packageMetadata = {
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
     publishDate: 0,
-    version: '22.1.0-develop.9',
+    version: '23.0.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -87,6 +87,12 @@ const closest = (node, predicate) => {
     }
     return node;
 };
+/**
+ * @hidden
+ */
+const isSmartBoxInput = (target) => {
+    return !!closest(target, (el) => el.classList?.contains('k-smart-box'));
+};
 /**
  * @hidden
  */
@@ -247,16 +253,18 @@ const SIZES = {
  */
 const getStylingClasses = (componentType, stylingOption, previousValue, newValue) => {
     switch (stylingOption) {
-        case 'size':
+        case 'size': {
             return {
-                toRemove: `k-${componentType}-${SIZES[previousValue]}`,
-                toAdd: newValue !== 'none' ? `k-${componentType}-${SIZES[newValue]}` : ''
+                toRemove: previousValue ? `k-${componentType}-${SIZES[previousValue]}` : null,
+                toAdd: newValue ? `k-${componentType}-${SIZES[newValue]}` : null
             };
-        case 'fillMode':
+        }
+        case 'fillMode': {
             return {
-                toRemove: `k-${componentType}-${previousValue}`,
-                toAdd: newValue !== 'none' ? `k-${componentType}-${newValue}` : ''
+                toRemove: previousValue ? `k-${componentType}-${previousValue}` : null,
+                toAdd: newValue ? `k-${componentType}-${newValue}` : null
             };
+        }
         default:
             break;
     }
@@ -511,7 +519,7 @@ class ToolBarToolComponent {
     /**
      * Called when the tool is focused and an arrow key is pressed.
      * Returns a boolean value that determines if the `ToolBarComponent` moves focus to the next or previous tool
-     * ([see example]({% slug customcontroltypes_toolbar %}#toc-adding-keyboard-navigation)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/custom-control-types#adding-keyboard-navigation)).
      * @param {KeyboardEvent} _ev - The last pressed arrow key.
      * @returns `true` if focus moves to another tool.
      */
@@ -1111,8 +1119,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 /* eslint-disable no-case-declarations */
-const DEFAULT_SIZE = 'medium';
-const DEFAULT_FILL_MODE = 'solid';
 const immediateResizeThreshold = 300;
 const getInitialPopupSettings = (isRtl) => ({
     animate: true,
@@ -1120,7 +1126,7 @@ const getInitialPopupSettings = (isRtl) => ({
     popupAlign: { horizontal: isRtl ? 'left' : 'right', vertical: 'top' }
 });
 /**
- * Represents the [Kendo UI ToolBar component for Angular]({% slug overview_toolbar %}).
+ * Represents the [Kendo UI ToolBar component for Angular](https://www.telerik.com/kendo-angular-ui/components/toolbar).
  *
  * @example
  * ```html
@@ -1158,7 +1164,7 @@ class ToolBarComponent {
     toolsService;
     scrollService;
     get overflowClass() {
-        return `k-button-${SIZES[this.size]}`;
+        return this.size ? `k-button-${SIZES[this.size]}` : '';
     }
     /**
      * Sets the overflow mode for the ToolBar.
@@ -1226,7 +1232,7 @@ class ToolBarComponent {
     /**
      * Configures the popup for the ToolBar overflow button.
      * Use this property to customize the overflow popup appearance and behavior
-     * ([see example](slug:responsive_toolbar#customizing-the-popup)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/responsive-toolbar#customizing-the-popup)).
      */
     set popupSettings(settings) {
         this._popupSettings = Object.assign({}, getInitialPopupSettings(this.localization.rtl), settings);
@@ -1237,13 +1243,11 @@ class ToolBarComponent {
     /**
      * Sets the fill mode for the ToolBar.
      * This property controls the background and border styles of the ToolBar
-     * ([see example](slug:appearance_toolbar#toc-fill-mode)).
-     * @default 'solid'
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/appearance#fill-mode)). The default value is set by the Kendo theme.
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
-        this.handleClasses(newFillMode, 'fillMode');
-        this._fillMode = newFillMode;
+        this.handleClasses(fillMode, 'fillMode');
+        this._fillMode = fillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -1256,13 +1260,11 @@ class ToolBarComponent {
     tabindex = 0;
     /**
      * Sets the size for all ToolBar elements.
-     * Use this property to control the padding of the ToolBar elements.
-     * @default 'medium'
+     * Use this property to control the padding of the ToolBar elements. The default value is set by the Kendo theme.
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
+        this.handleClasses(size, 'size');
+        this._size = size;
     }
     get size() {
         return this._size;
@@ -1384,8 +1386,8 @@ class ToolBarComponent {
     sectionKeydownListener;
     cancelRenderedToolsSubscription$ = new Subject();
     cachedGap;
-    _size = DEFAULT_SIZE;
-    _fillMode = DEFAULT_FILL_MODE;
+    _size = undefined;
+    _fillMode = undefined;
     _showText = 'always';
     _showIcon = 'always';
     overflowButtonClickedTime = null;
@@ -1474,7 +1476,9 @@ class ToolBarComponent {
                 switch (code) {
                     case Keys.ArrowLeft:
                         this.zone.run(() => {
-                            ev.preventDefault();
+                            if (!isSmartBoxInput(ev.target)) {
+                                ev.preventDefault();
+                            }
                             if (this.direction === 'ltr') {
                                 this.navigationService.focusPrev(ev);
                             }
@@ -1487,7 +1491,9 @@ class ToolBarComponent {
                         break;
                     case Keys.ArrowRight:
                         this.zone.run(() => {
-                            ev.preventDefault();
+                            if (!isSmartBoxInput(ev.target)) {
+                                ev.preventDefault();
+                            }
                             if (this.direction === 'ltr') {
                                 this.navigationService.focusNext(ev);
                             }
@@ -1539,10 +1545,6 @@ class ToolBarComponent {
             }
         }));
         this.navigationService.setRenderedTools(this.toolsService.renderedTools);
-        const stylingOptions = ['size', 'fillMode'];
-        stylingOptions.forEach(option => {
-            this.handleClasses(this[option], option);
-        });
     }
     ngOnInit() {
         this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
@@ -1591,7 +1593,7 @@ class ToolBarComponent {
      * @hidden
      */
     get sectionSizeClass() {
-        return this.size === 'none' ? '' : `k-toolbar-items-list-${SIZES[this.size]}`;
+        return `k-toolbar-items-list-${SIZES[this.size]}`;
     }
     /**
      * @hidden
@@ -2132,26 +2134,26 @@ class ToolBarComponent {
                     [prev]="true"
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('prev')"
-                    class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    class="k-toolbar-prev k-icon-button k-button"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
                     (onClick)="scrollTools($event)">
                 </span>
             }
             @if (hasScrollButtons.position === 'start') {
-                <div class="k-button-group k-button-group-solid" #startButtonGroup>
+                <div class="k-button-group" #startButtonGroup>
                 <span #prevScrollButton
                     kendoToolbarScrollableButton
                     [prev]="true"
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('prev')"
-                    class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    class="k-toolbar-prev k-icon-button k-button"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
                     (onClick)="scrollTools($event)">
@@ -2161,10 +2163,10 @@ class ToolBarComponent {
                     [prev]="false"
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('next')"
-                    class="k-toolbar-next k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    class="k-toolbar-next k-icon-button k-button"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
                     (onClick)="scrollTools($event)">
@@ -2241,26 +2243,26 @@ class ToolBarComponent {
                 [prev]="false"
                 [overflow]="normalizedOverflow"
                 [title]="getScrollButtonTitle('next')"
-                class="k-toolbar-next k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                class="k-toolbar-next k-icon-button k-button"
                 [ngClass]="{
                     'k-button-sm': size === 'small',
-                    'k-button-md': size === 'medium' || !size,
+                    'k-button-md': size === 'medium',
                     'k-button-lg': size === 'large'
                 }"
                 (onClick)="scrollTools($event)">
             </span>
             }
             @if (hasScrollButtons.position === 'end') {
-                <div class="k-button-group k-button-group-solid" #endButtonGroup>
+                <div class="k-button-group" #endButtonGroup>
                 <span #prevScrollButton
                     kendoToolbarScrollableButton
                     [prev]="true"
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('prev')"
-                    class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    class="k-toolbar-prev k-icon-button k-button"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
                     (onClick)="scrollTools($event)">
@@ -2270,10 +2272,10 @@ class ToolBarComponent {
                     [prev]="false"
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('next')"
-                    class="k-toolbar-next k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    class="k-toolbar-next k-icon-button k-button"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
                     (onClick)="scrollTools($event)">
@@ -2283,7 +2285,7 @@ class ToolBarComponent {
         }
         <ng-template #popupTemplate>
             <div
-                class="k-menu-group k-menu-group-md"
+                class="k-menu-group"
                 role="menu"
                 [id]="popupId"
                 [attr.dir]="direction === 'rtl' ? 'rtl' : null"
@@ -2369,26 +2371,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                     [prev]="true"
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('prev')"
-                    class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    class="k-toolbar-prev k-icon-button k-button"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
                     (onClick)="scrollTools($event)">
                 </span>
             }
             @if (hasScrollButtons.position === 'start') {
-                <div class="k-button-group k-button-group-solid" #startButtonGroup>
+                <div class="k-button-group" #startButtonGroup>
                 <span #prevScrollButton
                     kendoToolbarScrollableButton
                     [prev]="true"
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('prev')"
-                    class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    class="k-toolbar-prev k-icon-button k-button"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
                     (onClick)="scrollTools($event)">
@@ -2398,10 +2400,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                     [prev]="false"
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('next')"
-                    class="k-toolbar-next k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    class="k-toolbar-next k-icon-button k-button"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
                     (onClick)="scrollTools($event)">
@@ -2478,26 +2480,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 [prev]="false"
                 [overflow]="normalizedOverflow"
                 [title]="getScrollButtonTitle('next')"
-                class="k-toolbar-next k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                class="k-toolbar-next k-icon-button k-button"
                 [ngClass]="{
                     'k-button-sm': size === 'small',
-                    'k-button-md': size === 'medium' || !size,
+                    'k-button-md': size === 'medium',
                     'k-button-lg': size === 'large'
                 }"
                 (onClick)="scrollTools($event)">
             </span>
             }
             @if (hasScrollButtons.position === 'end') {
-                <div class="k-button-group k-button-group-solid" #endButtonGroup>
+                <div class="k-button-group" #endButtonGroup>
                 <span #prevScrollButton
                     kendoToolbarScrollableButton
                     [prev]="true"
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('prev')"
-                    class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    class="k-toolbar-prev k-icon-button k-button"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
                     (onClick)="scrollTools($event)">
@@ -2507,10 +2509,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                     [prev]="false"
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('next')"
-                    class="k-toolbar-next k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    class="k-toolbar-next k-icon-button k-button"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
                     (onClick)="scrollTools($event)">
@@ -2520,7 +2522,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         }
         <ng-template #popupTemplate>
             <div
-                class="k-menu-group k-menu-group-md"
+                class="k-menu-group"
                 role="menu"
                 [id]="popupId"
                 [attr.dir]="direction === 'rtl' ? 'rtl' : null"
@@ -2659,7 +2661,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 /**
- * Represents the [Kendo UI ToolBar Button tool for Angular]({% slug controltypes_toolbar %}#toc-buttons).
+ * Represents the [Kendo UI ToolBar Button tool for Angular](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#buttons).
  *
  * Use this component to render a button inside the ToolBar.
  *
@@ -2702,7 +2704,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
     }
     /**
      * Specifies the text of the Button
-     * ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#buttons)).
      */
     set text(text) {
         this._text = text;
@@ -2731,12 +2733,12 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
     title;
     /**
      * Disables the Button when set to `true`
-     * ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#buttons)).
      */
     disabled;
     /**
      * Provides visual styling to indicate if the Button is active
-     * ([see example]({% slug controltypes_toolbar %}#toc-toggle-buttons)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#toggle-buttons)).
      * For toggleable buttons, set this to `true`.
      * @default false
      */
@@ -2765,27 +2767,20 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
      */
     selected = false;
     /**
-     * Specifies the background and border styles of the Button.
-     * Accepts a `ButtonFillMode` value.
-     * @default 'solid'
+     * Specifies the background and border styles of the Button. The default value is set by the Kendo theme.
      */
-    fillMode = 'solid';
+    fillMode = undefined;
     /**
-     * Specifies the border radius of the Button.
-     * Accepts a `ButtonRounded` value.
-     *
-     * @default 'medium'
+     * Specifies the border radius of the Button. The default value is set by the Kendo theme.
      */
-    rounded = 'medium';
+    rounded = undefined;
     /**
-     * Specifies the predefined theme color of the Button.
-     * Accepts a `ButtonThemeColor` value.
-     * @default 'base'
+     * Specifies the predefined theme color of the Button. The default value is set by the Kendo theme.
      */
-    themeColor = 'base';
+    themeColor = undefined;
     /**
      * Defines the name for an existing icon in a Kendo UI theme
-     * ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#buttons)).
      * The icon is rendered inside the Button by a `span.k-icon` element.
      */
     set icon(icon) {
@@ -2802,7 +2797,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
     }
     /**
      * Defines an SVGIcon to be rendered within the button.
-     * Accepts either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Accepts either an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
      */
     set svgIcon(icon) {
         const isIconSet = this.toolbarOptions.icon || this.overflowOptions.icon;
@@ -2973,7 +2968,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
                 [disabled]="disabled"
                 [toggleable]="toggleable"
                 [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
+                [themeColor]="themeColor"
                 [rounded]="rounded"
                 [selected]="selected"
                 [icon]="toolbarOptions.icon"
@@ -3008,7 +3003,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
               [disabled]="disabled"
               [toggleable]="toggleable"
               [fillMode]="fillMode"
-              [themeColor]="fillMode ? themeColor : null"
+              [themeColor]="themeColor"
               [rounded]="rounded"
               [selected]="selected"
               [icon]="toolbarOptions.icon"
@@ -3073,7 +3068,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
                 [disabled]="disabled"
                 [toggleable]="toggleable"
                 [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
+                [themeColor]="themeColor"
                 [rounded]="rounded"
                 [selected]="selected"
                 [icon]="toolbarOptions.icon"
@@ -3107,7 +3102,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
               [disabled]="disabled"
               [toggleable]="toggleable"
               [fillMode]="fillMode"
-              [themeColor]="fillMode ? themeColor : null"
+              [themeColor]="themeColor"
               [rounded]="rounded"
               [selected]="selected"
               [icon]="toolbarOptions.icon"
@@ -3149,7 +3144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 [disabled]="disabled"
                 [toggleable]="toggleable"
                 [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
+                [themeColor]="themeColor"
                 [rounded]="rounded"
                 [selected]="selected"
                 [icon]="toolbarOptions.icon"
@@ -3184,7 +3179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
               [disabled]="disabled"
               [toggleable]="toggleable"
               [fillMode]="fillMode"
-              [themeColor]="fillMode ? themeColor : null"
+              [themeColor]="themeColor"
               [rounded]="rounded"
               [selected]="selected"
               [icon]="toolbarOptions.icon"
@@ -3249,7 +3244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 [disabled]="disabled"
                 [toggleable]="toggleable"
                 [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
+                [themeColor]="themeColor"
                 [rounded]="rounded"
                 [selected]="selected"
                 [icon]="toolbarOptions.icon"
@@ -3283,7 +3278,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
               [disabled]="disabled"
               [toggleable]="toggleable"
               [fillMode]="fillMode"
-              [themeColor]="fillMode ? themeColor : null"
+              [themeColor]="themeColor"
               [rounded]="rounded"
               [selected]="selected"
               [icon]="toolbarOptions.icon"
@@ -3357,7 +3352,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 /**
- * Represents the [Kendo UI Toolbar ButtonGroup for Angular](slug:controltypes_toolbar#button-groups).
+ * Represents the [Kendo UI Toolbar ButtonGroup for Angular](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#button-groups).
  *
  * Use this component to group buttons in a ButtonGroup inside the ToolBar.
  *
@@ -3387,9 +3382,9 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
      * @hidden
      *
      * Used to set different fillmode in Spreadsheet and Toolbar to comply with referent rendering.
-     * @default 'solid'
+     * @default undefined
      */
-    fillMode = 'solid';
+    fillMode = undefined;
     /**
      * Sets the selection mode of the ButtonGroup.
      * @default 'multiple'
@@ -3544,7 +3539,8 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: ToolBarButtonGroupComponent, isStandalone: true, selector: "kendo-toolbar-buttongroup", inputs: { disabled: "disabled", fillMode: "fillMode", selection: "selection", width: "width", look: "look" }, providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonGroupComponent) }], queries: [{ propertyName: "buttonComponents", predicate: i0.forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarButtonGroup", first: true, predicate: ["toolbarButtonGroup"], descendants: true }, { propertyName: "sectionButtonGroup", first: true, predicate: ["sectionButtonGroup"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
           <kendo-buttongroup
-            class="k-toolbar-button-group k-button-group-{{fillMode}}"
+            class="k-toolbar-button-group"
+            [ngClass]="fillMode ? 'k-button-group-' + fillMode : ''"
             #toolbarButtonGroup
             [tabIndex]="-1"
             [selection]="selection"
@@ -3566,7 +3562,7 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
                 [selected]="button.selected"
                 [attr.aria-pressed]="button.selected ? true : false"
                 [fillMode]="button.fillMode"
-                [themeColor]="button.fillMode ? button.themeColor : null"
+                [themeColor]="button.themeColor"
                 [icon]="button.toolbarOptions.icon"
                 [iconClass]="button.toolbarOptions.iconClass"
                 [svgIcon]="button.toolbarOptions.svgIcon"
@@ -3611,7 +3607,8 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
         </ng-template>
         <ng-template #sectionTemplate>
           <kendo-buttongroup
-            class="k-toolbar-button-group k-button-group-{{fillMode}}"
+            class="k-toolbar-button-group"
+            [ngClass]="fillMode ? 'k-button-group-' + fillMode : ''"
             #sectionButtonGroup
             [tabIndex]="-1"
             [selection]="selection"
@@ -3633,7 +3630,7 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
                 [selected]="button.selected"
                 [attr.aria-pressed]="button.selected ? true : false"
                 [fillMode]="button.fillMode"
-                [themeColor]="button.fillMode ? button.themeColor : null"
+                [themeColor]="button.themeColor"
                 [icon]="button.toolbarOptions.icon"
                 [iconClass]="button.toolbarOptions.iconClass"
                 [svgIcon]="button.toolbarOptions.svgIcon"
@@ -3658,7 +3655,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                     template: `
         <ng-template #toolbarTemplate>
           <kendo-buttongroup
-            class="k-toolbar-button-group k-button-group-{{fillMode}}"
+            class="k-toolbar-button-group"
+            [ngClass]="fillMode ? 'k-button-group-' + fillMode : ''"
             #toolbarButtonGroup
             [tabIndex]="-1"
             [selection]="selection"
@@ -3680,7 +3678,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 [selected]="button.selected"
                 [attr.aria-pressed]="button.selected ? true : false"
                 [fillMode]="button.fillMode"
-                [themeColor]="button.fillMode ? button.themeColor : null"
+                [themeColor]="button.themeColor"
                 [icon]="button.toolbarOptions.icon"
                 [iconClass]="button.toolbarOptions.iconClass"
                 [svgIcon]="button.toolbarOptions.svgIcon"
@@ -3725,7 +3723,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         </ng-template>
         <ng-template #sectionTemplate>
           <kendo-buttongroup
-            class="k-toolbar-button-group k-button-group-{{fillMode}}"
+            class="k-toolbar-button-group"
+            [ngClass]="fillMode ? 'k-button-group-' + fillMode : ''"
             #sectionButtonGroup
             [tabIndex]="-1"
             [selection]="selection"
@@ -3747,7 +3746,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 [selected]="button.selected"
                 [attr.aria-pressed]="button.selected ? true : false"
                 [fillMode]="button.fillMode"
-                [themeColor]="button.fillMode ? button.themeColor : null"
+                [themeColor]="button.themeColor"
                 [icon]="button.toolbarOptions.icon"
                 [iconClass]="button.toolbarOptions.iconClass"
                 [svgIcon]="button.toolbarOptions.svgIcon"
@@ -3790,7 +3789,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 /**
- * Represents the [Kendo UI ToolBar DropDownButton for Angular](slug:controltypes_toolbar#drop-down-buttons).
+ * Represents the [Kendo UI ToolBar DropDownButton for Angular](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#drop-down-buttons).
  *
  * Use this component to add a button that opens a popup with a list of items in the ToolBar.
  *
@@ -3841,7 +3840,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     }
     /**
      * Sets the text of the DropDownButton
-     * ([see example](slug:controltypes_toolbar#toc-drop-down-buttons)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#drop-down-buttons)).
      */
     set text(text) {
         this._text = text;
@@ -3859,7 +3858,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     }
     /**
      * Sets the `SVGIcon` rendered in the button.
-     * Accepts an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Accepts an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
      */
     set svgIcon(icon) {
         const isIconSet = this.toolbarOptions.icon || this.overflowOptions.icon;
@@ -3913,17 +3912,15 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     }
     /**
      * Sets the fill mode for the button.
-     * The fill mode represents the background and border styles.
-     * @default 'solid'
+     * The fill mode represents the background and border styles. The default value is set by the Kendo theme.
      */
-    fillMode = 'solid';
+    fillMode = undefined;
     /**
      * Sets the predefined theme color for the button.
      * The theme color applies to the background, border, and text
-     * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
-     * @default 'base'
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/api/dropdownbuttoncomponent#themecolor)). The default value is set by the Kendo theme.
      */
-    themeColor = 'base';
+    themeColor = undefined;
     /**
      * Sets the CSS classes for the main button.
      * Accepts values supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
@@ -3940,7 +3937,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     disabled;
     /**
      * Sets the data of the DropDownButton
-     * ([see example](slug:controltypes_toolbar#drop-down-buttons)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#drop-down-buttons)).
      *
      * > Provide the data as an array-like list.
      */
@@ -4125,7 +4122,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
             [textField]="textField"
             [popupSettings]="popupSettings"
             [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
+            [themeColor]="themeColor"
             (open)="open.emit($event)"
             (close)="close.emit($event)"
             (itemClick)="itemClick.emit($event)"
@@ -4133,7 +4130,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
             {{ toolbarOptions.text }}
           </kendo-dropdownbutton>
         </ng-template>
-        
+
         <ng-template #popupTemplate>
           <div
             tabindex="-1"
@@ -4180,7 +4177,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
             </div>
           }
         </ng-template>
-        
+
         <ng-template #sectionTemplate>
           <kendo-dropdownbutton #sectionDropDownButton
             [icon]="toolbarOptions.icon"
@@ -4197,7 +4194,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
             [textField]="textField"
             [popupSettings]="popupSettings"
             [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
+            [themeColor]="themeColor"
             (open)="open.emit($event)"
             (close)="close.emit($event)"
             (itemClick)="itemClick.emit($event)"
@@ -4230,7 +4227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             [textField]="textField"
             [popupSettings]="popupSettings"
             [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
+            [themeColor]="themeColor"
             (open)="open.emit($event)"
             (close)="close.emit($event)"
             (itemClick)="itemClick.emit($event)"
@@ -4238,7 +4235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             {{ toolbarOptions.text }}
           </kendo-dropdownbutton>
         </ng-template>
-        
+
         <ng-template #popupTemplate>
           <div
             tabindex="-1"
@@ -4285,7 +4282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             </div>
           }
         </ng-template>
-        
+
         <ng-template #sectionTemplate>
           <kendo-dropdownbutton #sectionDropDownButton
             [icon]="toolbarOptions.icon"
@@ -4302,7 +4299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             [textField]="textField"
             [popupSettings]="popupSettings"
             [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
+            [themeColor]="themeColor"
             (open)="open.emit($event)"
             (close)="close.emit($event)"
             (itemClick)="itemClick.emit($event)"
@@ -4371,7 +4368,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 /**
- * Represents the [Kendo UI ToolBar SplitButton for Angular](slug:controltypes_toolbar#split-buttons).
+ * Represents the [Kendo UI ToolBar SplitButton for Angular](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#split-buttons).
  *
  * Use the ToolBar SplitButton to create a split button with a main button and a drop-down list of actions in the ToolBar.
  *
@@ -4409,7 +4406,7 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         return this._showIcon;
     }
     /**
-     * Sets the text of the SplitButton ([see example](slug:controltypes_toolbar#toc-split-buttons)).
+     * Sets the text of the SplitButton ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#split-buttons)).
      */
     set text(text) {
         this._text = text;
@@ -4420,7 +4417,7 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     }
     /**
      * Sets the icon rendered next to the button text
-     * ([see example](slug:controltypes_toolbar#toc-split-buttons)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#split-buttons)).
      */
     set icon(icon) {
         this.toolbarOptions.icon = getValueForLocation(icon, this.showIcon, false);
@@ -4428,7 +4425,7 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     }
     /**
      * Sets the `SVGIcon` rendered in the main button.
-     * Accepts an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Accepts an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
      */
     set svgIcon(icon) {
         const isIconSet = this.toolbarOptions.icon || this.overflowOptions.icon;
@@ -4476,16 +4473,14 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     }
     /**
      * Sets the fill mode for the button.
-     * The fill mode represents the background and border styles.
-     * @default 'solid'
+     * The fill mode represents the background and border styles. The default value is set by the Kendo theme.
      */
-    fillMode = 'solid';
+    fillMode = undefined;
     /**
      * Sets the predefined theme color for the button.
-     * The theme color applies to the background, border, and text.
-     * @default 'base'
+     * The theme color applies to the background, border, and text. The default value is set by the Kendo theme.
      */
-    themeColor = 'base';
+    themeColor = undefined;
     /**
      * @hidden
      */
@@ -4505,11 +4500,11 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
      */
     arrowButtonClass;
     /**
-     * Sets the name of the [font icon](slug:icons#icons-list) for the arrow button.
+     * Sets the name of the [font icon](https://www.telerik.com/kendo-angular-ui/components/styling/icons#icons-list) for the arrow button.
      */
     arrowButtonIcon = 'caret-alt-down';
     /**
-     * Sets the [`SVGIcon`](slug:api_icons_svgicon) for the arrow button.
+     * Sets the [`SVGIcon`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgicon) for the arrow button.
      */
     arrowButtonSvgIcon = caretAltDownIcon;
     /**
@@ -4518,7 +4513,7 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
      */
     textField = 'text';
     /**
-     * Sets the data of the SplitButton ([see example](slug:controltypes_toolbar#toc-split-buttons)).
+     * Sets the data of the SplitButton ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#split-buttons)).
      *
      * > Provide the data as an array-like list.
      */
@@ -4706,7 +4701,7 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
             [textField]="textField"
             [popupSettings]="popupSettings"
             [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
+            [themeColor]="themeColor"
             (buttonClick)="buttonClick.emit($event)"
             (open)="open.emit($event)"
             (close)="close.emit($event)"
@@ -4782,7 +4777,7 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
             [textField]="textField"
             [popupSettings]="popupSettings"
             [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
+            [themeColor]="themeColor"
             (buttonClick)="buttonClick.emit($event)"
             (open)="open.emit($event)"
             (close)="close.emit($event)"
@@ -4818,7 +4813,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             [textField]="textField"
             [popupSettings]="popupSettings"
             [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
+            [themeColor]="themeColor"
             (buttonClick)="buttonClick.emit($event)"
             (open)="open.emit($event)"
             (close)="close.emit($event)"
@@ -4894,7 +4889,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             [textField]="textField"
             [popupSettings]="popupSettings"
             [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
+            [themeColor]="themeColor"
             (buttonClick)="buttonClick.emit($event)"
             (open)="open.emit($event)"
             (close)="close.emit($event)"
@@ -4964,7 +4959,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 /**
- * Represents the [Kendo UI ToolBar Separator for Angular]({% slug controltypes_toolbar %}#toc-separators).
+ * Represents the [Kendo UI ToolBar Separator for Angular](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#separators).
  *
  * Use this component to add a visual separator between ToolBar tools.
  *
@@ -5054,7 +5049,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 /**
- * Represents the [Kendo UI ToolBar Spacer for Angular]({% slug controltypes_toolbar %}#toc-separators).
+ * Represents the [Kendo UI ToolBar Spacer for Angular](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#separators).
  *
  * Use the ToolBar Spacer to add flexible space between ToolBar tools.
  *

package/group-selection-settings.d.ts

@@ -4,6 +4,6 @@
 *-------------------------------------------------------------------------------------------*/
 /**
  * Тhe selection mode for the ToolBar ButtonGroup.
- * For more information, see [`ToolBarButtonGroupComponent`]({% slug api_toolbar_toolbarbuttongroupcomponent %}).
+ * For more information, see [`ToolBarButtonGroupComponent`](https://www.telerik.com/kendo-angular-ui/components/toolbar/api/toolbarbuttongroupcomponent).
  */
 export type ButtonGroupSelection = "single" | "multiple";

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1769599988,
-  "version": "22.1.0-develop.9",
+  "publishDate": 1770666657,
+  "version": "23.0.0-develop.10",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-toolbar",
-  "version": "22.1.0-develop.9",
+  "version": "23.0.0-develop.10",
   "description": "Kendo UI Angular Toolbar component - a single UI element that organizes buttons and other navigation elements",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -45,7 +45,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1769599988,
+      "publishDate": 1770666657,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -55,17 +55,17 @@
     "@angular/core": "19 - 21",
     "@angular/platform-browser": "19 - 21",
     "@progress/kendo-licensing": "^1.10.0",
-    "@progress/kendo-angular-buttons": "22.1.0-develop.9",
-    "@progress/kendo-angular-common": "22.1.0-develop.9",
-    "@progress/kendo-angular-l10n": "22.1.0-develop.9",
-    "@progress/kendo-angular-icons": "22.1.0-develop.9",
-    "@progress/kendo-angular-indicators": "22.1.0-develop.9",
-    "@progress/kendo-angular-popup": "22.1.0-develop.9",
+    "@progress/kendo-angular-buttons": "23.0.0-develop.10",
+    "@progress/kendo-angular-common": "23.0.0-develop.10",
+    "@progress/kendo-angular-l10n": "23.0.0-develop.10",
+    "@progress/kendo-angular-icons": "23.0.0-develop.10",
+    "@progress/kendo-angular-indicators": "23.0.0-develop.10",
+    "@progress/kendo-angular-popup": "23.0.0-develop.10",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "22.1.0-develop.9"
+    "@progress/kendo-angular-schematics": "23.0.0-develop.10"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-toolbar.mjs",

package/toolbar.component.d.ts

@@ -24,7 +24,7 @@ import { ScrollService } from './scroll.service';
 import { DisplayMode } from './display-mode';
 import * as i0 from "@angular/core";
 /**
- * Represents the [Kendo UI ToolBar component for Angular]({% slug overview_toolbar %}).
+ * Represents the [Kendo UI ToolBar component for Angular](https://www.telerik.com/kendo-angular-ui/components/toolbar).
  *
  * @example
  * ```html
@@ -97,15 +97,14 @@ export declare class ToolBarComponent {
     /**
      * Configures the popup for the ToolBar overflow button.
      * Use this property to customize the overflow popup appearance and behavior
-     * ([see example](slug:responsive_toolbar#customizing-the-popup)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/responsive-toolbar#customizing-the-popup)).
      */
     set popupSettings(settings: PopupSettings);
     get popupSettings(): PopupSettings;
     /**
      * Sets the fill mode for the ToolBar.
      * This property controls the background and border styles of the ToolBar
-     * ([see example](slug:appearance_toolbar#toc-fill-mode)).
-     * @default 'solid'
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/appearance#fill-mode)). The default value is set by the Kendo theme.
      */
     set fillMode(fillMode: ToolbarFillMode);
     get fillMode(): ToolbarFillMode;
@@ -117,8 +116,7 @@ export declare class ToolBarComponent {
     tabindex: number;
     /**
      * Sets the size for all ToolBar elements.
-     * Use this property to control the padding of the ToolBar elements.
-     * @default 'medium'
+     * Use this property to control the padding of the ToolBar elements. The default value is set by the Kendo theme.
      */
     set size(size: ToolbarSize);
     get size(): ToolbarSize;

package/tools/toolbar-button.component.d.ts

@@ -11,7 +11,7 @@ import { SVGIcon } from '@progress/kendo-svg-icons';
 import { ToolBarComponent } from '../toolbar.component';
 import * as i0 from "@angular/core";
 /**
- * Represents the [Kendo UI ToolBar Button tool for Angular]({% slug controltypes_toolbar %}#toc-buttons).
+ * Represents the [Kendo UI ToolBar Button tool for Angular](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#buttons).
  *
  * Use this component to render a button inside the ToolBar.
  *
@@ -43,7 +43,7 @@ export declare class ToolBarButtonComponent extends ToolBarToolComponent {
     get showIcon(): DisplayMode;
     /**
      * Specifies the text of the Button
-     * ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#buttons)).
      */
     set text(text: string);
     get text(): string;
@@ -69,12 +69,12 @@ export declare class ToolBarButtonComponent extends ToolBarToolComponent {
     title: string;
     /**
      * Disables the Button when set to `true`
-     * ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#buttons)).
      */
     disabled: boolean;
     /**
      * Provides visual styling to indicate if the Button is active
-     * ([see example]({% slug controltypes_toolbar %}#toc-toggle-buttons)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#toggle-buttons)).
      * For toggleable buttons, set this to `true`.
      * @default false
      */
@@ -95,27 +95,20 @@ export declare class ToolBarButtonComponent extends ToolBarToolComponent {
      */
     selected: boolean;
     /**
-     * Specifies the background and border styles of the Button.
-     * Accepts a `ButtonFillMode` value.
-     * @default 'solid'
+     * Specifies the background and border styles of the Button. The default value is set by the Kendo theme.
      */
     fillMode: ButtonFillMode;
     /**
-     * Specifies the border radius of the Button.
-     * Accepts a `ButtonRounded` value.
-     *
-     * @default 'medium'
+     * Specifies the border radius of the Button. The default value is set by the Kendo theme.
      */
     rounded: ButtonRounded;
     /**
-     * Specifies the predefined theme color of the Button.
-     * Accepts a `ButtonThemeColor` value.
-     * @default 'base'
+     * Specifies the predefined theme color of the Button. The default value is set by the Kendo theme.
      */
     themeColor: ButtonThemeColor;
     /**
      * Defines the name for an existing icon in a Kendo UI theme
-     * ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#buttons)).
      * The icon is rendered inside the Button by a `span.k-icon` element.
      */
     set icon(icon: string);
@@ -126,7 +119,7 @@ export declare class ToolBarButtonComponent extends ToolBarToolComponent {
     set iconClass(iconClass: string);
     /**
      * Defines an SVGIcon to be rendered within the button.
-     * Accepts either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Accepts either an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
      */
     set svgIcon(icon: SVGIcon);
     /**

package/tools/toolbar-buttongroup.component.d.ts

@@ -11,7 +11,7 @@ import { PreventableEvent } from '@progress/kendo-angular-buttons';
 import { ToolBarComponent } from '../toolbar.component';
 import * as i0 from "@angular/core";
 /**
- * Represents the [Kendo UI Toolbar ButtonGroup for Angular](slug:controltypes_toolbar#button-groups).
+ * Represents the [Kendo UI Toolbar ButtonGroup for Angular](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#button-groups).
  *
  * Use this component to group buttons in a ButtonGroup inside the ToolBar.
  *
@@ -41,7 +41,7 @@ export declare class ToolBarButtonGroupComponent extends ToolBarToolComponent {
      * @hidden
      *
      * Used to set different fillmode in Spreadsheet and Toolbar to comply with referent rendering.
-     * @default 'solid'
+     * @default undefined
      */
     fillMode: 'solid' | 'flat';
     /**

package/tools/toolbar-dropdownbutton.component.d.ts

@@ -13,7 +13,7 @@ import { SVGIcon } from '@progress/kendo-svg-icons';
 import { ToolBarComponent } from '../toolbar.component';
 import * as i0 from "@angular/core";
 /**
- * Represents the [Kendo UI ToolBar DropDownButton for Angular](slug:controltypes_toolbar#drop-down-buttons).
+ * Represents the [Kendo UI ToolBar DropDownButton for Angular](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#drop-down-buttons).
  *
  * Use this component to add a button that opens a popup with a list of items in the ToolBar.
  *
@@ -54,7 +54,7 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
     get showIcon(): DisplayMode;
     /**
      * Sets the text of the DropDownButton
-     * ([see example](slug:controltypes_toolbar#toc-drop-down-buttons)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#drop-down-buttons)).
      */
     set text(text: string);
     get text(): string;
@@ -64,7 +64,7 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
     set icon(icon: string);
     /**
      * Sets the `SVGIcon` rendered in the button.
-     * Accepts an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Accepts an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
      */
     set svgIcon(icon: SVGIcon);
     /**
@@ -91,15 +91,13 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
     set primary(primary: boolean);
     /**
      * Sets the fill mode for the button.
-     * The fill mode represents the background and border styles.
-     * @default 'solid'
+     * The fill mode represents the background and border styles. The default value is set by the Kendo theme.
      */
     fillMode: ButtonFillMode;
     /**
      * Sets the predefined theme color for the button.
      * The theme color applies to the background, border, and text
-     * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
-     * @default 'base'
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/api/dropdownbuttoncomponent#themecolor)). The default value is set by the Kendo theme.
      */
     themeColor: ButtonThemeColor;
     /**
@@ -118,7 +116,7 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
     disabled: boolean;
     /**
      * Sets the data of the DropDownButton
-     * ([see example](slug:controltypes_toolbar#drop-down-buttons)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#drop-down-buttons)).
      *
      * > Provide the data as an array-like list.
      */

package/tools/toolbar-separator.component.d.ts

@@ -6,7 +6,7 @@ import { ElementRef, AfterViewInit } from '@angular/core';
 import { ToolBarToolComponent } from './toolbar-tool.component';
 import * as i0 from "@angular/core";
 /**
- * Represents the [Kendo UI ToolBar Separator for Angular]({% slug controltypes_toolbar %}#toc-separators).
+ * Represents the [Kendo UI ToolBar Separator for Angular](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#separators).
  *
  * Use this component to add a visual separator between ToolBar tools.
  *

package/tools/toolbar-spacer.component.d.ts

@@ -6,7 +6,7 @@ import { AfterViewInit } from '@angular/core';
 import { ToolBarToolComponent } from './toolbar-tool.component';
 import * as i0 from "@angular/core";
 /**
- * Represents the [Kendo UI ToolBar Spacer for Angular]({% slug controltypes_toolbar %}#toc-separators).
+ * Represents the [Kendo UI ToolBar Spacer for Angular](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#separators).
  *
  * Use the ToolBar Spacer to add flexible space between ToolBar tools.
  *

package/tools/toolbar-splitbutton.component.d.ts

@@ -13,7 +13,7 @@ import { SVGIcon } from '@progress/kendo-svg-icons';
 import { ToolBarComponent } from '../toolbar.component';
 import * as i0 from "@angular/core";
 /**
- * Represents the [Kendo UI ToolBar SplitButton for Angular](slug:controltypes_toolbar#split-buttons).
+ * Represents the [Kendo UI ToolBar SplitButton for Angular](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#split-buttons).
  *
  * Use the ToolBar SplitButton to create a split button with a main button and a drop-down list of actions in the ToolBar.
  *
@@ -40,18 +40,18 @@ export declare class ToolBarSplitButtonComponent extends ToolBarToolComponent im
     set showIcon(value: DisplayMode);
     get showIcon(): DisplayMode;
     /**
-     * Sets the text of the SplitButton ([see example](slug:controltypes_toolbar#toc-split-buttons)).
+     * Sets the text of the SplitButton ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#split-buttons)).
      */
     set text(text: string);
     get text(): string;
     /**
      * Sets the icon rendered next to the button text
-     * ([see example](slug:controltypes_toolbar#toc-split-buttons)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#split-buttons)).
      */
     set icon(icon: string);
     /**
      * Sets the `SVGIcon` rendered in the main button.
-     * Accepts an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Accepts an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
      */
     set svgIcon(icon: SVGIcon);
     /**
@@ -75,14 +75,12 @@ export declare class ToolBarSplitButtonComponent extends ToolBarToolComponent im
     get popupSettings(): PopupSettings;
     /**
      * Sets the fill mode for the button.
-     * The fill mode represents the background and border styles.
-     * @default 'solid'
+     * The fill mode represents the background and border styles. The default value is set by the Kendo theme.
      */
     fillMode: ButtonFillMode;
     /**
      * Sets the predefined theme color for the button.
-     * The theme color applies to the background, border, and text.
-     * @default 'base'
+     * The theme color applies to the background, border, and text. The default value is set by the Kendo theme.
      */
     themeColor: ButtonThemeColor;
     /**
@@ -100,11 +98,11 @@ export declare class ToolBarSplitButtonComponent extends ToolBarToolComponent im
      */
     arrowButtonClass: any;
     /**
-     * Sets the name of the [font icon](slug:icons#icons-list) for the arrow button.
+     * Sets the name of the [font icon](https://www.telerik.com/kendo-angular-ui/components/styling/icons#icons-list) for the arrow button.
      */
     arrowButtonIcon: string;
     /**
-     * Sets the [`SVGIcon`](slug:api_icons_svgicon) for the arrow button.
+     * Sets the [`SVGIcon`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgicon) for the arrow button.
      */
     arrowButtonSvgIcon: SVGIcon;
     /**
@@ -113,7 +111,7 @@ export declare class ToolBarSplitButtonComponent extends ToolBarToolComponent im
      */
     textField: string;
     /**
-     * Sets the data of the SplitButton ([see example](slug:controltypes_toolbar#toc-split-buttons)).
+     * Sets the data of the SplitButton ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#split-buttons)).
      *
      * > Provide the data as an array-like list.
      */

package/tools/toolbar-tool.component.d.ts

@@ -67,7 +67,7 @@ export declare class ToolBarToolComponent {
     /**
      * Called when the tool is focused and an arrow key is pressed.
      * Returns a boolean value that determines if the `ToolBarComponent` moves focus to the next or previous tool
-     * ([see example]({% slug customcontroltypes_toolbar %}#toc-adding-keyboard-navigation)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/custom-control-types#adding-keyboard-navigation)).
      * @param {KeyboardEvent} _ev - The last pressed arrow key.
      * @returns `true` if focus moves to another tool.
      */

package/util.d.ts

@@ -28,6 +28,10 @@ export declare function outerHeight(element: any): number;
  * @hidden
  */
 export declare const closest: (node: any, predicate: any) => any;
+/**
+ * @hidden
+ */
+export declare const isSmartBoxInput: (target: any) => boolean;
 /**
  * @hidden
  */