@progress/kendo-angular-buttons 22.1.0-develop.8 → 23.0.0-develop.1

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

@@ -46,7 +46,7 @@ const packageMetadata = {
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
     publishDate: 0,
-    version: '22.1.0-develop.8',
+    version: '23.0.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -103,25 +103,37 @@ const ROUNDNESS = {
 /**
  * @hidden
  *
- * Returns the styling classes to be added and removed
+ * Returns the styling classes to be added and removed.
  */
 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 'rounded':
+        }
+        case 'rounded': {
+            let roundedClassToAdd = null;
+            if (newValue) {
+                if (newValue !== 'none') {
+                    roundedClassToAdd = `k-rounded-${ROUNDNESS[newValue]}`;
+                }
+                else {
+                    roundedClassToAdd = 'k-rounded-none';
+                }
+            }
             return {
-                toRemove: `k-rounded-${ROUNDNESS[previousValue]}`,
-                toAdd: newValue !== 'none' ? `k-rounded-${ROUNDNESS[newValue]}` : ''
+                toRemove: previousValue ? `k-rounded-${ROUNDNESS[previousValue]}` : null,
+                toAdd: roundedClassToAdd || 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;
     }
@@ -131,10 +143,10 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
  *
  * Returns the themeColor classes to be added and removed
  */
-const getThemeColorClasses = (componentType, prevFillMode, fillMode, previousValue, newValue) => {
+const getThemeColorClasses = (componentType, previousValue, newValue) => {
     return {
-        toRemove: `k-${componentType}-${prevFillMode}-${previousValue}`,
-        toAdd: newValue !== 'none' ? `k-${componentType}-${fillMode}-${newValue}` : ''
+        toRemove: previousValue ? `k-${componentType}-${previousValue}` : null,
+        toAdd: newValue ? `k-${componentType}-${newValue}` : null
     };
 };
 /**
@@ -155,10 +167,6 @@ const toggleClass = (className, add, renderer, element) => {
  */
 const isObjectEmpty = (obj) => obj && Object.keys(obj).length === 0 && obj.constructor === Object;
 
-const DEFAULT_ROUNDED$4 = 'medium';
-const DEFAULT_SIZE$3 = 'medium';
-const DEFAULT_THEME_COLOR$3 = 'base';
-const DEFAULT_FILL_MODE$4 = 'solid';
 /**
  * Represents the Kendo UI Button component for Angular.
  *
@@ -268,42 +276,39 @@ class ButtonComponent {
     }
     /**
      * Sets the padding of the Button.
-     * See [Button Appearance]({% slug appearance_button %}#size).
+     * See [Button Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/button/appearance#size).
      *
      * @default 'medium'
      */
     set size(size) {
-        const newSize = size || DEFAULT_SIZE$3;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
+        this.handleClasses(size, 'size');
+        this._size = size;
     }
     get size() {
         return this._size;
     }
     /**
      * Sets the border radius of the Button.
-     * See [Button Appearance](slug:appearance_button#roundness).
+     * See [Button Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/button/appearance#roundness).
      *
      * @default 'medium'
      */
     set rounded(rounded) {
-        const newRounded = rounded || DEFAULT_ROUNDED$4;
-        this.handleClasses(newRounded, 'rounded');
-        this._rounded = newRounded;
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
     }
     get rounded() {
         return this._rounded;
     }
     /**
      * Sets the background and border styles of the Button.
-     * See [Button Appearance](slug:appearance_button#fill-mode).
+     * See [Button Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/button/appearance#fill-mode).
      *
      * @default 'solid'
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode || DEFAULT_FILL_MODE$4;
-        this.handleClasses(newFillMode, 'fillMode');
-        this._fillMode = newFillMode;
+        this.handleClasses(fillMode, 'fillMode');
+        this._fillMode = fillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -311,14 +316,13 @@ class ButtonComponent {
     /**
      * 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).
+     * See [Button Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/button/appearance#theme-colors).
      *
      * @default 'base'
      */
     set themeColor(themeColor) {
-        const newThemeColor = themeColor || DEFAULT_THEME_COLOR$3;
-        this.handleThemeColor(newThemeColor);
-        this._themeColor = newThemeColor;
+        this.handleThemeColor(themeColor);
+        this._themeColor = themeColor;
     }
     get themeColor() {
         return this._themeColor;
@@ -347,10 +351,10 @@ class ButtonComponent {
     element;
     isDisabled = false;
     caretAltDownIcon = caretAltDownIcon;
-    _size = DEFAULT_SIZE$3;
-    _rounded = DEFAULT_ROUNDED$4;
-    _fillMode = DEFAULT_FILL_MODE$4;
-    _themeColor = DEFAULT_THEME_COLOR$3;
+    _size = undefined;
+    _rounded = undefined;
+    _fillMode = undefined;
+    _themeColor = undefined;
     _focused = false;
     direction;
     _selected;
@@ -446,12 +450,6 @@ class ButtonComponent {
             this.toggleAriaPressed(this.toggleable);
         }
     }
-    ngAfterViewInit() {
-        const stylingOptions = ['size', 'rounded', 'fillMode'];
-        stylingOptions.forEach(input => {
-            this.handleClasses(this[input], input);
-        });
-    }
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
@@ -532,7 +530,7 @@ class ButtonComponent {
         const elem = this.element;
         const classes = getStylingClasses('button', input, this[input], value);
         if (input === 'fillMode') {
-            this.handleThemeColor(this.themeColor, this[input], value);
+            this.handleThemeColor(this.themeColor);
         }
         if (classes.toRemove) {
             this.renderer.removeClass(elem, classes.toRemove);
@@ -541,16 +539,14 @@ class ButtonComponent {
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
-    handleThemeColor(value, prevFillMode, fillMode) {
+    handleThemeColor(value) {
         const elem = this.element;
-        const removeFillMode = prevFillMode || this.fillMode;
-        const addFillMode = fillMode || this.fillMode;
-        const themeColorClass = getThemeColorClasses('button', removeFillMode, addFillMode, this.themeColor, value);
-        this.renderer.removeClass(elem, themeColorClass.toRemove);
-        if (addFillMode !== 'none' && fillMode !== 'none') {
-            if (themeColorClass.toAdd) {
-                this.renderer.addClass(elem, themeColorClass.toAdd);
-            }
+        const themeColorClass = getThemeColorClasses('button', this.themeColor, value);
+        if (themeColorClass.toRemove) {
+            this.renderer.removeClass(elem, themeColorClass.toRemove);
+        }
+        if (themeColorClass.toAdd) {
+            this.renderer.addClass(elem, themeColorClass.toAdd);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: KendoButtonService, optional: true }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
@@ -586,7 +582,7 @@ class ButtonComponent {
             [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
           </span>
         }
-        
+
         `, isInline: true, dependencies: [{ 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: "19.2.18", ngImport: i0, type: ButtonComponent, decorators: [{
@@ -627,7 +623,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
           </span>
         }
-        
+
         `,
                     standalone: true,
                     imports: [IconWrapperComponent, NgClass]
@@ -1041,10 +1037,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 args: ['attr.tabindex']
             }] } });
 
-const DEFAULT_SIZE$2 = 'medium';
-const DEFAULT_ROUNDED$3 = 'medium';
-const DEFAULT_THEME_COLOR$2 = 'base';
-const DEFAULT_FILL_MODE$3 = 'solid';
 /**
  * Displays a Chip that represents an input, attribute, or action.
  *
@@ -1068,8 +1060,8 @@ class ChipComponent {
      */
     icon;
     /**
-     * Defines an [`SVGIcon`](slug:api_icons_svgicon) to render inside the Chip using
-     * a [`KendoSVGIcon`](slug:api_icons_svgiconcomponent) component.
+     * Defines an [`SVGIcon`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgicon) to render inside the Chip using
+     * a [`KendoSVGIcon`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgiconcomponent) component.
      */
     svgIcon;
     /**
@@ -1094,7 +1086,7 @@ class ChipComponent {
     removable = false;
     /**
      * Specifies a custom remove font icon class to render when the Chip is removable.
-     * [see example]({% slug icons %})
+     * [see example](https://www.telerik.com/kendo-angular-ui/components/styling/icons)
      */
     removeIcon;
     /**
@@ -1126,45 +1118,40 @@ class ChipComponent {
     disabled = false;
     /**
      * Sets the padding of the Chip.
-     * See [Chip Appearance]({% slug appearance_chip %}#size).
+     * See [Chip Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/chip/appearance#size).
      *
      * @default 'medium'
      */
     set size(size) {
-        const newSize = size || DEFAULT_SIZE$2;
-        if (!this.sizeIsSet) {
-            this.sizeIsSet = true;
-        }
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
+        !this.sizeIsSet && (this.sizeIsSet = true);
+        this.handleClasses(size, 'size');
+        this._size = size;
     }
     get size() {
         return this._size;
     }
     /**
      * Sets the border radius of the Chip.
-     * See [Chip Appearance](slug:appearance_chip#roundness).
+     * See [Chip Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/chip/appearance#roundness).
      *
      * @default 'medium'
      */
     set rounded(rounded) {
-        const newRounded = rounded || DEFAULT_ROUNDED$3;
-        this.handleClasses(newRounded, 'rounded');
-        this._rounded = newRounded;
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
     }
     get rounded() {
         return this._rounded;
     }
     /**
      * Sets the background and border styles of the Chip.
-     * See [Chip Appearance](slug:appearance_chip#fill-mode).
+     * See [Chip Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/chip/appearance#fill-mode).
      *
      * @default 'solid'
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode || DEFAULT_FILL_MODE$3;
-        this.handleClasses(newFillMode, 'fillMode');
-        this._fillMode = newFillMode;
+        this.handleClasses(fillMode, 'fillMode');
+        this._fillMode = fillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -1172,14 +1159,13 @@ class ChipComponent {
     /**
      * 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).
+     * See [Chip Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/chip/appearance#theme-colors).
      *
      * @default 'base'
      */
     set themeColor(themeColor) {
-        const newThemeColor = themeColor || DEFAULT_THEME_COLOR$2;
-        this.handleThemeColor(newThemeColor);
-        this._themeColor = newThemeColor;
+        this.handleThemeColor(themeColor);
+        this._themeColor = themeColor;
     }
     get themeColor() {
         return this._themeColor;
@@ -1228,10 +1214,10 @@ class ChipComponent {
      * @hidden
      */
     sizeIsSet = false;
-    _size = 'medium';
-    _rounded = 'medium';
-    _fillMode = 'solid';
-    _themeColor = 'base';
+    _size = undefined;
+    _rounded = undefined;
+    _fillMode = undefined;
+    _themeColor = undefined;
     focused = false;
     subs = new Subscription();
     constructor(element, renderer, ngZone, localizationService) {
@@ -1260,10 +1246,6 @@ class ChipComponent {
     }
     ngAfterViewInit() {
         const chip = this.element.nativeElement;
-        const stylingOptions = ['size', 'rounded', 'fillMode'];
-        stylingOptions.forEach(input => {
-            this.handleClasses(this[input], input);
-        });
         this.attachElementEventHandlers(chip);
     }
     /**
@@ -1352,7 +1334,7 @@ class ChipComponent {
         const elem = this.element.nativeElement;
         const classes = getStylingClasses('chip', input, this[input], value);
         if (input === 'fillMode') {
-            this.handleThemeColor(this.themeColor, this[input], value);
+            this.handleThemeColor(this.themeColor);
         }
         if (classes.toRemove) {
             this.renderer.removeClass(elem, classes.toRemove);
@@ -1361,16 +1343,14 @@ class ChipComponent {
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
-    handleThemeColor(value, prevFillMode, fillMode) {
+    handleThemeColor(value) {
         const elem = this.element.nativeElement;
-        const removeFillMode = prevFillMode || this.fillMode;
-        const addFillMode = fillMode || this.fillMode;
-        const themeColorClass = getThemeColorClasses('chip', removeFillMode, addFillMode, this.themeColor, value);
-        this.renderer.removeClass(elem, themeColorClass.toRemove);
-        if (addFillMode !== 'none' && fillMode !== 'none') {
-            if (themeColorClass.toAdd) {
-                this.renderer.addClass(elem, themeColorClass.toAdd);
-            }
+        const themeColorClass = getThemeColorClasses('chip', this.themeColor, value);
+        if (themeColorClass.toRemove) {
+            this.renderer.removeClass(elem, themeColorClass.toRemove);
+        }
+        if (themeColorClass.toAdd) {
+            this.renderer.addClass(elem, themeColorClass.toAdd);
         }
     }
     keyDownHandler(e) {
@@ -1406,7 +1386,7 @@ class ChipComponent {
             [name]="icon"
           [svgIcon]="svgIcon"></kendo-icon-wrapper>
         }
-        
+
         @if (iconClass) {
           <kendo-icon-wrapper
             size="small"
@@ -1427,7 +1407,7 @@ class ChipComponent {
             }
           </span>
         }
-        
+
         <span class="k-chip-content">
           @if (label) {
             <span class="k-chip-label">
@@ -1438,7 +1418,7 @@ class ChipComponent {
             <ng-content></ng-content>
           }
         </span>
-        
+
         @if (hasMenu || removable) {
           <span class="k-chip-actions">
             @if (hasMenu) {
@@ -1477,7 +1457,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             [name]="icon"
           [svgIcon]="svgIcon"></kendo-icon-wrapper>
         }
-        
+
         @if (iconClass) {
           <kendo-icon-wrapper
             size="small"
@@ -1498,7 +1478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }
           </span>
         }
-        
+
         <span class="k-chip-content">
           @if (label) {
             <span class="k-chip-label">
@@ -1509,7 +1489,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             <ng-content></ng-content>
           }
         </span>
-        
+
         @if (hasMenu || removable) {
           <span class="k-chip-actions">
             @if (hasMenu) {
@@ -1646,15 +1626,14 @@ class ChipListComponent {
     selection = 'none';
     /**
      * Sets the gap between the Chips in the ChipList.
-     * See [ChipList Appearance]({% slug appearance_chiplist %}#size).
+     * See [ChipList Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/chiplist/appearance#size).
      *
      * @default 'medium'
      */
     set size(size) {
-        const sizeValue = size || 'medium';
-        this.handleClasses(sizeValue, 'size');
-        this.chips?.forEach(chip => this.setChipSize(chip, sizeValue));
-        this._size = sizeValue;
+        this.handleClasses(size, 'size');
+        this.chips?.forEach(chip => this.setChipSize(chip, size));
+        this._size = size;
     }
     get size() {
         return this._size;
@@ -1679,7 +1658,7 @@ class ChipListComponent {
      */
     role = 'listbox';
     dynamicRTLSubscription;
-    _size = 'medium';
+    _size = undefined;
     subs = new Subscription();
     _navigable = true;
     /**
@@ -1982,7 +1961,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * </kendo-dropdownbutton>
  * ```
  *
- * For more examples, refer to the article on the [DropDownButton templates](slug:itemstemplates_dropdownbutton).
+ * For more examples, refer to the article on the [DropDownButton templates](https://www.telerik.com/kendo-angular-ui/components/buttons/dropdownbutton/items-and-templates).
  */
 class ButtonItemTemplateDirective {
     templateRef;
@@ -2843,7 +2822,6 @@ const NAVIGATION_SETTINGS_PROVIDER$2 = {
     provide: NAVIGATION_CONFIG,
     useValue: NAVIGATION_SETTINGS$2
 };
-const DEFAULT_FILL_MODE$2 = 'solid';
 /**
  * Represents the Kendo UI DropDownButton component for Angular.
  *
@@ -2883,7 +2861,7 @@ class DropDownButtonComponent extends ListButton {
      */
     icon = '';
     /**
-     * Specifies an [`SVGIcon`](slug:api_icons_svgicon) to render within the button.
+     * Specifies an [`SVGIcon`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgicon) to render within the button.
      */
     svgIcon;
     /**
@@ -2909,17 +2887,17 @@ class DropDownButtonComponent extends ListButton {
         return this._data;
     }
     /**
-     * Specifies the padding of the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#size).
+     * Specifies the padding of the DropDownButton. See [DropDownButton Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/dropdownbutton/appearance#size).
      * @default 'medium'
      */
-    size = 'medium';
+    size = undefined;
     /**
-     * Specifies the border radius of the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#roundness).
+     * Specifies the border radius of the DropDownButton. See [DropDownButton Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/dropdownbutton/appearance#roundness).
      * @default 'medium'
      */
-    rounded = 'medium';
+    rounded = undefined;
     /**
-     * Specifies the background and border styles of the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#fill-mode).
+     * Specifies the background and border styles of the DropDownButton. See [DropDownButton Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/dropdownbutton/appearance#fill-mode).
      * @default 'solid'
      */
     set fillMode(fillMode) {
@@ -2929,10 +2907,10 @@ class DropDownButtonComponent extends ListButton {
         return this._fillMode;
     }
     /**
-     * Specifies predefined theme colors for the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#theme-colors).
+     * Specifies predefined theme colors for the DropDownButton. See [DropDownButton Appearance](https://www.telerik.com/kendo-angular-ui/components/buttons/dropdownbutton/appearance#theme-colors).
      * @default 'base'
      */
-    themeColor = 'base';
+    themeColor = undefined;
     /**
      * Sets attributes for the main button.
      */
@@ -2971,7 +2949,7 @@ class DropDownButtonComponent extends ListButton {
         return this._active;
     }
     itemTemplate;
-    _fillMode = DEFAULT_FILL_MODE$2;
+    _fillMode = undefined;
     _buttonAttributes = null;
     documentMouseUpSub;
     /**
@@ -3144,7 +3122,7 @@ class DropDownButtonComponent extends ListButton {
             [size]="size"
             [rounded]="rounded"
             [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
+            [themeColor]="themeColor"
             (click)="openPopup()"
             (focus)="handleFocus($event)"
             (blur)="onButtonBlur()"
@@ -3206,7 +3184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             [size]="size"
             [rounded]="rounded"
             [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
+            [themeColor]="themeColor"
             (click)="openPopup()"
             (focus)="handleFocus($event)"
             (blur)="onButtonBlur()"
@@ -3362,7 +3340,7 @@ function closeAnimation(animationSettings) {
 /**
  * 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)).
+ *([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/templates#dial-item-template)).
  *
  * @example
  * ```html
@@ -3395,7 +3373,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", 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#floatingactionbutton-template)).
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/templates#floatingactionbutton-template)).
  *
  * @example
  * ```html
@@ -3679,15 +3657,13 @@ const ROUNDED_CLASSES = {
     small: 'k-rounded-sm',
     medium: 'k-rounded-md',
     large: 'k-rounded-lg',
-    full: 'k-rounded-full'
+    full: 'k-rounded-full',
+    none: 'k-rounded-none'
 };
-const FILLMODE_CLASS = 'k-fab-solid';
+const THEME_COLOR_PREFIX = 'k-fab';
 const DEFAULT_DURATION = 180;
 const DEFAULT_ITEM_GAP = 90;
 const DEFAULT_OFFSET = '16px';
-const DEFAULT_ROUNDED$2 = 'full';
-const DEFAULT_SIZE$1 = 'medium';
-const DEFAULT_THEME_COLOR$1 = 'primary';
 /**
  * Represents the Kendo UI FloatingActionButton component for Angular.
  * Use it to represent the primary or most common action in an application.
@@ -3722,38 +3698,35 @@ class FloatingActionButtonComponent {
     dialItemTemplate;
     fabTemplate;
     /**
-     * Specifies the theme color of the FloatingActionButton ([see example](slug:appearance_floatingactionbutton#theme-colors)).
+     * Specifies the theme color of the FloatingActionButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/appearance#theme-colors)).
      * @default "primary"
      */
     set themeColor(themeColor) {
-        const newThemeColor = themeColor || DEFAULT_THEME_COLOR$1;
-        this.handleClasses(newThemeColor, 'themeColor');
-        this._themeColor = newThemeColor;
+        this.handleClasses(themeColor, 'themeColor');
+        this._themeColor = themeColor;
     }
     get themeColor() {
         return this._themeColor;
     }
     /**
-     * Specifies the size of the FloatingActionButton ([see example](slug:appearance_floatingactionbutton#size)).
+     * Specifies the size of the FloatingActionButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/appearance#size)).
      * @default "medium"
      */
     set size(size) {
-        const newSize = size || DEFAULT_SIZE$1;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
+        this.handleClasses(size, 'size');
+        this._size = size;
     }
     get size() {
         return this._size;
     }
     /**
-     * Specifies the border radius of the FloatingActionButton ([see example](slug:appearance_floatingactionbutton#roundness)).
+     * Specifies the border radius of the FloatingActionButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/appearance#roundness)).
      *
      * @default "full"
      */
     set rounded(rounded) {
-        const newRounded = rounded || DEFAULT_ROUNDED$2;
-        this.handleClasses(newRounded, 'rounded');
-        this._rounded = newRounded;
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
     }
     get rounded() {
         return this._rounded;
@@ -3769,7 +3742,7 @@ class FloatingActionButtonComponent {
         return this._disabled;
     }
     /**
-     * Specifies the alignment of the FloatingActionButton ([see example](slug:positioning_floatingactionbutton#alignment)).
+     * Specifies the alignment of the FloatingActionButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/positioning#alignment)).
      * @default { horizontal: 'end', vertical: 'top' }
      */
     set align(align) {
@@ -3779,7 +3752,7 @@ class FloatingActionButtonComponent {
         return this._align;
     }
     /**
-     * Specifies the offset position of the FloatingActionButton ([see example]({% slug positioning_floatingactionbutton %}#offset)).
+     * Specifies the offset position of the FloatingActionButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/positioning#offset)).
      * @default { x: '16px', y: '16px' }
      */
     set offset(offset) {
@@ -3790,7 +3763,7 @@ class FloatingActionButtonComponent {
         return this._offset;
     }
     /**
-     * Specifies the position mode of the FloatingActionButton ([see example](slug:positioning_floatingactionbutton#position-mode)).
+     * Specifies the position mode of the FloatingActionButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/positioning#position-mode)).
      * @default "fixed"
      */
     positionMode = 'fixed';
@@ -3799,7 +3772,7 @@ class FloatingActionButtonComponent {
      */
     icon;
     /**
-     * Defines an [`SVGIcon`](slug:api_icons_svgicon) to be rendered within the FloatingActionButton.
+     * Defines an [`SVGIcon`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgicon) to be rendered within the FloatingActionButton.
      */
     svgIcon;
     /**
@@ -3848,12 +3821,12 @@ class FloatingActionButtonComponent {
     dialItemClick = new EventEmitter();
     /**
      * Fires when the popup is about to open. This event is preventable
-     *  ([more information and example](slug:events_floatingactionbutton)).
+     *  ([more information and example](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/events)).
      */
     open = new EventEmitter();
     /**
      * Fires when the popup is about to close. This event is preventable
-     * ([more information and example](slug:events_floatingactionbutton)).
+     * ([more information and example](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/events)).
      */
     close = new EventEmitter();
     /**
@@ -3870,9 +3843,9 @@ class FloatingActionButtonComponent {
      * @hidden
      */
     dialListId = `k-dial-list-${guid()}`;
-    _themeColor = DEFAULT_THEME_COLOR$1;
-    _size = DEFAULT_SIZE$1;
-    _rounded = DEFAULT_ROUNDED$2;
+    _themeColor = undefined;
+    _size = undefined;
+    _rounded = undefined;
     _disabled = false;
     _align = { horizontal: 'end', vertical: 'bottom' };
     _offset = { x: DEFAULT_OFFSET, y: DEFAULT_OFFSET };
@@ -3939,7 +3912,7 @@ class FloatingActionButtonComponent {
      * Toggles the visibility of the FloatingActionButton dial items popup.
      *
      * If you use the `toggleDial` method to open or close the dial items,
-     * the `open` and `close` events do not fire ([more information and examples](slug:openstate_floatingactionbutton)).
+     * the `open` and `close` events do not fire ([more information and examples](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton/open_state)).
      *
      * @param open - The state of dial items popup.
      */
@@ -4129,12 +4102,12 @@ class FloatingActionButtonComponent {
         if (isPresent(this.button) && (this[input] !== inputValue || this.initialSetup)) {
             const button = this.button.nativeElement;
             const classesToRemove = {
-                themeColor: `${FILLMODE_CLASS}-${this.themeColor}`,
+                themeColor: `${THEME_COLOR_PREFIX}-${this.themeColor}`,
                 size: SIZE_CLASSES[this.size],
                 rounded: ROUNDED_CLASSES[this.rounded]
             };
             const classesToAdd = {
-                themeColor: inputValue !== 'none' ? `${FILLMODE_CLASS}-${inputValue}` : '',
+                themeColor: inputValue ? `${THEME_COLOR_PREFIX}-${inputValue}` : '',
                 size: SIZE_CLASSES[inputValue],
                 rounded: ROUNDED_CLASSES[inputValue]
             };
@@ -4375,20 +4348,20 @@ class FloatingActionButtonComponent {
             }
         ], queries: [{ propertyName: "dialItemTemplate", first: true, predicate: DialItemTemplateDirective, descendants: true }, { propertyName: "fabTemplate", first: true, predicate: FloatingActionButtonTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], ngImport: i0, template: `
         <button
-          #button
-          [attr.id]="id"
-          [tabIndex]="componentTabIndex"
-          type="button"
-          class="k-fab k-fab-solid"
-          [class.k-disabled]="disabled"
-          [ngClass]="buttonClass"
-          [disabled]="disabled"
-          [attr.aria-disabled]="disabled"
-          [attr.aria-expanded]="ariaExpanded"
-          [attr.aria-haspopup]="ariaHasPopup"
-          [attr.aria-controls]="ariaControls"
-          (focus)="focusHandler()"
-          (blur)="blurHandler($event)"
+            #button
+            [attr.id]="id"
+            [tabIndex]="componentTabIndex"
+            type="button"
+            class="k-fab"
+            [class.k-disabled]="disabled"
+            [ngClass]="buttonClass"
+            [disabled]="disabled"
+            [attr.aria-disabled]="disabled"
+            [attr.aria-expanded]="ariaExpanded"
+            [attr.aria-haspopup]="ariaHasPopup"
+            [attr.aria-controls]="ariaControls"
+            (focus)="focusHandler()"
+            (blur)="blurHandler($event)"
             [kendoEventsOutsideAngular]="{
                 keydown: keyDownHandler,
                 click: clickHandler,
@@ -4402,7 +4375,7 @@ class FloatingActionButtonComponent {
               >
             </ng-template>
           }
-        
+
           @if (!fabTemplate) {
             @if (icon || iconClass || svgIcon) {
               <kendo-icon-wrapper
@@ -4416,7 +4389,7 @@ class FloatingActionButtonComponent {
             }
           }
         </button>
-        
+
         <ng-template #popupTemplate>
           <ul
             kendoDialList
@@ -4453,20 +4426,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                     ],
                     template: `
         <button
-          #button
-          [attr.id]="id"
-          [tabIndex]="componentTabIndex"
-          type="button"
-          class="k-fab k-fab-solid"
-          [class.k-disabled]="disabled"
-          [ngClass]="buttonClass"
-          [disabled]="disabled"
-          [attr.aria-disabled]="disabled"
-          [attr.aria-expanded]="ariaExpanded"
-          [attr.aria-haspopup]="ariaHasPopup"
-          [attr.aria-controls]="ariaControls"
-          (focus)="focusHandler()"
-          (blur)="blurHandler($event)"
+            #button
+            [attr.id]="id"
+            [tabIndex]="componentTabIndex"
+            type="button"
+            class="k-fab"
+            [class.k-disabled]="disabled"
+            [ngClass]="buttonClass"
+            [disabled]="disabled"
+            [attr.aria-disabled]="disabled"
+            [attr.aria-expanded]="ariaExpanded"
+            [attr.aria-haspopup]="ariaHasPopup"
+            [attr.aria-controls]="ariaControls"
+            (focus)="focusHandler()"
+            (blur)="blurHandler($event)"
             [kendoEventsOutsideAngular]="{
                 keydown: keyDownHandler,
                 click: clickHandler,
@@ -4480,7 +4453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
               >
             </ng-template>
           }
-        
+
           @if (!fabTemplate) {
             @if (icon || iconClass || svgIcon) {
               <kendo-icon-wrapper
@@ -4494,7 +4467,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }
           }
         </button>
-        
+
         <ng-template #popupTemplate>
           <ul
             kendoDialList
@@ -4631,7 +4604,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 /**
  * Represents a custom component for overriding the default SplitButton messages.
- * ([see example]({% slug rtl_buttons %})).
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/globalization)).
  */
 class SplitButtonCustomMessagesComponent extends Messages {
     service;
@@ -4699,8 +4672,6 @@ const NAVIGATION_SETTINGS_PROVIDER = {
     provide: NAVIGATION_CONFIG,
     useValue: NAVIGATION_SETTINGS
 };
-const DEFAULT_ROUNDED$1 = 'medium';
-const DEFAULT_FILL_MODE$1 = 'solid';
 /**
  * Represents the Kendo UI SplitButton component for Angular.
  *
@@ -4738,7 +4709,7 @@ class SplitButtonComponent extends ListButton {
      */
     text = '';
     /**
-     * Specifies an icon to display next to the button text ([see example]({% slug databinding_splitbutton %}#arrays-of-complex-data)).
+     * Specifies an icon to display next to the button text ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/splitbutton/data-binding#arrays-of-complex-data)).
      */
     icon = '';
     /**
@@ -4746,7 +4717,7 @@ class SplitButtonComponent extends ListButton {
      */
     svgIcon;
     /**
-     * Specifies a custom CSS class for the icon displayed next to the button text ([see example]({% slug databinding_splitbutton %}#arrays-of-complex-data)).
+     * Specifies a custom CSS class for the icon displayed next to the button text ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/splitbutton/data-binding#arrays-of-complex-data)).
      */
     iconClass;
     /**
@@ -4754,48 +4725,46 @@ class SplitButtonComponent extends ListButton {
      */
     type = 'button';
     /**
-     * Specifies the URL of an image to display next to the button text ([see example]({% slug databinding_splitbutton %}#arrays-of-complex-data)).
+     * Specifies the URL of an image to display next to the button text ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/splitbutton/data-binding#arrays-of-complex-data)).
      */
     imageUrl = '';
     /**
-     * Configures the padding of the SplitButton ([see example]({% slug api_buttons_splitbuttoncomponent %}#size)).
+     * Configures the padding of the SplitButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/api/splitbuttoncomponent#size)).
      *
      * @default 'medium'
      */
-    size = 'medium';
+    size = undefined;
     /**
-     * Configures the border radius of the SplitButton ([see example]({% slug api_buttons_splitbuttoncomponent %}#rounded)).
+     * Configures the border radius of the SplitButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/api/splitbuttoncomponent#rounded)).
      *
      * @default 'medium'
      */
     set rounded(rounded) {
-        const newRounded = rounded || DEFAULT_ROUNDED$1;
-        this.handleClasses(newRounded, 'rounded');
-        this._rounded = newRounded;
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
     }
     get rounded() {
         return this._rounded;
     }
     /**
-     * Configures the background and border styles of the SplitButton ([see example]({% slug api_buttons_splitbuttoncomponent %}#fillMode)).
+     * Configures the background and border styles of the SplitButton ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/api/splitbuttoncomponent#fillmode)).
      *
      * @default 'solid'
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode || DEFAULT_FILL_MODE$1;
-        this._fillMode = fillMode === 'clear' ? 'flat' : newFillMode;
+        this._fillMode = fillMode === 'clear' ? 'flat' : fillMode;
     }
     get fillMode() {
         return this._fillMode;
     }
     /**
-     * Configures the theme color of the SplitButton. The theme color applies to the background, border, and text ([see example]({% slug api_buttons_splitbuttoncomponent %}#themeColor)).
+     * Configures the theme color of the SplitButton. The theme color applies to the background, border, and text ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/api/splitbuttoncomponent#themecolor)).
      *
      * @default 'base'
      */
-    themeColor = 'base';
+    themeColor = undefined;
     /**
-     * Disables the SplitButton when set to `true` ([see example]({% slug databinding_splitbutton %}#arrays-of-complex-data)).
+     * Disables the SplitButton when set to `true` ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/splitbutton/data-binding#arrays-of-complex-data)).
      */
     set disabled(value) {
         if (this.isOpen) {
@@ -4845,7 +4814,7 @@ class SplitButtonComponent extends ListButton {
      */
     arrowButtonIcon = 'caret-alt-down';
     /**
-     * Specifies the [`SVGIcon`](slug:api_icons_svgiconcomponent) displayed on the button that opens the popup.
+     * Specifies the [`SVGIcon`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgiconcomponent) displayed on the button that opens the popup.
      */
     arrowButtonSvgIcon = caretAltDownIcon;
     /**
@@ -4909,8 +4878,8 @@ class SplitButtonComponent extends ListButton {
     }
     buttonText = '';
     arrowButtonClicked = false;
-    _rounded = DEFAULT_ROUNDED$1;
-    _fillMode = DEFAULT_FILL_MODE$1;
+    _rounded = undefined;
+    _fillMode = undefined;
     _buttonAttributes = null;
     documentMouseUpSub;
     set isFocused(value) {
@@ -5242,16 +5211,15 @@ class SplitButtonComponent extends ListButton {
           ></button>
           <ng-template #popupTemplate>
             <kendo-button-list
-              [id]="listId"
-              [data]="data"
-              [textField]="textField"
-              [itemTemplate]="itemTemplate"
-              (onItemClick)="onItemClick($event)"
-              (keydown)="keyDownHandler($event)"
-              (keyup)="keyUpHandler($event)"
-              [attr.dir]="dir"
-              [size]="size"
-              >
+                [id]="listId"
+                [data]="data"
+                [textField]="textField"
+                [itemTemplate]="itemTemplate"
+                (onItemClick)="onItemClick($event)"
+                (keydown)="keyDownHandler($event)"
+                (keyup)="keyUpHandler($event)"
+                [attr.dir]="dir"
+            >
             </kendo-button-list>
           </ng-template>
           <ng-container #container></ng-container>
@@ -5334,16 +5302,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
           ></button>
           <ng-template #popupTemplate>
             <kendo-button-list
-              [id]="listId"
-              [data]="data"
-              [textField]="textField"
-              [itemTemplate]="itemTemplate"
-              (onItemClick)="onItemClick($event)"
-              (keydown)="keyDownHandler($event)"
-              (keyup)="keyUpHandler($event)"
-              [attr.dir]="dir"
-              [size]="size"
-              >
+                [id]="listId"
+                [data]="data"
+                [textField]="textField"
+                [itemTemplate]="itemTemplate"
+                (onItemClick)="onItemClick($event)"
+                (keydown)="keyDownHandler($event)"
+                (keyup)="keyUpHandler($event)"
+                [attr.dir]="dir"
+            >
             </kendo-button-list>
           </ng-template>
           <ng-container #container></ng-container>
@@ -5426,10 +5393,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 args: ['keyup', ['$event']]
             }] } });
 
-const DEFAULT_ROUNDED = 'medium';
-const DEFAULT_SIZE = 'medium';
-const DEFAULT_THEME_COLOR = 'base';
-const DEFAULT_FILL_MODE = 'solid';
 /**
  * Represents the Kendo UI SpeechToTextButton component for Angular.
  *
@@ -5463,9 +5426,8 @@ class SpeechToTextButtonComponent {
      * @default 'medium'
      */
     set size(size) {
-        const newSize = size || DEFAULT_SIZE;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
+        this.handleClasses(size, 'size');
+        this._size = size;
     }
     get size() {
         return this._size;
@@ -5476,9 +5438,8 @@ class SpeechToTextButtonComponent {
      * @default 'medium'
      */
     set rounded(rounded) {
-        const newRounded = rounded || DEFAULT_ROUNDED;
-        this.handleClasses(newRounded, 'rounded');
-        this._rounded = newRounded;
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
     }
     get rounded() {
         return this._rounded;
@@ -5489,9 +5450,8 @@ class SpeechToTextButtonComponent {
      * @default 'solid'
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode || DEFAULT_FILL_MODE;
-        this.handleClasses(newFillMode, 'fillMode');
-        this._fillMode = newFillMode;
+        this.handleClasses(fillMode, 'fillMode');
+        this._fillMode = fillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -5503,9 +5463,8 @@ class SpeechToTextButtonComponent {
      * @default 'base'
      */
     set themeColor(themeColor) {
-        const newThemeColor = themeColor || DEFAULT_THEME_COLOR;
-        this.handleThemeColor(newThemeColor);
-        this._themeColor = newThemeColor;
+        this.handleThemeColor(themeColor);
+        this._themeColor = themeColor;
     }
     get themeColor() {
         return this._themeColor;
@@ -5645,12 +5604,6 @@ class SpeechToTextButtonComponent {
             }
         }
     }
-    ngAfterViewInit() {
-        const stylingOptions = ['size', 'rounded', 'fillMode'];
-        stylingOptions.forEach(input => {
-            this.handleClasses(this[input], input);
-        });
-    }
     ngOnDestroy() {
         this.destroyWebSpeech();
         this.subs.unsubscribe();
@@ -5748,17 +5701,17 @@ class SpeechToTextButtonComponent {
     microphoneSvgIcon = microphoneOutlineIcon;
     stopSvgIcon = stopSmIcon;
     speechRecognition;
-    _size = DEFAULT_SIZE;
-    _rounded = DEFAULT_ROUNDED;
-    _fillMode = DEFAULT_FILL_MODE;
-    _themeColor = DEFAULT_THEME_COLOR;
+    _size = undefined;
+    _rounded = undefined;
+    _fillMode = undefined;
+    _themeColor = undefined;
     _focused = false;
     direction;
     handleClasses(value, input) {
         const elem = this.element;
         const classes = getStylingClasses('button', input, this[input], value);
         if (input === 'fillMode') {
-            this.handleThemeColor(this.themeColor, this[input], value);
+            this.handleThemeColor(this.themeColor);
         }
         if (classes.toRemove) {
             this.renderer.removeClass(elem, classes.toRemove);
@@ -5807,16 +5760,12 @@ class SpeechToTextButtonComponent {
     toObservable(input) {
         return input instanceof Observable ? input : from(input);
     }
-    handleThemeColor(value, prevFillMode, fillMode) {
+    handleThemeColor(value) {
         const elem = this.element;
-        const removeFillMode = prevFillMode || this.fillMode;
-        const addFillMode = fillMode || this.fillMode;
-        const themeColorClass = getThemeColorClasses('button', removeFillMode, addFillMode, this.themeColor, value);
+        const themeColorClass = getThemeColorClasses('button', this.themeColor, value);
         this.renderer.removeClass(elem, themeColorClass.toRemove);
-        if (addFillMode !== 'none' && fillMode !== 'none') {
-            if (themeColorClass.toAdd) {
-                this.renderer.addClass(elem, themeColorClass.toAdd);
-            }
+        if (themeColorClass.toAdd) {
+            this.renderer.addClass(elem, themeColorClass.toAdd);
         }
     }
     destroyWebSpeech() {