@koobiq/components 18.36.0 → 18.38.0

package/schematics/migrations/icons-replacement/README.md

@@ -0,0 +1,93 @@
+### Icons replacement schematics
+
+This schematic provides migration for new icons naming attribute. It includes:
+
+- Replacement of old names with new based on info in `data.ts`;
+
+[Params](schema.ts)
+
+#### Usage for Angular Cli:
+
+```shell
+ng g @koobiq/components:icons-replacement --project <your project>
+```
+
+- with custom icon replacement mapping:
+
+```shell
+ng g @koobiq/components:icons-replacement --project <your project> --replacement-data-path <path-as-json>
+```
+
+```shell
+ng g @koobiq/components:icons-replacement --project <your project>
+```
+
+#### Usage for Nx:
+
+```shell
+nx g @koobiq/components:icons-replacement --project <your project>
+```
+
+- with custom icon replacement mapping:
+
+```shell
+nx g @koobiq/components:icons-replacement --project <your project> --replacement-data-path <path-as-json>
+```
+
+### Run locally
+
+Build package
+
+```shell
+yarn run build:schematics
+```
+
+Run command (for example, for `koobiq-docs` project)
+
+```shell
+ng g ./dist/components/schematics/collection.json:icons-replacement --project koobiq-docs
+```
+
+### Result
+
+#### Before
+
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+    template: `
+        <i kbq-icon="kbq-bolt-circle_16">...</i>
+    `,
+    styles: `
+        .custom-icon {
+            <!-- cspell:ignore xmark -->
+            @extend .kbq-xmark-circle_16;
+        }
+    `
+})
+export class MyComp {
+    iconName = 'kbq-bolt-circle_16';
+}
+```
+
+#### After
+
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+    template: `
+        <i kbq-icon="kbq-circle-bolt_16">...</i>
+    `,
+    styles: `
+        .custom-icon {
+            <!-- cspell:ignore xmark -->
+            @extend .kbq-circle-xmark_16;
+        }
+    `
+})
+export class MyComp {
+    iconName = 'kbq-circle-bolt_16';
+}
+```

package/schematics/migrations/icons-replacement/data.js

@@ -0,0 +1,92 @@
+'use strict';
+
+const iconReplacementData = [
+    { from: 'anomaly-square_16', to: 'square-a_16' },
+    { from: 'anomaly-square_24', to: 'square-a_24' },
+    { from: 'arrow-circle-down_16', to: 'circle-arrow-down_16' },
+    { from: 'arrow-circle-down_24', to: 'circle-arrow-down_24' },
+    { from: 'arrow-circle-left_16', to: 'circle-arrow-left_16' },
+    { from: 'arrow-circle-left_24', to: 'circle-arrow-left_24' },
+    { from: 'arrow-circle-right_16', to: 'circle-arrow-right_16' },
+    { from: 'arrow-circle-right_24', to: 'circle-arrow-right_24' },
+    { from: 'arrow-circle-up_16', to: 'circle-arrow-up_16' },
+    { from: 'arrow-circle-up_24', to: 'circle-arrow-up_24' },
+    { from: 'arrow-right-circle-dot-o_16', to: 'circle-arrow-right-dot-o_16' },
+    { from: 'arrow-right-circle-dot-o_24', to: 'circle-arrow-right-dot-o_24' },
+    { from: 'bolt-circle_16', to: 'circle-bolt_16' },
+    { from: 'bolt-circle_24', to: 'circle-bolt_24' },
+    { from: 'bolt-rectangle-vertical_16', to: 'rectangle-vertical-bolt_16' },
+    { from: 'bolt-rectangle-vertical_24', to: 'rectangle-vertical-bolt_24' },
+    { from: 'bolt-rectangle-vertical-o_16', to: 'rectangle-vertical-bolt-o_16' },
+    { from: 'bolt-rectangle-vertical-o_24', to: 'rectangle-vertical-bolt-o_24' },
+    { from: 'check-circle_16', to: 'circle-check_16' },
+    { from: 'check-circle_24', to: 'circle-check_24' },
+    { from: 'chevron-circle-down_16', to: 'circle-chevron-down_16' },
+    { from: 'chevron-circle-down_24', to: 'circle-chevron-down_24' },
+    { from: 'chevron-circle-left_16', to: 'circle-chevron-left_16' },
+    { from: 'chevron-circle-left_24', to: 'circle-chevron-left_24' },
+    { from: 'chevron-circle-right_16', to: 'circle-chevron-right_16' },
+    { from: 'chevron-circle-right_24', to: 'circle-chevron-right_24' },
+    { from: 'chevron-circle-up_16', to: 'circle-chevron-up_16' },
+    { from: 'chevron-circle-up_24', to: 'circle-chevron-up_24' },
+    { from: 'compress_16', to: 'chevrons-compress_16' },
+    { from: 'compress_24', to: 'chevrons-compress_24' },
+    { from: 'ellipsis-horizontal-circle-o_16', to: 'circle-ellipsis-horizontal-o_16' },
+    { from: 'ellipsis-horizontal-circle-o_24', to: 'circle-ellipsis-horizontal-o_24' },
+    { from: 'exclamation-circle_16', to: 'circle-exclamation_16' },
+    { from: 'exclamation-circle_24', to: 'circle-exclamation_24' },
+    { from: 'exclamation-triangle_16', to: 'triangle-exclamation_16' },
+    { from: 'exclamation-triangle_24', to: 'triangle-exclamation_24' },
+    { from: 'info-circle_16', to: 'circle-info_16' },
+    { from: 'info-circle_24', to: 'circle-info_24' },
+    { from: 'ip4-rectangle_16', to: 'rectangle-ip4_16' },
+    { from: 'ip4-rectangle_24', to: 'rectangle-ip4_24' },
+    { from: 'ip6-rectangle_16', to: 'rectangle-ip6_16' },
+    { from: 'ip6-rectangle_24', to: 'rectangle-ip6_24' },
+    { from: 'location-arrow-circle-o_16', to: 'circle-location-arrow-o_16' },
+    { from: 'location-arrow-circle-o_24', to: 'circle-location-arrow-o_24' },
+    { from: 'minus-circle_16', to: 'circle-minus_16' },
+    { from: 'minus-circle_24', to: 'circle-minus_24' },
+    { from: 'minus-circle-o_16', to: 'circle-minus-o_16' },
+    { from: 'minus-circle-o_24', to: 'circle-minus-o_24' },
+    { from: 'minus-circle-s_16', to: 'circle-minus-s_16' },
+    { from: 'minus-circle-s_24', to: 'circle-minus-s_24' },
+    { from: 'minus-octagon_16', to: 'octagon-minus_16' },
+    { from: 'minus-octagon_24', to: 'octagon-minus_24' },
+    { from: 'minus-square_16', to: 'square-minus_16' },
+    { from: 'minus-square_24', to: 'square-minus_24' },
+    { from: 'pause-circle_16', to: 'circle-pause_16' },
+    { from: 'pause-circle_24', to: 'circle-pause_24' },
+    { from: 'play-circle_16', to: 'circle-play_16' },
+    { from: 'play-circle_24', to: 'circle-play_24' },
+    { from: 'plus-circle_16', to: 'circle-plus_16' },
+    { from: 'plus-circle_24', to: 'circle-plus_24' },
+    { from: 'plus-circle-s_16', to: 'circle-plus-s_16' },
+    { from: 'plus-circle-s_24', to: 'circle-plus-s_24' },
+    { from: 'plus-square_16', to: 'square-plus_16' },
+    { from: 'plus-square_24', to: 'square-plus_24' },
+    { from: 'question-circle_16', to: 'circle-question_16' },
+    { from: 'question-circle_24', to: 'circle-question_24' },
+    { from: 'stop-circle_16', to: 'circle-stop_16' },
+    { from: 'stop-circle_24', to: 'circle-stop_24' },
+    { from: 'telegram-circle_16', to: 'circle-telegram_16' },
+    { from: 'telegram-circle_24', to: 'circle-telegram_24' },
+    { from: 'user-arrow-triangle-up_16', to: 'user-badge-triangle-up_16' },
+    { from: 'user-arrow-triangle-up_24', to: 'user-badge-triangle-up_24' },
+    { from: 'windows-arrow-rotate-left_16', to: 'arrow-rotate-left-badge-windows_16' },
+    { from: 'wrap-text_16', to: 'text-wrap_16' },
+    { from: 'wrap-text_24', to: 'text-wrap_24' },
+    { from: 'wrap-text-slash_16', to: 'text-overflow_16' },
+    { from: 'wrap-text-slash_24', to: 'text-overflow_24' },
+    { from: 'xmark-circle_16', to: 'circle-xmark_16' },
+    { from: 'xmark-circle_24', to: 'circle-xmark_24' },
+    { from: 'xmark-circle-s_16', to: 'circle-xmark-s_16' },
+    { from: 'xmark-circle-s_24', to: 'circle-xmark-s_24' },
+    { from: 'table-badge-arrow-down-circle_32', to: 'table-badge-circle-arrow-down_32' },
+    { from: 'question-circle-o_32', to: 'circle-question-o_32' },
+    { from: 'gear-badge-arrowtriangle-up-square_16', to: 'gear-badge-square-arrowtriangle-up_16' },
+    { from: 'gear-badge-arrowtriangle-up-square_24', to: 'gear-badge-square-arrowtriangle-up_24' },
+    { from: 'exclamation-triangle_32', to: 'triangle-exclamation_32' }
+];
+
+exports.iconReplacementData = iconReplacementData;

package/schematics/migrations/icons-replacement/index.js

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var path = require('path');
+var utils_messages = require('../../utils/messages.js');
+var utils_packageConfig = require('../../utils/package-config.js');
+var migrations_iconsReplacement_data = require('./data.js');
+require('@angular-devkit/schematics');
+require('@schematics/angular/utility');
+
+const replaceIcons = (contentToBeUpdated, replacementData) => {
+    let res = contentToBeUpdated;
+    for (const { from, to } of replacementData) {
+        res = res.replace(new RegExp(`kbq-${from}`, 'g'), `kbq-${to}`);
+    }
+    return res;
+};
+const logReplacement = ({ logger, replacementData, contentToBeUpdated, filePath }) => {
+    const foundIcons = replacementData.filter(({ from }) => contentToBeUpdated.indexOf(from) !== -1);
+    if (foundIcons.length) {
+        const parsedFilePath = path.relative(__dirname, `.${filePath}`).replace(/\\/g, '/');
+        utils_messages.logMessage(logger, [
+            `Please pay attention! Found deprecated icons in file: `,
+            parsedFilePath,
+            foundIcons.map(({ from, to }) => `\t${from} -> \t${to}`).join('\n')
+        ]);
+    }
+};
+const processIconReplacement = ({ fileContent, filePath, fix, logger, replacementData }) => {
+    if (fix) {
+        const updatedContent = replaceIcons(fileContent, replacementData);
+        return { fileContent: updatedContent, changed: updatedContent !== fileContent, errors: [] };
+    }
+    else {
+        logReplacement({
+            logger,
+            replacementData,
+            contentToBeUpdated: fileContent,
+            filePath
+        });
+        return { fileContent, changed: false, errors: [] };
+    }
+};
+const resolveReplacementData = (projectRootPath, tree, customReplacementDataPath) => {
+    if (customReplacementDataPath) {
+        const replacementData = tree.get(`${projectRootPath}/${customReplacementDataPath}`);
+        if (!replacementData)
+            return migrations_iconsReplacement_data.iconReplacementData;
+        return JSON.parse(replacementData.content.toString());
+    }
+    return migrations_iconsReplacement_data.iconReplacementData;
+};
+function migrate(options) {
+    return async (tree, context) => {
+        const { logger } = context;
+        const { project, allowed, fix, replacementDataPath } = options;
+        const projectDefinition = await utils_packageConfig.setupOptions(project, tree);
+        const replacementData = resolveReplacementData(projectDefinition.root, tree, replacementDataPath);
+        tree.getDir(projectDefinition.root).visit((filePath, entry) => {
+            if (allowed.length === 0 || allowed.some((ext) => filePath.endsWith(ext))) {
+                const initialContent = entry?.content.toString();
+                if (!initialContent)
+                    return;
+                const { fileContent, changed } = processIconReplacement({
+                    fileContent: initialContent,
+                    filePath,
+                    fix,
+                    logger,
+                    replacementData
+                });
+                if (changed) {
+                    tree.overwrite(filePath, fileContent);
+                }
+            }
+        });
+    };
+}
+
+exports.default = migrate;
+exports.logReplacement = logReplacement;
+exports.processIconReplacement = processIconReplacement;
+exports.replaceIcons = replaceIcons;
+exports.resolveReplacementData = resolveReplacementData;

package/schematics/migrations/icons-replacement/schema.json

@@ -0,0 +1,32 @@
+{
+    "$schema": "http://json-schema.org/schema",
+    "$id": "koobiq-components-icons-replacement",
+    "title": "koobiq-components icons-replacement schematic",
+    "type": "object",
+    "properties": {
+        "project": {
+            "type": "string",
+            "description": "Name of the project",
+            "$default": {
+                "$source": "projectName"
+            }
+        },
+        "fix": {
+            "type": "boolean",
+            "default": false,
+            "description": "Whether overwrite icons prefixes or simply inform in console"
+        },
+        "allowed": {
+            "type": "array",
+            "default": [".html", ".ts", ".scss"],
+            "items": {
+                "type": "string"
+            },
+            "description": "Allowed file extensions to check"
+        },
+        "replacementDataPath": {
+            "type": "string",
+            "description": "Custom replacement data path. Will be used as relative to `project.root`"
+        }
+    }
+}

package/schematics/ng-add/index.js

@@ -27,16 +27,16 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^18.2.14");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.36.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.36.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.3.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.3.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^10.9.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.38.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.38.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.4.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.4.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^10.10.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.14.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.14.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@messageformat/core', "^3.4.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@radix-ng/primitives', "^0.23.0");
-        utils_packageConfig.addPackageToPackageJson(tree, 'luxon', "^3.7.1");
+        utils_packageConfig.addPackageToPackageJson(tree, 'luxon', "^3.7.2");
     };
 }
 

package/scrollbar/scrollbar.component.scss

@@ -1,7 +1,4 @@
-// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
-/* stylelint-disable selector-class-pattern */
 @use '../core/styles/common/tokens' as *;
-
 @use './scrollbar-component-theme' as *;
 
 .kbq-scrollbar-component {
@@ -143,11 +140,13 @@
     transform: scale(calc(1 / 0.1));
 }
 
+/* stylelint-disable-next-line selector-class-pattern */
 .os-size-observer-listener.ltr {
     margin-right: -266px;
     margin-left: 0;
 }
 
+/* stylelint-disable-next-line selector-class-pattern */
 .os-size-observer-listener.rtl {
     margin-left: -266px;
     margin-right: 0;

package/select/select.module.d.ts

@@ -8,8 +8,9 @@ import * as i6 from "@koobiq/components/tags";
 import * as i7 from "@koobiq/components/tooltip";
 import * as i8 from "@angular/common";
 import * as i9 from "@angular/cdk/a11y";
+import * as i10 from "@koobiq/components/form-field";
 export declare class KbqSelectModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSelectModule, [typeof i1.KbqSelect, typeof i2.KbqOptionTooltip], [typeof i3.OverlayModule, typeof i4.KbqOptionModule, typeof i5.KbqIconModule, typeof i6.KbqTagsModule, typeof i7.KbqToolTipModule, typeof i4.KbqSelectSearch, typeof i4.KbqSelectFooter, typeof i4.KbqSelectMatcher, typeof i4.KbqSelectTrigger, typeof i4.KbqSelectSearchEmptyResult, typeof i8.NgClass, typeof i8.NgTemplateOutlet, typeof i9.A11yModule], [typeof i1.KbqSelect, typeof i2.KbqOptionTooltip, typeof i4.KbqOptionModule, typeof i4.KbqSelectSearch, typeof i4.KbqSelectFooter, typeof i4.KbqSelectMatcher, typeof i4.KbqSelectTrigger, typeof i4.KbqSelectSearchEmptyResult]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSelectModule, [typeof i1.KbqSelect, typeof i2.KbqOptionTooltip], [typeof i3.OverlayModule, typeof i4.KbqOptionModule, typeof i5.KbqIconModule, typeof i6.KbqTagsModule, typeof i7.KbqToolTipModule, typeof i4.KbqSelectSearch, typeof i4.KbqSelectFooter, typeof i4.KbqSelectMatcher, typeof i4.KbqSelectTrigger, typeof i4.KbqSelectSearchEmptyResult, typeof i8.NgClass, typeof i8.NgTemplateOutlet, typeof i9.A11yModule], [typeof i1.KbqSelect, typeof i2.KbqOptionTooltip, typeof i4.KbqOptionModule, typeof i4.KbqSelectSearch, typeof i4.KbqSelectFooter, typeof i4.KbqSelectMatcher, typeof i4.KbqSelectTrigger, typeof i4.KbqSelectSearchEmptyResult, typeof i10.KbqFormFieldModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqSelectModule>;
 }

package/select/select.scss

@@ -22,23 +22,7 @@
     box-sizing: initial;
 
     .kbq-option {
-        position: relative;
-
-        &:before,
-        &:after {
-            position: absolute;
-            content: '';
-            width: var(--kbq-size-xxs);
-            height: calc(100% + var(--kbq-size-3xs) * 2); // outline size * 2
-        }
-
-        &:before {
-            right: calc(100% + var(--kbq-size-3xs)); // outline size
-        }
-
-        &:after {
-            left: calc(100% + var(--kbq-size-3xs)); // outline size
-        }
+        @include item-active-area(var(--kbq-size-3xs));
     }
 
     &:not(:has(> .kbq-select__no-options-message)) .cdk-virtual-scroll-viewport {

package/sidepanel/sidepanel-tokens.scss

@@ -8,6 +8,8 @@
     --kbq-sidepanel-size-close-button-margin-left: var(--kbq-size-s);
     --kbq-sidepanel-size-content-padding-horizontal: var(--kbq-size-xxl);
     --kbq-sidepanel-size-content-padding-bottom: var(--kbq-size-xxl);
+    // Added top padding to prevent the outline of the first focused field from being clipped
+    --kbq-sidepanel-size-content-padding-top: 1px;
     --kbq-sidepanel-size-footer-padding-top: var(--kbq-size-s);
     --kbq-sidepanel-size-footer-padding-bottom: var(--kbq-size-3xl);
     --kbq-sidepanel-size-footer-padding-horizontal: var(--kbq-size-xxl);

package/sidepanel/sidepanel.scss

@@ -149,6 +149,8 @@
     flex-direction: column;
     min-height: 0;
 
+    padding-top: var(--kbq-sidepanel-size-content-padding-top);
+
     padding-right: var(--kbq-sidepanel-size-content-padding-horizontal);
 
     padding-left: var(--kbq-sidepanel-size-content-padding-horizontal);

package/split-button/_split-button-theme.scss

@@ -4,47 +4,33 @@
             background: var(--kbq-states-background-transparent-hover, rgba(108, 115, 147, 0.08));
         }
 
-        & .kbq-button,
-        & .kbq-button-icon {
-            &:not(:hover, .cdk-keyboard-focused, .kbq-active) {
-                & + .kbq-button,
-                & + .kbq-button-icon {
-                    &:not(:hover, .cdk-keyboard-focused, .kbq-active) {
-                        &.kbq-contrast.kbq-button_filled::before {
-                            background: var(--kbq-foreground-on-contrast);
-                        }
-
-                        &.kbq-contrast.kbq-button_transparent,
-                        &.kbq-contrast-fade.kbq-button_outline,
-                        &.kbq-contrast-fade.kbq-button_filled {
-                            &::before {
-                                background: var(--kbq-line-contrast-fade);
-                            }
-                        }
-
-                        &.kbq-theme-fade.kbq-button_outline,
-                        &.kbq-theme.kbq-button_transparent {
-                            &::before {
-                                background: var(--kbq-line-theme-fade);
-                            }
-                        }
-                    }
-                }
+        & .kbq-split-button_item {
+            &.kbq-contrast.kbq-button_filled::before {
+                background: var(--kbq-foreground-on-contrast);
             }
 
-            &[disabled] + [disabled]::before {
-                background: var(--kbq-line-contrast-fade);
+            &.kbq-contrast.kbq-button_transparent,
+            &.kbq-contrast-fade.kbq-button_outline,
+            &.kbq-contrast-fade.kbq-button_filled {
+                &::before {
+                    background: var(--kbq-line-contrast-fade);
+                }
             }
 
-            &[disabled] {
-                & + .kbq-button,
-                & + .kbq-button-icon {
-                    background: var(--kbq-button-filled-contrast-fade-on-states-disabled-background);
+            &.kbq-theme-fade.kbq-button_outline,
+            &.kbq-theme.kbq-button_transparent {
+                &::before {
+                    background: var(--kbq-line-theme-fade);
                 }
             }
 
-            &:not([disabled]) + [disabled] {
-                background: var(--kbq-button-filled-contrast-fade-on-background) !important;
+            &.kbq-split-button_first.cdk-keyboard-focused {
+                z-index: 1;
+                box-shadow: inset -1px 0 0 0 var(--kbq-states-line-focus-theme);
+            }
+
+            &.kbq-split-button_second.cdk-keyboard-focused {
+                box-shadow: inset 1px 0 0 0 var(--kbq-states-line-focus-theme);
             }
         }
 
@@ -55,5 +41,74 @@
                 border-left: none;
             }
         }
+
+        &.kbq-split-button_first-disabled {
+            &.kbq-contrast-fade.kbq-button_filled,
+            &.kbq-contrast.kbq-button_filled {
+                & .kbq-split-button_item {
+                    background: var(--kbq-states-background-disabled);
+                }
+
+                & .kbq-split-button_second:not(.kbq-disabled) {
+                    &:hover {
+                        background: var(--kbq-states-background-contrast-fade-hover);
+                    }
+
+                    &:active {
+                        background: var(--kbq-states-background-contrast-fade-active);
+                    }
+
+                    & .kbq-icon.kbq-empty {
+                        color: var(--kbq-icon-contrast);
+                    }
+
+                    &:before {
+                        background: var(--kbq-line-contrast-fade);
+                    }
+                }
+            }
+
+            &.kbq-theme-fade.kbq-button_outline {
+                & .kbq-split-button_item {
+                    border-color: var(--kbq-button-outline-theme-fade-on-states-disabled-border);
+                }
+            }
+        }
+
+        &.kbq-split-button_second-disabled:not(.kbq-split-button_first-disabled) {
+            &.kbq-contrast.kbq-button_filled {
+                & .kbq-split-button_second {
+                    background: var(--kbq-button-filled-contrast-fade-off-background);
+                }
+            }
+
+            &.kbq-contrast-fade.kbq-button_filled {
+                & .kbq-split-button_first {
+                    background: var(--kbq-states-background-disabled);
+                }
+            }
+
+            &.kbq-theme-fade.kbq-button_outline {
+                & .kbq-split-button_item {
+                    border-color: var(--kbq-button-outline-theme-fade-on-states-disabled-border);
+                }
+            }
+
+            &.kbq-theme.kbq-button_transparent {
+                & .kbq-split-button_second:before {
+                    background: var(--kbq-states-line-disabled);
+                }
+            }
+
+            & .kbq-split-button_second:before {
+                background: rgba(138, 143, 168, 0.6);
+            }
+        }
+
+        &.kbq-split-button_first-disabled.kbq-split-button_second-disabled {
+            & .kbq-split-button_second:before {
+                background: var(--kbq-line-contrast-fade);
+            }
+        }
     }
 }

package/split-button/split-button.d.ts

@@ -1,11 +1,14 @@
-import { AfterContentInit } from '@angular/core';
-import { KbqButtonStyles } from '@koobiq/components/button';
+import { AfterContentInit, QueryList } from '@angular/core';
+import { KbqButton, KbqButtonStyles } from '@koobiq/components/button';
 import { KbqColorDirective, KbqComponentColors, ThemePalette } from '@koobiq/components/core';
+import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import * as i0 from "@angular/core";
 export declare class KbqSplitButton extends KbqColorDirective implements AfterContentInit {
     private nativeElement;
-    private buttons;
-    private dropdownTrigger;
+    /** @docs-private */
+    protected buttons: QueryList<KbqButton>;
+    /** @docs-private */
+    protected dropdownTrigger: KbqDropdownTrigger;
     /** Sets the width of the dropdown to the width of the trigger. Default is false */
     panelAutoWidth: boolean;
     /** component style, will be set for nested buttons */
@@ -19,13 +22,16 @@ export declare class KbqSplitButton extends KbqColorDirective implements AfterCo
     get disabled(): boolean;
     set disabled(value: boolean);
     protected _disabled: boolean;
+    get firstDisabled(): boolean;
+    get secondDisabled(): boolean;
     constructor();
     ngAfterContentInit(): void;
+    private updateClasses;
     private updateColor;
     private updateStyle;
     private updateDisabledState;
     private updateDropdownParams;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSplitButton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSplitButton, "kbq-split-button", never, { "panelAutoWidth": { "alias": "panelAutoWidth"; "required": false; }; "kbqStyle": { "alias": "kbqStyle"; "required": false; }; "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["dropdownTrigger", "buttons"], ["[kbq-button]", "[kbq-button]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSplitButton, "kbq-split-button, [kbq-split-button]", never, { "panelAutoWidth": { "alias": "panelAutoWidth"; "required": false; }; "kbqStyle": { "alias": "kbqStyle"; "required": false; }; "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["dropdownTrigger", "buttons"], ["[kbq-button]", "[kbq-button]"], true, never>;
     static ngAcceptInputType_disabled: unknown;
 }