@koobiq/components 19.5.0 → 19.6.0

package/accordion/accordion-content.directive.d.ts

@@ -8,6 +8,10 @@ export declare class KbqAccordionContentDirective implements AfterContentInit, A
     /** @docs-private */
     protected readonly item: KbqAccordionItem;
     /** @docs-private */
+    get contentId(): string;
+    /** @docs-private */
+    get triggerId(): string;
+    /** @docs-private */
     protected readonly hidden: import("@angular/core").WritableSignal<boolean>;
     private savedTransition;
     private readonly afterRenderRef?;

package/accordion/accordion-trigger.directive.d.ts

@@ -8,6 +8,10 @@ export declare class KbqAccordionTriggerDirective {
     protected readonly accordion: KbqAccordion;
     /** @docs-private */
     protected readonly item: KbqAccordionItem;
+    /** @docs-private */
+    get triggerId(): string;
+    /** @docs-private */
+    get contentId(): string;
     /** Fires when trigger clicked */
     onClick(): void;
     /** @docs-private */

package/actions-panel/actions-panel-container.scss

@@ -23,6 +23,12 @@
         height: var(--kbq-actions-panel-vertical-divider-height) !important;
         margin: var(--kbq-actions-panel-vertical-divider-margin);
     }
+
+    .kbq-button,
+    .kbq-button-icon {
+        --kbq-button-filled-contrast-fade-off-background: transparent;
+        --kbq-button-filled-contrast-fade-on-background: transparent;
+    }
 }
 
 .kbq-actions-panel-overlay {

package/actions-panel/actions-panel-tokens.scss

@@ -8,7 +8,10 @@
     --kbq-actions-panel-box-shadow: var(--kbq-shadow-card);
     --kbq-actions-panel-height: var(--kbq-size-5xl);
     /** Divider */
-    --kbq-actions-panel-vertical-divider-background-color: var(--kbq-line-contrast-fade);
+    --kbq-actions-panel-vertical-divider-background-color: var(
+        --kbq-line-on-contrast-less,
+        var(--kbq-line-contrast-fade)
+    );
     --kbq-actions-panel-vertical-divider-height: var(--kbq-size-m);
     --kbq-actions-panel-vertical-divider-margin: 0 var(--kbq-size-s);
 }

package/autocomplete/autocomplete.component.d.ts

@@ -3,6 +3,11 @@ import { ActiveDescendantKeyManager } from '@koobiq/cdk/a11y';
 import { KbqOptgroup, KbqOption } from '@koobiq/components/core';
 import { KbqFormField } from '@koobiq/components/form-field';
 import * as i0 from "@angular/core";
+/** Footer that is rendered below the autocomplete options panel. */
+export declare class KbqAutocompleteFooter {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAutocompleteFooter, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAutocompleteFooter, "[kbqAutocompleteFooter], kbq-autocomplete-footer", never, {}, {}, never, never, true, never>;
+}
 export declare class KbqAutocompleteSelectedEvent {
     source: KbqAutocomplete;
     option: KbqOption;
@@ -73,5 +78,5 @@ export declare class KbqAutocomplete implements AfterContentInit {
     onKeydown(event: KeyboardEvent): any;
     private updateFocusClass;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAutocomplete, [null, null, null, { optional: true; host: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAutocomplete, "kbq-autocomplete", ["kbqAutocomplete"], { "displayWith": { "alias": "displayWith"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "classList": { "alias": "class"; "required": false; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; }; "openOnFocus": { "alias": "openOnFocus"; "required": false; }; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; }, ["options", "optionGroups"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAutocomplete, "kbq-autocomplete", ["kbqAutocomplete"], { "displayWith": { "alias": "displayWith"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "classList": { "alias": "class"; "required": false; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; }; "openOnFocus": { "alias": "openOnFocus"; "required": false; }; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; }, ["options", "optionGroups"], ["*", "[kbqAutocompleteFooter], kbq-autocomplete-footer"], true, never>;
 }

package/autocomplete/autocomplete.module.d.ts

@@ -7,6 +7,6 @@ import * as i5 from "./autocomplete-trigger.directive";
 import * as i6 from "./autocomplete-origin.directive";
 export declare class KbqAutocompleteModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAutocompleteModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqAutocompleteModule, never, [typeof i1.KbqOptionModule, typeof i2.OverlayModule, typeof i3.NgClass, typeof i4.KbqAutocomplete, typeof i5.KbqAutocompleteTrigger, typeof i6.KbqAutocompleteOrigin], [typeof i4.KbqAutocomplete, typeof i1.KbqOptionModule, typeof i5.KbqAutocompleteTrigger, typeof i6.KbqAutocompleteOrigin]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqAutocompleteModule, never, [typeof i1.KbqOptionModule, typeof i2.OverlayModule, typeof i3.NgClass, typeof i4.KbqAutocomplete, typeof i5.KbqAutocompleteTrigger, typeof i6.KbqAutocompleteOrigin, typeof i4.KbqAutocompleteFooter], [typeof i4.KbqAutocomplete, typeof i1.KbqOptionModule, typeof i5.KbqAutocompleteTrigger, typeof i6.KbqAutocompleteOrigin, typeof i4.KbqAutocompleteFooter]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqAutocompleteModule>;
 }

package/autocomplete/autocomplete.scss

@@ -8,8 +8,8 @@
 
     position: relative;
 
-    overflow: hidden auto;
-    -webkit-overflow-scrolling: touch; // for momentum scroll on mobile
+    display: flex;
+    flex-direction: column;
 
     box-sizing: border-box;
     min-width: 100%;
@@ -19,7 +19,18 @@
     border-radius: var(--kbq-autocomplete-size-panel-border-radius, var(--kbq-size-border-radius));
     max-height: var(--kbq-autocomplete-size-panel-max-height);
 
-    padding: var(--kbq-size-xxs);
+    .kbq-autocomplete-panel__content {
+        flex: 1;
+        padding: var(--kbq-size-xxs);
+        overflow-x: hidden;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .kbq-autocomplete-footer {
+        @extend %kbq-select-footer;
+        border-color: var(--kbq-line-contrast-less);
+    }
 
     &.kbq-autocomplete_visible {
         visibility: visible;

package/badge/badge-tokens.scss

@@ -36,9 +36,9 @@
     --kbq-badge-filled-fade-off-success-caption: var(--kbq-foreground-white);
     --kbq-badge-filled-fade-off-success-icon: var(--kbq-icon-white);
     --kbq-badge-filled-fade-off-warning-background: var(--kbq-background-warning);
-    --kbq-badge-filled-fade-off-warning-color: var(--kbq-foreground-white);
-    --kbq-badge-filled-fade-off-warning-caption: var(--kbq-foreground-white);
-    --kbq-badge-filled-fade-off-warning-icon: var(--kbq-icon-white);
+    --kbq-badge-filled-fade-off-warning-color: var(--kbq-foreground-contrast);
+    --kbq-badge-filled-fade-off-warning-caption: var(--kbq-foreground-contrast-secondary);
+    --kbq-badge-filled-fade-off-warning-icon: var(--kbq-icon-contrast);
     --kbq-badge-filled-fade-off-error-background: var(--kbq-background-error);
     --kbq-badge-filled-fade-off-error-color: var(--kbq-foreground-white);
     --kbq-badge-filled-fade-off-error-caption: var(--kbq-foreground-white);

package/button/button-group.d.ts

@@ -0,0 +1,45 @@
+import { KbqColorDirective, KbqComponentColors, KbqOrientation, ThemePalette } from '@koobiq/components/core';
+import { KbqButtonStyles } from './button.component';
+import * as i0 from "@angular/core";
+/**
+ * Root directive that groups related buttons,
+ * propagating a shared style, color, and disabled state to every nested button
+ */
+export declare class KbqButtonGroupRoot extends KbqColorDirective {
+    private readonly buttons;
+    /**
+     * Style applied to the group and propagated to every nested button.
+     * individual button's style preserved but updated when group input changed.
+     */
+    get kbqStyle(): string;
+    set kbqStyle(value: KbqButtonStyles | string);
+    private _kbqStyle;
+    /**
+     * Color applied to the group and propagated to every nested button.
+     * individual button's color preserved but updated when group input changed.
+     */
+    get color(): KbqComponentColors | ThemePalette | string;
+    set color(value: KbqComponentColors | ThemePalette | string);
+    /** Whether the root is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /** @docs-private */
+    protected _disabled: boolean;
+    constructor();
+    private updateColor;
+    private updateStyle;
+    private updateDisabledState;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonGroupRoot, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqButtonGroupRoot, "[kbqButtonGroupRoot]", never, { "kbqStyle": { "alias": "kbqStyle"; "required": false; }; "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["buttons"], never, true, never>;
+    static ngAcceptInputType_disabled: unknown;
+}
+/** Groups and styling related `KbqButton`s into a single visual unit. */
+export declare class KbqButtonGroup {
+    /**
+     * Layout direction: `'horizontal'` or `'vertical'`
+     * @default 'horizontal'
+     */
+    readonly orientation: import("@angular/core").InputSignal<KbqOrientation>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqButtonGroup, "kbq-button-group, [kbq-button-group]", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof KbqButtonGroupRoot; inputs: { "color": "color"; "kbqStyle": "kbqStyle"; "disabled": "disabled"; }; outputs: {}; }]>;
+}

package/button/button-group.scss

@@ -0,0 +1,17 @@
+@use '../core/styles/common/groups-mixins';
+
+.kbq-button-group {
+    &.kbq-button-group_horizontal {
+        @include groups-mixins.group(':is(.kbq-button, .kbq-button-icon)');
+    }
+
+    &.kbq-button-group_vertical {
+        @include groups-mixins.vertical-group(':is(.kbq-button, .kbq-button-icon)');
+    }
+
+    &:not(:has(> :not(.kbq-contrast-fade.kbq-button_filled))),
+    &:not(:has(> :not(.kbq-contrast.kbq-button_filled))) {
+        // @TODO tech debt (#DS-4847)
+        gap: var(--kbq-size-3xs);
+    }
+}

package/button/button.component.d.ts

@@ -31,9 +31,12 @@ export declare class KbqButton extends KbqColorDirective implements OnDestroy, A
     get kbqStyle(): string;
     set kbqStyle(value: string | KbqButtonStyles);
     private _kbqStyle;
+    /** Whether the button is disabled. */
     get disabled(): boolean;
     set disabled(value: boolean);
     private _disabled;
+    /** @docs-private */
+    readonly disabledSignal: import("@angular/core").WritableSignal<boolean>;
     get tabIndex(): number;
     set tabIndex(value: number);
     private _tabIndex;

package/button/button.module.d.ts

@@ -4,8 +4,9 @@ import * as i2 from "@angular/cdk/platform";
 import * as i3 from "@angular/cdk/observers";
 import * as i4 from "./button.dropdown-trigger.directive";
 import * as i5 from "./button.component";
+import * as i6 from "./button-group";
 export declare class KbqButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqButtonModule, never, [typeof i1.A11yModule, typeof i2.PlatformModule, typeof i3.ObserversModule, typeof i4.KbqButtonDropdownTrigger, typeof i5.KbqButton, typeof i5.KbqButtonCssStyler], [typeof i5.KbqButton, typeof i5.KbqButtonCssStyler, typeof i4.KbqButtonDropdownTrigger]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqButtonModule, never, [typeof i1.A11yModule, typeof i2.PlatformModule, typeof i3.ObserversModule, typeof i4.KbqButtonDropdownTrigger, typeof i5.KbqButton, typeof i5.KbqButtonCssStyler, typeof i6.KbqButtonGroup, typeof i6.KbqButtonGroupRoot], [typeof i5.KbqButton, typeof i5.KbqButtonCssStyler, typeof i4.KbqButtonDropdownTrigger, typeof i6.KbqButtonGroup, typeof i6.KbqButtonGroupRoot]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqButtonModule>;
 }

package/button/public-api.d.ts

@@ -1,3 +1,4 @@
+export * from './button-group';
 export * from './button.component';
 export * from './button.dropdown-trigger.directive';
 export * from './button.module';

package/button-toggle/button-toggle-tokens.scss

@@ -11,7 +11,7 @@
     --kbq-button-toggle-size-item-focus-outline-width: var(--kbq-size-3xs);
     /* THEME TOKENS */
     --kbq-button-toggle-container-background: var(--kbq-background-contrast-fade);
-    --kbq-button-toggle-item-default-background: var(--kbq-background-contrast-fade);
+    --kbq-button-toggle-item-default-background: var(--kbq-background-transparent);
     --kbq-button-toggle-item-default-text: var(--kbq-foreground-contrast);
     --kbq-button-toggle-item-default-icon: var(--kbq-icon-contrast-fade);
     --kbq-button-toggle-item-states-hover-background: var(--kbq-states-background-contrast-fade-hover);

package/checkbox/checkbox.d.ts

@@ -41,7 +41,6 @@ export declare class KbqCheckboxChange {
 export declare class KbqCheckbox extends KbqColorDirective implements ControlValueAccessor, AfterViewInit, OnDestroy {
     private changeDetectorRef;
     private focusMonitor;
-    private clickAction;
     big: boolean;
     /** A unique id for the checkbox input. If none is supplied, it will be auto-generated. */
     id: string;
@@ -55,6 +54,8 @@ export declare class KbqCheckbox extends KbqColorDirective implements ControlVal
     readonly indeterminateChange: EventEmitter<boolean>;
     /** The value attribute of the native input element */
     value: string;
+    /** Defines the behavior when a user clicks on the checkbox. */
+    clickAction: KbqCheckboxClickAction;
     /** The native `<input type="checkbox">` element */
     inputElement: ElementRef;
     /** Returns the unique id for the visual hidden input. */
@@ -86,7 +87,7 @@ export declare class KbqCheckbox extends KbqColorDirective implements ControlVal
     private uniqueId;
     private currentAnimationClass;
     private currentCheckState;
-    constructor(changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor, clickAction: KbqCheckboxClickAction);
+    constructor(changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor);
     /**
      * Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor.
      * @docs-private
@@ -119,8 +120,8 @@ export declare class KbqCheckbox extends KbqColorDirective implements ControlVal
     private emitChangeEvent;
     /** Function is called whenever the focus changes for the input element. */
     private onInputFocusChange;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqCheckbox, [null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCheckbox, "kbq-checkbox", ["kbqCheckbox"], { "big": { "alias": "big"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*", "kbq-hint"], true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqCheckbox, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCheckbox, "kbq-checkbox", ["kbqCheckbox"], { "big": { "alias": "big"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "clickAction": { "alias": "clickAction"; "required": false; }; "required": { "alias": "required"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*", "kbq-hint"], true, never>;
     static ngAcceptInputType_required: unknown;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_tabIndex: unknown;

package/code-block/code-block-tokens.scss

@@ -149,14 +149,14 @@
         var(--kbq-background-bg) 100%
     );
     --kbq-code-block-outline-collapse-button-expand-background: var(--kbq-background-card);
-    --kbq-code-block-hljs-addition-background: var(--kbq-palette-green-95);
-    --kbq-code-block-hljs-addition-color: var(--kbq-palette-green-25);
+    --kbq-code-block-hljs-addition-background: var(--kbq-plt-green-a2, var(--kbq-palette-green-95));
+    --kbq-code-block-hljs-addition-color: var(--kbq-plt-green-a16, var(--kbq-palette-green-25));
     --kbq-code-block-hljs-attr-background: null;
     --kbq-code-block-hljs-attr-color: null;
     --kbq-code-block-hljs-attribute-background: null;
     --kbq-code-block-hljs-attribute-color: null;
     --kbq-code-block-hljs-built-in-background: null;
-    --kbq-code-block-hljs-built-in-color: var(--kbq-palette-blue-35);
+    --kbq-code-block-hljs-built-in-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));
     --kbq-code-block-hljs-bullet-background: null;
     --kbq-code-block-hljs-bullet-color: null;
     --kbq-code-block-hljs-char-escape-background: null;
@@ -166,9 +166,9 @@
     --kbq-code-block-hljs-code-background: null;
     --kbq-code-block-hljs-code-color: null;
     --kbq-code-block-hljs-comment-background: null;
-    --kbq-code-block-hljs-comment-color: var(--kbq-palette-grey-60);
-    --kbq-code-block-hljs-deletion-background: var(--kbq-palette-red-95);
-    --kbq-code-block-hljs-deletion-color: var(--kbq-palette-red-35);
+    --kbq-code-block-hljs-comment-color: var(--kbq-plt-slate-a16, var(--kbq-palette-grey-60));
+    --kbq-code-block-hljs-deletion-background: var(--kbq-plt-red-a2, var(--kbq-palette-red-95));
+    --kbq-code-block-hljs-deletion-color: var(--kbq-plt-red-a16, var(--kbq-palette-red-35));
     --kbq-code-block-hljs-doctag-background: null;
     --kbq-code-block-hljs-doctag-color: null;
     --kbq-code-block-hljs-emphasis-background: null;
@@ -183,19 +183,19 @@
     --kbq-code-block-hljs-link-background: null;
     --kbq-code-block-hljs-link-color: null;
     --kbq-code-block-hljs-literal-background: null;
-    --kbq-code-block-hljs-literal-color: var(--kbq-palette-purple-30);
+    --kbq-code-block-hljs-literal-color: var(--kbq-plt-purple-a16, var(--kbq-palette-purple-30));
     --kbq-code-block-hljs-meta-background: null;
-    --kbq-code-block-hljs-meta-color: var(--kbq-palette-blue-35);
+    --kbq-code-block-hljs-meta-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));
     --kbq-code-block-hljs-meta-keyword-background: null;
     --kbq-code-block-hljs-meta-keyword-color: null;
     --kbq-code-block-hljs-meta-string-background: null;
-    --kbq-code-block-hljs-meta-string-color: var(--kbq-palette-blue-35);
+    --kbq-code-block-hljs-meta-string-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));
     --kbq-code-block-hljs-meta-prompt-background: null;
     --kbq-code-block-hljs-meta-prompt-color: null;
     --kbq-code-block-hljs-name-background: null;
-    --kbq-code-block-hljs-name-color: var(--kbq-palette-blue-35);
+    --kbq-code-block-hljs-name-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));
     --kbq-code-block-hljs-number-background: null;
-    --kbq-code-block-hljs-number-color: var(--kbq-palette-purple-30);
+    --kbq-code-block-hljs-number-color: var(--kbq-plt-purple-a16, var(--kbq-palette-purple-30));
     --kbq-code-block-hljs-operator-background: null;
     --kbq-code-block-hljs-operator-color: null;
     --kbq-code-block-hljs-params-background: null;
@@ -207,7 +207,7 @@
     --kbq-code-block-hljs-quote-background: null;
     --kbq-code-block-hljs-quote-color: null;
     --kbq-code-block-hljs-regexp-background: null;
-    --kbq-code-block-hljs-regexp-color: var(--kbq-palette-green-25);
+    --kbq-code-block-hljs-regexp-color: var(--kbq-plt-green-a16, var(--kbq-palette-green-25));
     --kbq-code-block-hljs-section-background: null;
     --kbq-code-block-hljs-section-color: null;
     --kbq-code-block-hljs-selector-attr-background: null;
@@ -219,15 +219,15 @@
     --kbq-code-block-hljs-selector-pseudo-background: null;
     --kbq-code-block-hljs-selector-pseudo-color: null;
     --kbq-code-block-hljs-selector-tag-background: null;
-    --kbq-code-block-hljs-selector-tag-color: var(--kbq-palette-blue-35);
+    --kbq-code-block-hljs-selector-tag-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));
     --kbq-code-block-hljs-string-background: null;
-    --kbq-code-block-hljs-string-color: var(--kbq-palette-green-25);
+    --kbq-code-block-hljs-string-color: var(--kbq-plt-green-a16, var(--kbq-palette-green-25));
     --kbq-code-block-hljs-strong-background: null;
     --kbq-code-block-hljs-strong-color: null;
     --kbq-code-block-hljs-subst-background: null;
     --kbq-code-block-hljs-subst-color: null;
     --kbq-code-block-hljs-symbol-background: null;
-    --kbq-code-block-hljs-symbol-color: var(--kbq-palette-blue-35);
+    --kbq-code-block-hljs-symbol-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));
     --kbq-code-block-hljs-tag-background: null;
     --kbq-code-block-hljs-tag-color: null;
     --kbq-code-block-hljs-template-tag-background: null;
@@ -235,7 +235,7 @@
     --kbq-code-block-hljs-template-variable-background: null;
     --kbq-code-block-hljs-template-variable-color: null;
     --kbq-code-block-hljs-title-background: null;
-    --kbq-code-block-hljs-title-color: var(--kbq-palette-blue-35);
+    --kbq-code-block-hljs-title-color: var(--kbq-plt-blue-a16, var(--kbq-palette-blue-35));
     --kbq-code-block-hljs-title-class-background: null;
     --kbq-code-block-hljs-title-class-color: null;
     --kbq-code-block-hljs-title-class-inherited-background: null;
@@ -254,3 +254,22 @@
     --kbq-code-block-hljs-variable-language-color: null;
     --kbq-code-block-tab-size: 4;
 }
+
+.kbq-dark .kbq-code-block {
+    --kbq-code-block-hljs-addition-background: var(--kbq-plt-dark-green-a5, var(--kbq-palette-green-95));
+    --kbq-code-block-hljs-addition-color: var(--kbq-plt-dark-green-a14, var(--kbq-palette-green-25));
+    --kbq-code-block-hljs-built-in-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));
+    --kbq-code-block-hljs-comment-color: var(--kbq-plt-dark-slate-a14, var(--kbq-palette-grey-60));
+    --kbq-code-block-hljs-deletion-background: var(--kbq-plt-dark-red-a5, var(--kbq-palette-red-95));
+    --kbq-code-block-hljs-deletion-color: var(--kbq-plt-dark-red-a14, var(--kbq-palette-red-35));
+    --kbq-code-block-hljs-literal-color: var(--kbq-plt-dark-purple-a14, var(--kbq-palette-purple-30));
+    --kbq-code-block-hljs-meta-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));
+    --kbq-code-block-hljs-meta-string-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));
+    --kbq-code-block-hljs-name-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));
+    --kbq-code-block-hljs-number-color: var(--kbq-plt-dark-purple-a14, var(--kbq-palette-purple-30));
+    --kbq-code-block-hljs-regexp-color: var(--kbq-plt-dark-green-a14, var(--kbq-palette-green-25));
+    --kbq-code-block-hljs-selector-tag-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));
+    --kbq-code-block-hljs-string-color: var(--kbq-plt-dark-green-a14, var(--kbq-palette-green-25));
+    --kbq-code-block-hljs-symbol-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));
+    --kbq-code-block-hljs-title-color: var(--kbq-plt-dark-blue-a14, var(--kbq-palette-blue-35));
+}

package/code-block/code-block.d.ts

@@ -96,6 +96,10 @@ export declare class KbqCodeBlock implements AfterViewInit {
     get hideTabs(): boolean;
     set hideTabs(value: boolean);
     private _hideTabs;
+    /**
+     * Output to support two-way binding on `[(hideTabs)]` property.
+     */
+    readonly hideTabsChange: EventEmitter<boolean>;
     /**
      * Component locale configuration.
      *
@@ -169,9 +173,10 @@ export declare class KbqCodeBlock implements AfterViewInit {
      */
     protected onSelectedTabChange(index: number): void;
     /**
-     * Handles the hover event on the code block element and updates the actionbar display accordingly.
+     * Tracks hover events to show/hide the actionbar when `hideTabs` is `true`.
+     * Reacts to `hideTabs` changes dynamically.
      */
-    private handleHover;
+    private trackHoverState;
     /**
      * Handles the scroll event on the scrollable code content element and updates the header shadow accordingly.
      */
@@ -225,7 +230,7 @@ export declare class KbqCodeBlock implements AfterViewInit {
      */
     protected downloadCode(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCodeBlock, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCodeBlock, "kbq-code-block", ["kbqCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; }; "filled": { "alias": "filled"; "required": false; }; "canToggleSoftWrap": { "alias": "canToggleSoftWrap"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; "viewAll": { "alias": "viewAll"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "canLoad": { "alias": "canLoad"; "required": false; }; "canDownload": { "alias": "canDownload"; "required": false; }; "canCopy": { "alias": "canCopy"; "required": false; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "files": { "alias": "files"; "required": false; }; "activeFileIndex": { "alias": "activeFileIndex"; "required": false; }; "noBorder": { "alias": "noBorder"; "required": false; }; "hideTabs": { "alias": "hideTabs"; "required": false; }; }, { "softWrapChange": "softWrapChange"; "viewAllChange": "viewAllChange"; "activeFileIndexChange": "activeFileIndexChange"; }, ["tabLinkTemplate"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCodeBlock, "kbq-code-block", ["kbqCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; }; "filled": { "alias": "filled"; "required": false; }; "canToggleSoftWrap": { "alias": "canToggleSoftWrap"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; "viewAll": { "alias": "viewAll"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "canLoad": { "alias": "canLoad"; "required": false; }; "canDownload": { "alias": "canDownload"; "required": false; }; "canCopy": { "alias": "canCopy"; "required": false; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "files": { "alias": "files"; "required": false; }; "activeFileIndex": { "alias": "activeFileIndex"; "required": false; }; "noBorder": { "alias": "noBorder"; "required": false; }; "hideTabs": { "alias": "hideTabs"; "required": false; }; }, { "softWrapChange": "softWrapChange"; "viewAllChange": "viewAllChange"; "activeFileIndexChange": "activeFileIndexChange"; "hideTabsChange": "hideTabsChange"; }, ["tabLinkTemplate"], never, true, never>;
     static ngAcceptInputType_lineNumbers: unknown;
     static ngAcceptInputType_filled: unknown;
     static ngAcceptInputType_canToggleSoftWrap: unknown;

package/core/error/error-state-matcher.d.ts

@@ -12,6 +12,16 @@ export declare class ShowOnFormSubmitErrorStateMatcher implements ErrorStateMatc
     static ɵfac: i0.ɵɵFactoryDeclaration<ShowOnFormSubmitErrorStateMatcher, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ShowOnFormSubmitErrorStateMatcher>;
 }
+/**
+ * Error state matcher with split behavior based on error's type:
+ * - `required` errors are shown only after the form is submitted.
+ * - All other errors are shown as soon as the control is invalid and touched.
+ */
+export declare class ShowRequiredOnSubmitErrorStateMatcher implements ErrorStateMatcher {
+    isErrorState(control: AbstractControl | null, form: FormGroupDirective | NgForm | null): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ShowRequiredOnSubmitErrorStateMatcher, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ShowRequiredOnSubmitErrorStateMatcher>;
+}
 /** Error state matcher that matches when a control is invalid and dirty or form is submitted. */
 export declare class ShowOnControlDirtyErrorStateMatcher implements ErrorStateMatcher {
     isErrorState(control: AbstractControl | null, form: FormGroupDirective | NgForm | null): boolean;

package/core/forms/_forms.scss

@@ -12,19 +12,26 @@
     }
 
     .kbq-form-horizontal {
-        $line-height: var(--kbq-typography-text-normal-line-height);
-        $form-field-size-height: var(--kbq-form-field-size-height, var(--kbq-size-3xl));
+        --kbq-forms-horizontal-label-padding-top: var(--kbq-size-xs);
 
         & .kbq-form-row_margin {
             margin-bottom: var(--kbq-forms-size-horizontal-row-margin-bottom);
         }
 
         & .kbq-form__label {
-            padding-top: calc(($form-field-size-height - $line-height) / 2);
+            padding-top: var(--kbq-forms-horizontal-label-padding-top);
 
             text-align: start;
         }
 
+        & .kbq-form__row:has(.kbq-toggle, .kbq-radio-group, .kbq-checkbox, .kbq-multiple-file-upload) {
+            --kbq-forms-horizontal-label-padding-top: 0;
+        }
+
+        & .kbq-form__row:has(.kbq-single-file-upload) {
+            --kbq-forms-horizontal-label-padding-top: var(--kbq-size-m);
+        }
+
         & .kbq-form__control {
             padding-left: var(--kbq-forms-size-horizontal-control-padding-left);
         }

package/core/option/_option-action-theme.scss

@@ -3,6 +3,7 @@
 @mixin kbq-option-action-theme() {
     .kbq-option-action {
         &.cdk-keyboard-focused {
+            z-index: 1;
             border-color: var(--kbq-states-line-focus-theme);
         }
 

package/core/option/action-container.scss

@@ -27,9 +27,9 @@
     width: var(--kbq-size-3xl);
     height: 100%;
 
-    background:
-        linear-gradient(to right, transparent 0%, var(--kbq-option-background) 70%),
-        linear-gradient(to right, transparent 0%, var(--kbq-background-bg) 80%);
+    background: linear-gradient(var(--kbq-option-background), var(--kbq-option-background)), var(--kbq-background-bg);
+
+    mask-image: linear-gradient(to right, transparent 0%, black var(--kbq-size-xxl));
 }
 
 .kbq-action-container__box {
@@ -39,7 +39,5 @@
     align-items: center;
     justify-content: center;
 
-    background:
-        linear-gradient(to right, var(--kbq-option-background) 0%, var(--kbq-option-background) 100%),
-        linear-gradient(to right, var(--kbq-background-bg) 0%, var(--kbq-background-bg) 100%);
+    background: linear-gradient(var(--kbq-option-background), var(--kbq-option-background)), var(--kbq-background-bg);
 }

package/core/option/option.scss

@@ -6,6 +6,11 @@
     @include list.kbq-list-item-base();
     @include vendor-prefixes.user-select(none);
 
+    & > .kbq-pseudo-checkbox {
+        margin-top: var(--kbq-size-3xs);
+        align-self: baseline;
+    }
+
     border-radius: var(--kbq-option-border-radius);
 
     &:not(.kbq-disabled) {

package/core/pop-up/pop-up-trigger.d.ts

@@ -71,7 +71,7 @@ export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     keydownHandler(event: KeyboardEvent): void;
     touchendHandler(): void;
     show(delay?: number): void;
-    hide: (delay?: number) => void;
+    hide(delay?: number): void;
     detach: () => void;
     /** Create the overlay config and position strategy */
     createOverlay(): OverlayRef;

package/core/select/common.d.ts

@@ -12,6 +12,10 @@ export declare class KbqSelectMatcher {
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectMatcher, "kbq-select-matcher, [kbq-select-matcher]", never, { "useDefaultHandlers": { "alias": "useDefaultHandlers"; "required": false; }; }, {}, never, never, true, never>;
     static ngAcceptInputType_useDefaultHandlers: unknown;
 }
+export declare class KbqSelectSearchEmptyResult {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectSearchEmptyResult, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectSearchEmptyResult, "[kbq-select-search-empty-result]", ["kbqSelectSearchEmptyResult"], {}, {}, never, never, true, never>;
+}
 export declare class KbqSelectFooter {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectFooter, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectFooter, "kbq-select-footer, [kbq-select-footer]", never, {}, {}, never, never, true, never>;
@@ -34,10 +38,6 @@ export declare class KbqSelectSearch implements AfterContentInit, OnDestroy {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectSearch, [{ optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectSearch, "[kbqSelectSearch]", ["kbqSelectSearch"], {}, {}, never, never, true, never>;
 }
-export declare class KbqSelectSearchEmptyResult {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectSearchEmptyResult, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectSearchEmptyResult, "[kbq-select-search-empty-result]", ["kbqSelectSearchEmptyResult"], {}, {}, never, never, true, never>;
-}
 /**
  * Abstract class representing a customizable select component with an overlay.
  *

package/core/styles/common/_groups-mixins.scss

@@ -0,0 +1,79 @@
+@use 'sass:map';
+
+@mixin border-top-radius($radius) {
+    border-top-right-radius: $radius;
+    border-top-left-radius: $radius;
+}
+
+@mixin border-bottom-radius($radius) {
+    border-bottom-right-radius: $radius;
+    border-bottom-left-radius: $radius;
+}
+
+@mixin border-right-radius($radius) {
+    border-bottom-right-radius: $radius;
+    border-top-right-radius: $radius;
+}
+
+@mixin border-left-radius($radius) {
+    border-bottom-left-radius: $radius;
+    border-top-left-radius: $radius;
+}
+
+@mixin group($item-selector: kbq-group-item) {
+    & {
+        display: flex;
+        flex-direction: row;
+
+        &_justified {
+            > #{$item-selector} {
+                width: 100%;
+            }
+        }
+
+        #{$item-selector} + #{$item-selector} {
+            margin-left: calc(-1 * #{var(--kbq-size-border-width)});
+        }
+
+        & > #{$item-selector}:first-child:not(:last-child) {
+            @include border-right-radius(0);
+        }
+
+        & > #{$item-selector}:last-child:not(:first-child) {
+            @include border-left-radius(0);
+        }
+
+        & > #{$item-selector}:not(:first-child):not(:last-child) {
+            border-radius: 0;
+        }
+    }
+}
+
+@mixin vertical-group($item-selector: kbq-group-item) {
+    & {
+        display: flex;
+        flex-direction: column;
+
+        > #{$item-selector} {
+            &:first-child:not(:last-child) {
+                @include border-bottom-radius(0);
+
+                border-top-right-radius: var(--kbq-size-border-radius);
+            }
+
+            &:last-child:not(:first-child) {
+                @include border-top-radius(0);
+
+                border-bottom-left-radius: var(--kbq-size-border-radius);
+            }
+
+            &:not(:first-child):not(:last-child) {
+                border-radius: 0;
+            }
+        }
+
+        #{$item-selector} + #{$item-selector} {
+            margin-top: calc(-1 * #{var(--kbq-size-border-width)});
+        }
+    }
+}