@koobiq/components 19.4.1 → 19.6.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025
+Copyright (c) 2026
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/accordion/accordion-content.d.ts

@@ -2,5 +2,5 @@ import * as i0 from "@angular/core";
 import * as i1 from "./accordion-content.directive";
 export declare class KbqAccordionContent {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionContent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAccordionContent, "kbq-accordion-content, [kbq-accordion-content]", never, {}, {}, never, never, true, [{ directive: typeof i1.KbqAccordionContentDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAccordionContent, "kbq-accordion-content, [kbq-accordion-content]", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.KbqAccordionContentDirective; inputs: {}; outputs: {}; }]>;
 }

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

@@ -1,11 +1,26 @@
-import { KbqAccordionItemDirective } from './accordion-item.directive';
+import { AfterContentInit, AfterViewInit } from '@angular/core';
+import { KbqAccordionItem } from './accordion-item';
 import * as i0 from "@angular/core";
-export declare class KbqAccordionContentDirective {
-    protected readonly item: KbqAccordionItemDirective;
-    protected readonly nativeElement: any;
-    protected hidden: boolean;
-    protected onAnimationEnd(): void;
-    onToggle(): void;
+export declare class KbqAccordionContentDirective implements AfterContentInit, AfterViewInit {
+    private readonly renderer;
+    /** @docs-private */
+    protected readonly nativeElement: HTMLElement;
+    /** @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?;
+    constructor();
+    ngAfterViewInit(): void;
+    ngAfterContentInit(): void;
+    toggle(): void;
+    disableAnimation(): void;
+    enableAnimation(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionContentDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAccordionContentDirective, "[kbqAccordionContent]", ["kbqAccordionContent"], {}, {}, never, never, true, never>;
 }

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

@@ -1,7 +1,7 @@
-import { KbqAccordionItemDirective } from './accordion-item.directive';
+import { KbqAccordionItem } from './accordion-item';
 import * as i0 from "@angular/core";
 export declare class KbqAccordionHeaderDirective {
-    protected readonly item: KbqAccordionItemDirective;
+    protected readonly item: KbqAccordionItem;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionHeaderDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAccordionHeaderDirective, "[kbqAccordionHeader]", never, {}, {}, never, never, true, never>;
 }

package/accordion/accordion-item.d.ts

@@ -1,6 +1,77 @@
+import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
+import { ChangeDetectorRef, EventEmitter, OnDestroy } from '@angular/core';
+import { KbqAccordionContentDirective } from './accordion-content.directive';
+import { KbqAccordionTrigger } from './accordion-trigger.component';
+import { KbqAccordionTriggerDirective } from './accordion-trigger.directive';
+import { KbqAccordion, KbqAccordionOrientation } from './accordion.component';
 import * as i0 from "@angular/core";
-import * as i1 from "./accordion-item.directive";
-export declare class KbqAccordionItem {
+/** @deprecated Use KbqAccordionItemState instead. */
+export type RdxAccordionItemState = 'open' | 'closed';
+export type KbqAccordionItemState = 'open' | 'closed';
+export declare class KbqAccordionItem implements OnDestroy {
+    /** @docs-private */
+    protected readonly accordion: KbqAccordion;
+    /** @docs-private */
+    protected readonly changeDetectorRef: ChangeDetectorRef;
+    /** @docs-private */
+    protected readonly expansionDispatcher: UniqueSelectionDispatcher;
+    /** @docs-private */
+    trigger: KbqAccordionTriggerDirective;
+    /** @docs-private */
+    triggerComponent: KbqAccordionTrigger;
+    /** @docs-private */
+    content: KbqAccordionContentDirective;
+    /** The unique AccordionItem id. */
+    get id(): string;
+    private _id;
+    get dataState(): KbqAccordionItemState;
+    get orientation(): KbqAccordionOrientation;
+    /** Whether the AccordionItem is expanded. */
+    get expanded(): boolean;
+    set expanded(expanded: boolean);
+    private _expanded;
+    set value(value: string);
+    get value(): string;
+    private _value?;
+    /** Whether the AccordionItem is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    /** Event emitted every time the AccordionItem is closed. */
+    readonly closed: EventEmitter<void>;
+    /** Event emitted every time the AccordionItem is opened. */
+    readonly opened: EventEmitter<void>;
+    /**
+     * Event emitted when the AccordionItem is destroyed.
+     * @docs-private
+     */
+    readonly destroyed: EventEmitter<void>;
+    /**
+     * Emits whenever the expanded state of the accordion changes.
+     * Primarily used to facilitate two-way binding.
+     * @docs-private
+     */
+    readonly expandedChange: EventEmitter<boolean>;
+    /** Unregister function for expansionDispatcher. */
+    private removeUniqueSelectionListener;
+    /** Subscription to openAll/closeAll events. */
+    private openCloseAllSubscription;
+    constructor();
+    /** Emits an event for the accordion item being destroyed. */
+    ngOnDestroy(): void;
+    focus(): void;
+    /** Toggles the expanded state of the accordion item. */
+    toggle(): void;
+    /** Sets the expanded state of the accordion item to false. */
+    close(): void;
+    /** Sets the expanded state of the accordion item to true. */
+    open(): void;
+    getState(): any;
+    disableAnimation(): void;
+    enableAnimation(): void;
+    private subscribeToOpenCloseAllActions;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionItem, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAccordionItem, "kbq-accordion-item, [kbq-accordion-item]", never, {}, {}, never, never, true, [{ directive: typeof i1.KbqAccordionItemDirective; inputs: { "expanded": "expanded"; "disabled": "disabled"; "value": "value"; }; outputs: { "closed": "closed"; "opened": "opened"; "expandedChange": "expandedChange"; }; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAccordionItem, "kbq-accordion-item, [kbq-accordion-item]", never, { "expanded": { "alias": "expanded"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "closed": "closed"; "opened": "opened"; "expandedChange": "expandedChange"; }, ["trigger", "triggerComponent", "content"], never, true, never>;
+    static ngAcceptInputType_expanded: unknown;
+    static ngAcceptInputType_disabled: unknown;
 }

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

@@ -1,11 +1,24 @@
+import { AfterViewInit } from '@angular/core';
+import { KbqIcon } from '@koobiq/components/icon';
 import { KbqAccordion } from './accordion.component';
 import * as i0 from "@angular/core";
 import * as i1 from "./accordion-trigger.directive";
-export declare class KbqAccordionTrigger {
-    protected accordion: KbqAccordion;
+export declare class KbqAccordionTrigger implements AfterViewInit {
+    /** @docs-private */
+    protected readonly nativeElement: HTMLElement;
+    /** @docs-private */
+    protected readonly accordion: KbqAccordion;
+    /** @docs-private */
+    icon: KbqIcon;
+    private savedTransition;
+    private readonly afterRenderRef?;
     get isFill(): boolean;
     get isHug(): boolean;
     get isHugSpaceBetween(): boolean;
+    constructor();
+    ngAfterViewInit(): void;
+    disableAnimation(): void;
+    enableAnimation(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionTrigger, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqAccordionTrigger, "kbq-accordion-trigger, [kbq-accordion-trigger]", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.KbqAccordionTriggerDirective; inputs: {}; outputs: {}; }]>;
 }

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

@@ -1,12 +1,20 @@
-import { KbqAccordionItemDirective } from './accordion-item.directive';
-import { KbqAccordionRootDirective } from './accordion-root.directive';
+import { KbqAccordionItem } from './accordion-item';
+import { KbqAccordion } from './accordion.component';
 import * as i0 from "@angular/core";
 export declare class KbqAccordionTriggerDirective {
-    protected readonly nativeElement: any;
-    protected readonly accordionRoot: KbqAccordionRootDirective;
-    protected readonly item: KbqAccordionItemDirective;
+    /** @docs-private */
+    protected readonly nativeElement: HTMLElement;
+    /** @docs-private */
+    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 */
     focus(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionTriggerDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAccordionTriggerDirective, "[kbqAccordionTrigger]", never, {}, {}, never, never, true, never>;

package/accordion/accordion.component.d.ts

@@ -1,18 +1,79 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
+import { FocusKeyManager, FocusMonitor } from '@angular/cdk/a11y';
+import { Directionality } from '@angular/cdk/bidi';
+import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, QueryList } from '@angular/core';
+import { Subject } from 'rxjs';
+import { KbqAccordionItem } from './accordion-item';
 import * as i0 from "@angular/core";
-import * as i1 from "./accordion-root.directive";
 export declare enum KbqAccordionVariant {
     fill = "fill",
     hug = "hug",
     hugSpaceBetween = "hugSpaceBetween"
 }
-export declare class KbqAccordion implements OnDestroy, AfterViewInit {
+export type KbqAccordionType = 'single' | 'multiple';
+export type KbqAccordionOrientation = 'horizontal' | 'vertical';
+export declare class KbqAccordion implements OnDestroy, AfterViewInit, AfterContentInit {
+    private readonly isBrowser;
+    private readonly localStorage;
+    /** @docs-private */
     protected readonly focusMonitor: FocusMonitor;
-    protected readonly elementRef: ElementRef<HTMLElement>;
+    /** @docs-private */
+    protected readonly elementRef: ElementRef<any>;
+    /** @docs-private */
+    protected readonly changeDetectorRef: ChangeDetectorRef;
+    /** @docs-private */
+    protected readonly selectionDispatcher: UniqueSelectionDispatcher;
+    /** @docs-private */
+    protected readonly dir: Directionality | null;
+    /** @docs-private */
+    protected keyManager: FocusKeyManager<KbqAccordionItem>;
+    /** @docs-private */
+    readonly openCloseAllActions: Subject<boolean>;
+    /**  @docs-private */
+    items: QueryList<KbqAccordionItem>;
+    /** Specifies whether the accordion saves its states. Default is false */
+    useStateSaving: boolean;
     variant: KbqAccordionVariant | string;
+    /** Whether the Accordion is disabled. */
+    disabled: boolean;
+    /** The orientation of the accordion. */
+    orientation: KbqAccordionOrientation;
+    /**
+     * The value of the item to expand when initially rendered and type is "single". Use when you do not need to control the state of the items.
+     */
+    get defaultValue(): string[] | string;
+    set defaultValue(value: string[] | string);
+    /** Determines whether one or multiple items can be opened at the same time. */
+    type: KbqAccordionType;
+    collapsible: boolean;
+    /** The controlled value of the item to expand */
+    get value(): string[] | string;
+    set value(value: string[] | string);
+    readonly onValueChange: EventEmitter<void>;
+    get id(): string;
+    get isMultiple(): boolean;
+    get hasSavedState(): boolean;
+    private _value?;
+    private _defaultValue;
+    private onValueChangeSubscription;
+    private _id;
+    private state;
+    constructor();
+    ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    /** @docs-private */
+    keydownHandler(event: KeyboardEvent): void;
+    /** Opens all enabled accordion items in an accordion where multi is enabled. */
+    openAll(): void;
+    /** Closes all enabled accordion items. */
+    closeAll(): void;
+    /** @docs-private */
+    setActiveItem(item: KbqAccordionItem): void;
+    /** @docs-private */
+    saveItemState(item: KbqAccordionItem, force?: boolean): void;
+    private getSavedState;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordion, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAccordion, "kbq-accordion, [kbq-accordion]", never, { "variant": { "alias": "variant"; "required": false; }; }, {}, never, ["*"], true, [{ directive: typeof i1.KbqAccordionRootDirective; inputs: { "type": "type"; "collapsible": "collapsible"; "disabled": "disabled"; "defaultValue": "defaultValue"; "value": "value"; }; outputs: { "onValueChange": "onValueChange"; }; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAccordion, "kbq-accordion, [kbq-accordion]", never, { "variant": { "alias": "variant"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "defaultValue": { "alias": "defaultValue"; "required": false; }; "type": { "alias": "type"; "required": false; }; "collapsible": { "alias": "collapsible"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "onValueChange": "onValueChange"; }, ["items"], ["*"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
 }

package/accordion/accordion.component.scss

@@ -1,29 +1,5 @@
 @use './accordion-theme' as *;
 
-@keyframes slideDown {
-    from {
-        height: 0;
-        padding-bottom: 0;
-    }
-
-    to {
-        height: var(--radix-accordion-content-height);
-        padding-bottom: 0;
-    }
-}
-
-@keyframes slideUp {
-    from {
-        height: var(--radix-accordion-content-height);
-        padding-bottom: 0;
-    }
-
-    to {
-        height: 0;
-        padding-bottom: 0;
-    }
-}
-
 .kbq-accordion {
     display: block;
 }
@@ -46,14 +22,20 @@
 .kbq-accordion-content {
     display: block;
     overflow: hidden;
-    padding: var(--kbq-accordion-size-item-content-padding);
+
+    & > p {
+        margin: unset;
+        padding: var(--kbq-accordion-size-item-content-padding);
+    }
 
     &[data-state='open'] {
-        animation: slideDown 300ms ease-out;
+        transition: 300ms ease-out;
+        height: var(--radix-accordion-content-height);
     }
 
     &[data-state='closed'] {
-        animation: slideUp 300ms ease-out;
+        transition: 300ms ease-out;
+        height: 0;
     }
 }
 

package/accordion/public-api.d.ts

@@ -3,8 +3,6 @@ export * from './accordion-content.directive';
 export * from './accordion-header';
 export * from './accordion-header.directive';
 export * from './accordion-item';
-export * from './accordion-item.directive';
-export * from './accordion-root.directive';
 export * from './accordion-trigger.component';
 export * from './accordion-trigger.directive';
 export * from './accordion.component';

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/checkbox/checkbox.scss

@@ -1,10 +1,5 @@
 @use './checkbox-theme' as *;
 
-.kbq-checkbox-checkmark,
-.kbq-checkbox-mixedmark {
-    display: none;
-}
-
 .kbq-checkbox__frame {
     display: flex;
     align-items: center;
@@ -66,6 +61,11 @@
 
     max-width: 100%;
 
+    .kbq-checkbox-checkmark,
+    .kbq-checkbox-mixedmark {
+        display: none;
+    }
+
     &.kbq-checked {
         .kbq-checkbox-checkmark {
             display: block;