@indigina/ui-kit 1.1.126 → 1.1.127

package/lib/components/kit-button/kit-button.component.d.ts

@@ -1,6 +1,6 @@
 import { KitSvgIcon, KitSvgIconType } from '../kit-svg-icon/kit-svg-icon.const';
-import { EventEmitter } from '@angular/core';
-import { KitButtonIconPosition, KitButtonKind, KitButtonType } from './kit-button.const';
+import { EventEmitter, InputSignal } from '@angular/core';
+import { KitButtonIconPosition, KitButtonKind, KitButtonState, KitButtonType } from './kit-button.const';
 import * as i0 from "@angular/core";
 export declare class KitButtonComponent {
     /**
@@ -27,6 +27,7 @@ export declare class KitButtonComponent {
      * Defines a kind of button (regular, mini, etc.)
      */
     kind: KitButtonKind;
+    readonly state: InputSignal<KitButtonState>;
     /**
      * A place where the icon will be displayed
      */
@@ -43,7 +44,7 @@ export declare class KitButtonComponent {
      * An action which is emitted as soon as user clicked the button
      */
     clicked: EventEmitter<MouseEvent>;
-    readonly KitSvgIconType: typeof KitSvgIconType;
+    readonly kitSvgIconType: typeof KitSvgIconType;
     static ɵfac: i0.ɵɵFactoryDeclaration<KitButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KitButtonComponent, "kit-button", never, { "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; "type": { "alias": "type"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconType": { "alias": "iconType"; "required": false; }; "kind": { "alias": "kind"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "buttonClass": { "alias": "buttonClass"; "required": false; }; "active": { "alias": "active"; "required": false; }; }, { "clicked": "clicked"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KitButtonComponent, "kit-button", never, { "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; "type": { "alias": "type"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconType": { "alias": "iconType"; "required": false; }; "kind": { "alias": "kind"; "required": false; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "buttonClass": { "alias": "buttonClass"; "required": false; }; "active": { "alias": "active"; "required": false; }; }, { "clicked": "clicked"; }, never, never, false, never>;
 }

package/lib/components/kit-button/kit-button.const.d.ts

@@ -3,8 +3,7 @@ export declare enum KitButtonType {
     GHOST = "ghost",
     TEXT = "text",
     LINK = "link",
-    DASHED = "dashed",
-    SUCCESS = "success"
+    DASHED = "dashed"
 }
 export declare enum KitButtonKind {
     LARGE = "large",
@@ -15,3 +14,8 @@ export declare enum KitButtonIconPosition {
     LEADING = "leading",
     TRAILING = "trailing"
 }
+export declare enum KitButtonState {
+    DEFAULT = "default",
+    SUCCESS = "success",
+    WARNING = "warning"
+}

package/lib/components/kit-collapsed-list/kit-collapsed-list.model.d.ts

@@ -1,4 +1,10 @@
+import { KitButtonState } from '../kit-button/kit-button.const';
+import { KitSvgIcon } from '../kit-svg-icon/kit-svg-icon.const';
 export interface KitCollapsedListItem {
     text: string;
     value: string;
+    icon?: KitSvgIcon;
+    state?: KitButtonState;
+    tooltipText?: string;
+    badgeCount?: number;
 }

package/lib/components/kit-data-field/kit-data-field.component.d.ts

@@ -1,14 +1,18 @@
+import { InputSignal } from '@angular/core';
+import { KitDataFieldState } from './kit-data-field.const';
+import { KitSvgIcon, KitSvgIconType } from '../kit-svg-icon/kit-svg-icon.const';
+import { KitTooltipPosition } from '../../directives/kit-tooltip/kit-tooltip.const';
 import * as i0 from "@angular/core";
 export declare class KitDataFieldComponent {
-    /**
-     * Defines a value that is going to be applied as a label text
-     */
-    label: string;
-    /**
-     * Defines a value that is going to be applied as a value text
-     */
-    value?: string | number | null;
+    readonly label: InputSignal<string>;
+    readonly value: InputSignal<string | number | null | undefined>;
+    readonly state: InputSignal<KitDataFieldState>;
+    readonly tooltipText: InputSignal<string | undefined>;
+    readonly icon: InputSignal<KitSvgIcon | undefined>;
+    readonly iconType: InputSignal<KitSvgIconType | undefined>;
     readonly defaultValue: string;
+    readonly kitSvgIconType: typeof KitSvgIconType;
+    readonly kitTooltipPosition: typeof KitTooltipPosition;
     static ɵfac: i0.ɵɵFactoryDeclaration<KitDataFieldComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KitDataFieldComponent, "kit-data-field", never, { "label": { "alias": "label"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KitDataFieldComponent, "kit-data-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "tooltipText": { "alias": "tooltipText"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconType": { "alias": "iconType"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/lib/components/kit-data-field/kit-data-field.const.d.ts

@@ -0,0 +1,4 @@
+export declare enum KitDataFieldState {
+    DEFAULT = "default",
+    WARNING = "warning"
+}

package/lib/components/kit-scroll-navigation/kit-scroll-navigation-section/kit-scroll-navigation-section.component.d.ts

@@ -1,12 +1,17 @@
-import { ElementRef, TemplateRef } from '@angular/core';
+import { ElementRef, EventEmitter, OnChanges, TemplateRef } from '@angular/core';
+import { KitButtonState } from '../../kit-button/kit-button.const';
+import { KitSvgIcon } from '../../kit-svg-icon/kit-svg-icon.const';
 import * as i0 from "@angular/core";
-export declare class KitScrollNavigationSectionComponent {
-    /**
-     * Defines the navigation item title
-     */
+export declare class KitScrollNavigationSectionComponent implements OnChanges {
     title: string;
+    buttonState?: KitButtonState;
+    buttonIcon?: KitSvgIcon;
+    tooltipText?: string;
+    badgeCount?: number;
+    propertyChanged?: EventEmitter<void>;
     sectionTemplate: TemplateRef<HTMLElement> | null;
     sectionContent: ElementRef | null;
+    ngOnChanges(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KitScrollNavigationSectionComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KitScrollNavigationSectionComponent, "kit-scroll-navigation-section", never, { "title": { "alias": "title"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KitScrollNavigationSectionComponent, "kit-scroll-navigation-section", never, { "title": { "alias": "title"; "required": false; }; "buttonState": { "alias": "buttonState"; "required": false; }; "buttonIcon": { "alias": "buttonIcon"; "required": false; }; "tooltipText": { "alias": "tooltipText"; "required": false; }; "badgeCount": { "alias": "badgeCount"; "required": false; }; }, { "propertyChanged": "propertyChanged"; }, never, ["*"], true, never>;
 }

package/lib/components/kit-scroll-navigation/kit-scroll-navigation.component.d.ts

@@ -1,9 +1,11 @@
 import { AfterViewInit, ElementRef, InputSignal, QueryList, WritableSignal } from '@angular/core';
 import { KitScrollNavigationSectionComponent } from './kit-scroll-navigation-section/kit-scroll-navigation-section.component';
 import { KitSvgIcon } from '../kit-svg-icon/kit-svg-icon.const';
-import { KitButtonKind, KitButtonType } from '../kit-button/kit-button.const';
+import { KitButtonIconPosition, KitButtonKind, KitButtonState, KitButtonType } from '../kit-button/kit-button.const';
 import { KitCollapsedListItem } from '../kit-collapsed-list/kit-collapsed-list.model';
 import { KitCollapsedListComponent } from '../kit-collapsed-list/kit-collapsed-list.component';
+import { KitTooltipPosition } from '../../directives/kit-tooltip/kit-tooltip.const';
+import { KitBadgeTheme } from '../../directives/kit-badge/kit-badge.const';
 import * as i0 from "@angular/core";
 export declare class KitScrollNavigationComponent implements AfterViewInit {
     readonly isNavigationBtnDisabled: InputSignal<boolean>;
@@ -11,17 +13,23 @@ export declare class KitScrollNavigationComponent implements AfterViewInit {
     sections: QueryList<KitScrollNavigationSectionComponent> | null;
     content: ElementRef | null;
     collapsedList: KitCollapsedListComponent | null;
-    readonly KitSvgIcon: typeof KitSvgIcon;
-    readonly KitButtonType: typeof KitButtonType;
-    readonly KitButtonKind: typeof KitButtonKind;
+    readonly kitSvgIcon: typeof KitSvgIcon;
+    readonly kitButtonType: typeof KitButtonType;
+    readonly kitButtonKind: typeof KitButtonKind;
+    readonly kitButtonState: typeof KitButtonState;
+    readonly kitButtonIconPosition: typeof KitButtonIconPosition;
+    readonly kitTooltipPosition: typeof KitTooltipPosition;
+    readonly kitBadgeTheme: typeof KitBadgeTheme;
     protected readonly collapsedListItems: WritableSignal<KitCollapsedListItem[]>;
     private disableScrollUpdates;
     get currentVisibleItem(): KitCollapsedListItem | null;
     ngAfterViewInit(): void;
     onSectionScroll(): void;
     scrollToSection(selectedItem: KitCollapsedListItem): void;
+    private updateListItems;
+    private handleSectionChanges;
     private setLastSectionMinHeight;
     private calculateLastSectionMinHeight;
     static ɵfac: i0.ɵɵFactoryDeclaration<KitScrollNavigationComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KitScrollNavigationComponent, "kit-scroll-navigation", never, { "isNavigationBtnDisabled": { "alias": "isNavigationBtnDisabled"; "required": false; "isSignal": true; }; "dropdownDefaultText": { "alias": "dropdownDefaultText"; "required": false; "isSignal": true; }; }, {}, ["sections"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KitScrollNavigationComponent, "kit-scroll-navigation", never, { "isNavigationBtnDisabled": { "alias": "isNavigationBtnDisabled"; "required": false; "isSignal": true; }; "dropdownDefaultText": { "alias": "dropdownDefaultText"; "required": false; "isSignal": true; }; }, {}, ["sections"], never, true, never>;
 }

package/lib/directives/kit-badge/kit-badge.directive.d.ts

@@ -23,5 +23,5 @@ export declare class KitBadgeDirective implements OnDestroy {
     private updateBadge;
     private removeBadge;
     static ɵfac: i0.ɵɵFactoryDeclaration<KitBadgeDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KitBadgeDirective, "[kitBadge]", never, { "kitBadgeText": { "alias": "kitBadgeText"; "required": false; "isSignal": true; }; "kitBadgeTheme": { "alias": "kitBadgeTheme"; "required": false; "isSignal": true; }; "kitBadgeVisible": { "alias": "kitBadgeVisible"; "required": false; "isSignal": true; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KitBadgeDirective, "[kitBadge]", never, { "kitBadgeText": { "alias": "kitBadgeText"; "required": false; "isSignal": true; }; "kitBadgeTheme": { "alias": "kitBadgeTheme"; "required": false; "isSignal": true; }; "kitBadgeVisible": { "alias": "kitBadgeVisible"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/lib/directives/kit-tooltip/kit-tooltip.directive.d.ts

@@ -1,13 +1,15 @@
-import { OnInit, TemplateRef } from '@angular/core';
+import { InputSignal, OnInit, TemplateRef } from '@angular/core';
 import { TooltipDirective } from '@progress/kendo-angular-tooltip';
 import { KitTooltipPosition } from './kit-tooltip.const';
 import * as i0 from "@angular/core";
 export declare class KitTooltipDirective extends TooltipDirective implements OnInit {
-    kitTooltipPosition: KitTooltipPosition;
-    kitTooltipFilter: string;
-    kitTooltipTemplateRef?: TemplateRef<HTMLElement>;
+    readonly kitTooltipPosition: InputSignal<KitTooltipPosition>;
+    readonly kitTooltipFilter: InputSignal<string>;
+    readonly kitTooltipTemplateRef: InputSignal<TemplateRef<HTMLElement> | undefined>;
+    readonly kitTooltipVisible: InputSignal<boolean>;
     constructor();
     ngOnInit(): void;
+    private getShowOption;
     static ɵfac: i0.ɵɵFactoryDeclaration<KitTooltipDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KitTooltipDirective, "[kitTooltip]", never, { "kitTooltipPosition": { "alias": "kitTooltipPosition"; "required": false; }; "kitTooltipFilter": { "alias": "kitTooltipFilter"; "required": false; }; "kitTooltipTemplateRef": { "alias": "kitTooltipTemplateRef"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KitTooltipDirective, "[kitTooltip]", never, { "kitTooltipPosition": { "alias": "kitTooltipPosition"; "required": false; "isSignal": true; }; "kitTooltipFilter": { "alias": "kitTooltipFilter"; "required": false; "isSignal": true; }; "kitTooltipTemplateRef": { "alias": "kitTooltipTemplateRef"; "required": false; "isSignal": true; }; "kitTooltipVisible": { "alias": "kitTooltipVisible"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/package.json

@@ -7,7 +7,7 @@
     "components",
     "shared"
   ],
-  "version": "1.1.126",
+  "version": "1.1.127",
   "peerDependencies": {
     "@angular/common": "^19.1.4",
     "@angular/core": "^19.1.4"

package/public-api.d.ts

@@ -1,6 +1,6 @@
 export { KitButtonComponent } from './lib/components/kit-button/kit-button.component';
 export { KitButtonModule } from './lib/components/kit-button/kit-button.module';
-export { KitButtonType, KitButtonKind, KitButtonIconPosition } from './lib/components/kit-button/kit-button.const';
+export { KitButtonType, KitButtonKind, KitButtonIconPosition, KitButtonState } from './lib/components/kit-button/kit-button.const';
 export { KitSvgSpriteModule } from './lib/components/kit-svg-sprite/kit-svg-sprite.module';
 export { KitSvgSpriteComponent } from './lib/components/kit-svg-sprite/kit-svg-sprite.component';
 export { KitSvgIconComponent } from './lib/components/kit-svg-icon/kit-svg-icon.component';
@@ -96,7 +96,6 @@ export { KitNavigationMenuComponent } from './lib/components/kit-navigation-menu
 export { KitNavigationMenuSubmenuComponent, } from './lib/components/kit-navigation-menu/kit-navigation-menu-submenu/kit-navigation-menu-submenu.component';
 export { KitNavigationMenuItem, KitNavigationMenuAppItem } from './lib/components/kit-navigation-menu/kit-navigation-menu.model';
 export { KitNavigationMenuService } from './lib/components/kit-navigation-menu/kit-navigation-menu.service';
-export { KitBadgeModule } from './lib/directives/kit-badge/kit-badge.module';
 export { KitBadgeDirective } from './lib/directives/kit-badge/kit-badge.directive';
 export { KitBadgeTheme } from './lib/directives/kit-badge/kit-badge.const';
 export { KitAvatarModule } from './lib/components/kit-avatar/kit-avatar.module';
@@ -144,7 +143,6 @@ export { KitTileLayoutComponent } from './lib/components/kit-tilelayout/kit-tile
 export { KitTileLayoutModule } from './lib/components/kit-tilelayout/kit-tilelayout.module';
 export { KitTileLayoutItemComponent } from './lib/components/kit-tilelayout/kit-tilelayout-item.component';
 export { KitTileLayoutColumnsConfig } from './lib/components/kit-tilelayout/kit-tilelayout.interface';
-export { KitScrollNavigationModule } from './lib/components/kit-scroll-navigation/kit-scroll-navigation.module';
 export { KitScrollNavigationComponent } from './lib/components/kit-scroll-navigation/kit-scroll-navigation.component';
 export { KitScrollNavigationSectionComponent, } from './lib/components/kit-scroll-navigation/kit-scroll-navigation-section/kit-scroll-navigation-section.component';
 export { KitEntitySectionComponent } from './lib/components/kit-entity-section/kit-entity-section.component';
@@ -159,6 +157,7 @@ export { KitFileCardComponent } from './lib/components/kit-file-card/kit-file-ca
 export { KitFileCardModule } from './lib/components/kit-file-card/kit-file-card.module';
 export { KitFileCardMessagesComponent } from './lib/components/kit-file-card/kit-file-card-messages.component';
 export { KitDataFieldComponent } from './lib/components/kit-data-field/kit-data-field.component';
+export { KitDataFieldState } from './lib/components/kit-data-field/kit-data-field.const';
 export { KitSearchBarModule } from './lib/components/kit-search-bar/kit-search-bar.module';
 export { KitSearchBarComponent } from './lib/components/kit-search-bar/kit-search-bar.component';
 export { KitEmptySectionComponent } from './lib/components/kit-empty-section/kit-empty-section.component';

package/styles/components/button-variants.scss

@@ -1,3 +1,14 @@
+@use "sass:map";
+@use "sass:list";
+
+@function get-state-color($state) {
+  @return map.get((
+    default: (var(--ui-kit-color-main), var(--ui-kit-color-hover), var(--ui-kit-color-main), var(--ui-kit-color-background)),
+    success: (var(--ui-kit-color-green-1), var(--ui-kit-color-green-6), var(--ui-kit-color-green-7), var(--ui-kit-color-green-5)),
+    warning: (var(--ui-kit-color-orange), var(--ui-kit-color-orange-6), var(--ui-kit-color-orange-7), var(--ui-kit-color-orange-4)),
+  ), $state)
+}
+
 @mixin setIconColor($color) {
   &.fill {
     fill: $color;
@@ -10,200 +21,191 @@
   }
 }
 
-@mixin styles {
-  .k-button-text {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .kit-button-icon {
-    display: block;
-  }
+@mixin applyStateColors($state) {
+  .#{$state} {
+    &.primary {
+      color: var(--ui-kit-color-white);
+      background: list.nth(get-state-color($state), 1);
 
-  .k-button {
-    font-weight: 400;
-    border: 1px solid transparent;
-    transition: none;
-
-    &:focus {
-      box-shadow: none;
-    }
+      &:hover {
+        background: list.nth(get-state-color($state), 2);
+      }
 
-    &:disabled {
-      color: var(--ui-kit-color-grey-12);
-      border: 1px solid var(--ui-kit-color-grey-11);
-      background: var(--ui-kit-color-grey-13);
+      &.active,
+      &:active {
+        background: list.nth(get-state-color($state), 1);
+      }
 
       .kit-button-icon {
-        @include setIconColor(var(--ui-kit-color-grey-12));
+        @include setIconColor(var(--ui-kit-color-white));
       }
     }
-  }
 
-  .primary {
-    color: var(--ui-kit-color-white);
-    background: var(--ui-kit-color-main);
-
-    &:hover {
-      background: var(--ui-kit-color-hover);
-    }
+    &.ghost {
+      color: var(--ui-kit-color-grey-10);
+      @if $state == warning {
+        border-color: var(--ui-kit-color-orange);
+        background: var(--ui-kit-color-orange-4);
+      } @else {
+        border-color: var(--ui-kit-color-grey-11);
+        background: var(--ui-kit-color-white);
+      }
 
-    &.active,
-    &:active {
-      background: var(--ui-kit-color-main);
-    }
+      &:hover {
+        color: list.nth(get-state-color($state), 2);
+        border-color: list.nth(get-state-color($state), 2);
 
-    .kit-button-icon {
-      @include setIconColor(var(--ui-kit-color-white));
-    }
-  }
+        .kit-button-icon {
+          @include setIconColor(list.nth(get-state-color($state), 2));
+        }
+      }
 
-  .ghost {
-    color: var(--ui-kit-color-grey-10);
-    border-color: var(--ui-kit-color-grey-11);
-    background: var(--ui-kit-color-white);
+      &.active,
+      &:active {
+        color: list.nth(get-state-color($state), 3);
+        border-color: list.nth(get-state-color($state), 3);
+        background: list.nth(get-state-color($state), 4);
 
-    &:hover {
-      color: var(--ui-kit-color-hover);
-      border-color: var(--ui-kit-color-hover);
+        .kit-button-icon {
+          @include setIconColor(list.nth(get-state-color($state), 3));
+        }
+      }
 
       .kit-button-icon {
-        @include setIconColor(var(--ui-kit-color-hover));
+        @include setIconColor(var(--ui-kit-color-grey-10));
       }
     }
 
-    &.active,
-    &:active {
-      color: var(--ui-kit-color-main);
-      border-color: var(--ui-kit-color-main);
-      background: var(--ui-kit-color-background);
+    &.text {
+      color: var(--ui-kit-color-grey-10);
+      background: none;
 
-      .kit-button-icon {
-        @include setIconColor(var(--ui-kit-color-main));
+      &:disabled {
+        border: none;
+        background: none;
       }
-    }
 
-    .kit-button-icon {
-      @include setIconColor(var(--ui-kit-color-grey-10));
-    }
-  }
+      &:hover,
+      &.active,
+      &:active {
+        background: var(--ui-kit-color-grey-13);
+      }
 
-  .text {
-    color: var(--ui-kit-color-grey-10);
-    background: none;
+      &:hover {
+        color: list.nth(get-state-color($state), 2);
 
-    &:disabled {
-      border: none;
-      background: none;
-    }
+        .kit-button-icon {
+          @include setIconColor(list.nth(get-state-color($state), 2));
+        }
+      }
 
-    &:hover,
-    &.active,
-    &:active {
-      background: var(--ui-kit-color-grey-13);
-    }
+      &.active,
+      &:active {
+        color: var(--ui-kit-color-grey-10);
 
-    &:hover {
-      color: var(--ui-kit-color-hover);
+        .kit-button-icon {
+          @include setIconColor(var(--ui-kit-color-grey-10));
+        }
+      }
 
       .kit-button-icon {
-        @include setIconColor(var(--ui-kit-color-hover));
+        @include setIconColor(var(--ui-kit-color-grey-10));
       }
     }
 
-    &.active,
-    &:active {
-      color: var(--ui-kit-color-main);
+    &.link {
+      color: list.nth(get-state-color($state), 1);
+      background: none;
 
-      .kit-button-icon {
-        @include setIconColor(var(--ui-kit-color-main));
+      &:disabled {
+        border: none;
+        background: none;
       }
-    }
 
-    .kit-button-icon {
-      @include setIconColor(var(--ui-kit-color-grey-10));
-    }
-  }
+      &:hover {
+        color: list.nth(get-state-color($state), 2);
 
-  .link {
-    color: var(--ui-kit-color-main);
-    background: none;
+        .kit-button-icon {
+          @include setIconColor(list.nth(get-state-color($state), 2));
+        }
+      }
 
-    &:disabled {
-      border: none;
-      background: none;
-    }
+      &.active,
+      &:active {
+        color: list.nth(get-state-color($state), 1);
 
-    &:hover {
-      color: var(--ui-kit-color-hover);
+        .kit-button-icon {
+          @include setIconColor(list.nth(get-state-color($state), 1));
+        }
+      }
 
       .kit-button-icon {
-        @include setIconColor(var(--ui-kit-color-hover));
+        @include setIconColor(list.nth(get-state-color($state), 1));
       }
     }
 
-    &.active,
-    &:active {
-      color: var(--ui-kit-color-main);
+    &.dashed {
+      color: list.nth(get-state-color($state), 1);
+      border-color: list.nth(get-state-color($state), 1);
+      border-style: dashed;
+      background: var(--ui-kit-color-white);
 
-      .kit-button-icon {
-        @include setIconColor(var(--ui-kit-color-main));
+      &:disabled {
+        border-style: dashed;
       }
-    }
-
-    .kit-button-icon {
-      @include setIconColor(var(--ui-kit-color-main));
-    }
-  }
 
-  .dashed {
-    color: var(--ui-kit-color-main);
-    border-color: var(--ui-kit-color-main);
-    border-style: dashed;
-    background: var(--ui-kit-color-white);
+      &:hover {
+        color: list.nth(get-state-color($state), 2);
+        border-color: list.nth(get-state-color($state), 2);
 
-    &:disabled {
-      border-style: dashed;
-    }
+        .kit-button-icon {
+          @include setIconColor(list.nth(get-state-color($state), 2));
+        }
+      }
 
-    &:hover {
-      color: var(--ui-kit-color-hover);
-      border-color: var(--ui-kit-color-hover);
+      &.active,
+      &:active {
+        color: list.nth(get-state-color($state), 1);
+        border-color: list.nth(get-state-color($state), 1);
 
-      .kit-button-icon {
-        @include setIconColor(var(--ui-kit-color-hover));
+        .kit-button-icon {
+          @include setIconColor(list.nth(get-state-color($state), 1));
+        }
       }
-    }
-
-    &.active,
-    &:active {
-      color: var(--ui-kit-color-main);
-      border-color: var(--ui-kit-color-main);
 
       .kit-button-icon {
-        @include setIconColor(var(--ui-kit-color-main));
+        @include setIconColor(list.nth(get-state-color($state), 1));
       }
     }
+  }
+}
 
-    .kit-button-icon {
-      @include setIconColor(var(--ui-kit-color-main));
-    }
+@mixin styles {
+  @include applyStateColors(default);
+  @include applyStateColors(success);
+  @include applyStateColors(warning);
+
+  .k-button-text {
+    display: flex;
+    align-items: center;
+    gap: 8px;
   }
 
-  .success {
-    color: var(--ui-kit-color-white);
-    background: var(--ui-kit-color-green-1);
+  .kit-button-icon {
+    display: block;
+  }
 
-    .kit-button-icon {
-      @include setIconColor(var(--ui-kit-color-white));
-    }
+  .k-button {
+    font-weight: 400;
+    border: 1px solid transparent;
+    transition: none;
 
-    &:hover {
-      background: var(--ui-kit-color-green-6);
+    &:focus {
+      box-shadow: none;
     }
 
     &:disabled {
+      color: var(--ui-kit-color-grey-12);
       border: 1px solid var(--ui-kit-color-grey-11);
       background: var(--ui-kit-color-grey-13);
 

package/styles/theming.scss

@@ -38,6 +38,7 @@
   --ui-kit-color-green-4: #e0f2ed;
   --ui-kit-color-green-5: #e5ffe5;
   --ui-kit-color-green-6: #62dd5f;
+  --ui-kit-color-green-7: #17aa14;
 
   --ui-kit-color-red: #ef3e42;
   --ui-kit-color-red-20: #f8e0e0;
@@ -59,6 +60,8 @@
   --ui-kit-color-orange-3: #fbecde;
   --ui-kit-color-orange-4: #fff6e4;
   --ui-kit-color-orange-5: #fd9638;
+  --ui-kit-color-orange-6: #fcc862;
+  --ui-kit-color-orange-7: #e39700;
 
   --ui-kit-color-pink: #cd1159;
   --ui-kit-color-pink-1: #fae7ee;

package/lib/components/kit-scroll-navigation/kit-scroll-navigation.module.d.ts

@@ -1,12 +0,0 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./kit-scroll-navigation.component";
-import * as i2 from "@angular/common";
-import * as i3 from "../kit-button/kit-button.module";
-import * as i4 from "../kit-svg-icon/kit-svg-icon.module";
-import * as i5 from "./kit-scroll-navigation-section/kit-scroll-navigation-section.component";
-import * as i6 from "../kit-collapsed-list/kit-collapsed-list.component";
-export declare class KitScrollNavigationModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KitScrollNavigationModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KitScrollNavigationModule, [typeof i1.KitScrollNavigationComponent], [typeof i2.CommonModule, typeof i3.KitButtonModule, typeof i4.KitSvgIconModule, typeof i5.KitScrollNavigationSectionComponent, typeof i6.KitCollapsedListComponent], [typeof i1.KitScrollNavigationComponent, typeof i5.KitScrollNavigationSectionComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<KitScrollNavigationModule>;
-}

package/lib/directives/kit-badge/kit-badge.module.d.ts

@@ -1,7 +0,0 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./kit-badge.directive";
-export declare class KitBadgeModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KitBadgeModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KitBadgeModule, [typeof i1.KitBadgeDirective], never, [typeof i1.KitBadgeDirective]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<KitBadgeModule>;
-}