@koobiq/components 19.5.0 → 19.7.0

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)});
+        }
+    }
+}

package/core/styles/common/_groups.scss

@@ -1,3 +1,5 @@
+@use './groups-mixins';
+
 @mixin border-top-radius($radius) {
     border-top: {
         right-radius: $radius;
@@ -27,38 +29,21 @@
 }
 
 .kbq-group {
-    display: flex;
-    flex-direction: row;
-
-    .kbq-group_justified {
-        > .kbq-group-item {
-            width: 100%;
-        }
-    }
-
-    .kbq-group-item + .kbq-group-item {
-        margin-left: calc(-1 * #{var(--kbq-size-border-width)});
-    }
+    @include groups-mixins.group();
 
     & > .kbq-group-item:first-child:not(:last-child) {
-        @include border-right-radius(0);
-
         > .kbq-form-field__container {
             @include border-right-radius(0);
         }
     }
 
     & > .kbq-group-item:last-child:not(:first-child) {
-        @include border-left-radius(0);
-
         > .kbq-form-field__container {
             @include border-left-radius(0);
         }
     }
 
     & > .kbq-group-item:not(:first-child):not(:last-child) {
-        border-radius: 0;
-
         > .kbq-form-field__container {
             border-radius: 0;
         }
@@ -66,40 +51,25 @@
 }
 
 .kbq-vertical-group {
-    display: flex;
-    flex-direction: column;
+    @include groups-mixins.vertical-group();
 
     > .kbq-group-item {
         &:first-child:not(:last-child) {
-            @include border-bottom-radius(0);
-
-            border-top-right-radius: var(--kbq-size-border-radius);
-
             > .kbq-form-field__container {
                 @include border-bottom-radius(0);
             }
         }
 
         &:last-child:not(:first-child) {
-            @include border-top-radius(0);
-
-            border-bottom-left-radius: var(--kbq-size-border-radius);
-
             > .kbq-form-field__container {
                 @include border-top-radius(0);
             }
         }
 
         &:not(:first-child):not(:last-child) {
-            border-radius: 0;
-
             > .kbq-form-field__container {
                 border-radius: 0;
             }
         }
     }
-
-    .kbq-group-item + .kbq-group-item {
-        margin-top: calc(-1 * #{var(--kbq-size-border-width)});
-    }
 }

package/core/styles/common/_overlay.scss

@@ -75,6 +75,10 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         // todo перепроверить
         margin: 0;
         padding: 0;
+
+        &.cdk-overlay-pane_ignore-pointer-events {
+            pointer-events: none !important;
+        }
     }
 
     .cdk-overlay-backdrop {

package/core/styles/common/_select.scss

@@ -182,10 +182,14 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+        justify-content: center;
         box-sizing: border-box;
 
         position: relative;
 
+        margin-bottom: var(--kbq-size-3xl);
+        margin-top: var(--kbq-size-3xl);
+
         max-width: 100%;
         height: var(--kbq-option-size-height, var(--kbq-size-3xl));
 

package/core/styles/theming/scrollbar-tokens.scss

@@ -6,9 +6,9 @@
     --kbq-scrollbar-size-thumb-min-size: var(--kbq-size-xl);
     --kbq-scrollbar-size-thumb-border-radius: var(--kbq-size-s);
     /* THEME TOKENS */
-    --kbq-scrollbar-thumb-default-background: var(--kbq-palette-grey-50-a32);
-    --kbq-scrollbar-thumb-hover-background: var(--kbq-palette-grey-50-a48);
-    --kbq-scrollbar-thumb-active-background: var(--kbq-palette-grey-20-a55);
+    --kbq-scrollbar-thumb-default-background: var(--kbq-semantic-contrast-a3, var(--kbq-palette-grey-50-a32));
+    --kbq-scrollbar-thumb-hover-background: var(--kbq-semantic-contrast-a4, var(--kbq-palette-grey-50-a48));
+    --kbq-scrollbar-thumb-active-background: var(--kbq-semantic-contrast-a5, var(--kbq-palette-grey-20-a55));
     --kbq-scrollbar-thumb-disabled-background: var(--kbq-states-icon-disabled);
     --kbq-scrollbar-track-default-border: transparent;
     --kbq-scrollbar-track-default-background: transparent;
@@ -19,7 +19,7 @@
 }
 
 :where(.kbq-dark .kbq-scrollbar) {
-    --kbq-scrollbar-thumb-default-background: var(--kbq-palette-grey-50-a48);
-    --kbq-scrollbar-thumb-hover-background: var(--kbq-palette-grey-50-a60);
-    --kbq-scrollbar-thumb-active-background: var(--kbq-palette-grey-50-a80);
+    --kbq-scrollbar-thumb-default-background: var(--kbq-semantic-dark-contrast-a9, var(--kbq-palette-grey-50-a48));
+    --kbq-scrollbar-thumb-hover-background: var(--kbq-semantic-dark-contrast-a10, var(--kbq-palette-grey-50-a60));
+    --kbq-scrollbar-thumb-active-background: var(--kbq-semantic-dark-contrast-a11, var(--kbq-palette-grey-50-a80));
 }

package/core/styles/visual/_layout.scss

@@ -2,8 +2,6 @@
 
 @use '../../styles/common/rtl';
 
-@use '../common/tokens' as *;
-
 /*
 *  Responsive attributes
 *

package/core/utils/utils.d.ts

@@ -5,6 +5,8 @@ export declare const isUndefined: (value: unknown) => value is undefined;
 export declare const isNull: (value: unknown) => value is null;
 /** Whether the value is HTMLElement. */
 export declare const isHtmlElement: (value: unknown) => value is HTMLElement;
+/** Whether the value is Element. */
+export declare const isElement: (value: unknown) => value is Element;
 /** Whether the value is HTMLElement or null. */
 export declare const isHtmlElementOrNull: (value: unknown) => value is HTMLElement | null;
 /**

package/core/validation/validation.d.ts

@@ -24,6 +24,6 @@ export declare const KBQ_VALIDATION: InjectionToken<KbqValidationOptions>;
 /**
  * Utility provider which disables legacy validation directive.
  *
- * Will be removed in next major release.
+ * Will be removed in next major release, so legacy validation will be disabled by default.
  */
 export declare const kbqDisableLegacyValidationDirectiveProvider: () => Provider;

package/datepicker/datepicker-input.directive.d.ts

@@ -49,6 +49,7 @@ export declare class KbqDatepickerInput<D> implements KbqFormFieldControl<D>, Co
     protected readonly formField: KbqFormField | null;
     /** @docs-private */
     protected readonly localeService: import("@koobiq/components/core").KbqLocaleService | null;
+    private readonly useLegacyValidation;
     /** @docs-private */
     protected readonly externalConfiguration: unknown;
     protected configuration: any;

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

@@ -33,6 +33,8 @@ export declare class KbqDropdownTrigger implements AfterContentInit, OnDestroy {
     private _dir;
     private changeDetectorRef;
     private focusMonitor?;
+    private readonly overlayContainer;
+    private readonly renderer;
     protected readonly isBrowser: boolean;
     private readonly window;
     lastDestroyReason: DropdownCloseReason;
@@ -67,6 +69,7 @@ export declare class KbqDropdownTrigger implements AfterContentInit, OnDestroy {
     private overlayRef;
     private closeSubscription;
     private hoverSubscription;
+    private classAddedToOverlayContainer;
     constructor(overlay: Overlay, elementRef: ElementRef<HTMLElement>, viewContainerRef: ViewContainerRef, scrollStrategy: any, parent: KbqDropdown, dropdownItemInstance: KbqDropdownItem, _dir: Directionality, changeDetectorRef: ChangeDetectorRef, focusMonitor?: FocusMonitor | undefined);
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
@@ -137,6 +140,8 @@ export declare class KbqDropdownTrigger implements AfterContentInit, OnDestroy {
     /** Gets the portal that should be attached to the overlay. */
     private getPortal;
     private getWidth;
+    private addClassToOverlayContainer;
+    private removeClassFromOverlayContainer;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDropdownTrigger, [null, null, null, null, { optional: true; }, { optional: true; self: true; }, { optional: true; }, null, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqDropdownTrigger, "[kbqDropdownTriggerFor]", ["kbqDropdownTrigger"], { "offsetX": { "alias": "offsetX"; "required": false; }; "offsetY": { "alias": "offsetY"; "required": false; }; "data": { "alias": "kbqDropdownTriggerData"; "required": false; }; "openByArrowDown": { "alias": "openByArrowDown"; "required": false; }; "restoreFocus": { "alias": "kbqDropdownTriggerRestoreFocus"; "required": false; }; "dropdown": { "alias": "kbqDropdownTriggerFor"; "required": false; }; }, { "dropdownOpened": "dropdownOpened"; "dropdownClosed": "dropdownClosed"; }, never, never, true, never>;
     static ngAcceptInputType_offsetX: unknown;

package/ellipsis-center/ellipsis-center.directive.d.ts

@@ -3,7 +3,6 @@ import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare class KbqEllipsisCenterDirective extends KbqTooltipTrigger implements OnInit, AfterViewInit, OnDestroy {
-    private renderer;
     private cdr;
     set kbqEllipsisCenter(value: string);
     minVisibleLength: number;

package/fesm2022/koobiq-components-accordion.mjs

@@ -167,12 +167,12 @@ class KbqAccordion {
             return;
         this.state = JSON.parse(this.localStorage.getItem(this.id));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.19", type: KbqAccordion, isStandalone: true, selector: "kbq-accordion, [kbq-accordion]", inputs: { variant: "variant", disabled: ["disabled", "disabled", booleanAttribute], orientation: "orientation", defaultValue: "defaultValue", type: "type", collapsible: "collapsible", value: "value" }, outputs: { onValueChange: "onValueChange" }, host: { listeners: { "keydown": "keydownHandler($event)" }, properties: { "attr.data-orientation": "orientation" }, classAttribute: "kbq-accordion" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.20", type: KbqAccordion, isStandalone: true, selector: "kbq-accordion, [kbq-accordion]", inputs: { variant: "variant", disabled: ["disabled", "disabled", booleanAttribute], orientation: "orientation", defaultValue: "defaultValue", type: "type", collapsible: "collapsible", value: "value" }, outputs: { onValueChange: "onValueChange" }, host: { listeners: { "keydown": "keydownHandler($event)" }, properties: { "attr.data-orientation": "orientation" }, classAttribute: "kbq-accordion" }, providers: [
             { provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }
         ], queries: [{ propertyName: "items", predicate: i0.forwardRef(() => KbqAccordionItem), descendants: true }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-accordion{display:block}.kbq-accordion-item{box-sizing:border-box;display:block;border-width:2px;border-style:solid;border-color:transparent}.kbq-accordion-header{display:flex;height:var(--kbq-accordion-size-item-header-height)}.kbq-accordion-content{display:block;overflow:hidden}.kbq-accordion-content>p{margin:unset;padding:var(--kbq-accordion-size-item-content-padding)}.kbq-accordion-content[data-state=open]{transition:.3s ease-out;height:var(--radix-accordion-content-height)}.kbq-accordion-content[data-state=closed]{transition:.3s ease-out;height:0}.kbq-accordion.cdk-keyboard-focused .kbq-accordion-item:focus-within{border-color:var(--kbq-accordion-item-states-focus-border-color)}.kbq-accordion-item{background:var(--kbq-accordion-item-default-background);color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-item .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-default-icon-color)}.kbq-accordion-trigger{width:100%;background:transparent;border:none;outline:none;color:var(--kbq-accordion-item-default-text-color)}.kbq-accordion-trigger:hover:not([data-disabled=true]){cursor:pointer}.kbq-accordion-trigger:hover:not([data-disabled=true]) .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-hover-icon-color)}.kbq-accordion-trigger[data-disabled=true]{color:var(--kbq-accordion-item-states-disabled-text-color)}.kbq-accordion-trigger[data-disabled=true] .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-disabled-icon-color)!important}.kbq-accordion-header,.kbq-accordion-trigger{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-accordion-trigger__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-accordion-content{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-accordion{--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);--kbq-accordion-item-default-background: transparent;--kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);--kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);--kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);--kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);--kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqAccordion, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordion, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-accordion, [kbq-accordion]', template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'kbq-accordion',
@@ -212,6 +212,14 @@ class KbqAccordionTriggerDirective {
         /** @docs-private */
         this.item = inject(KbqAccordionItem);
     }
+    /** @docs-private */
+    get triggerId() {
+        return `${this.item.id}-trigger`;
+    }
+    /** @docs-private */
+    get contentId() {
+        return `${this.item.id}-content`;
+    }
     /** Fires when trigger clicked */
     onClick() {
         if (!this.accordion.collapsible && this.item.expanded)
@@ -223,19 +231,21 @@ class KbqAccordionTriggerDirective {
     focus() {
         this.nativeElement.focus();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqAccordionTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: KbqAccordionTriggerDirective, isStandalone: true, selector: "[kbqAccordionTrigger]", host: { listeners: { "click": "onClick()" }, properties: { "attr.role": "\"button\"", "attr.aria-expanded": "item.expanded", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.disabled": "item.disabled ? \"\" : null", "attr.data-orientation": "item.orientation" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: KbqAccordionTriggerDirective, isStandalone: true, selector: "[kbqAccordionTrigger]", host: { listeners: { "click": "onClick()" }, properties: { "attr.id": "triggerId", "attr.role": "\"button\"", "attr.aria-expanded": "item.expanded", "attr.aria-controls": "contentId", "attr.aria-disabled": "item.disabled", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqAccordionTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqAccordionTrigger]',
                     host: {
+                        '[attr.id]': 'triggerId',
                         '[attr.role]': '"button"',
                         '[attr.aria-expanded]': 'item.expanded',
+                        '[attr.aria-controls]': 'contentId',
+                        '[attr.aria-disabled]': 'item.disabled',
                         '[attr.data-state]': 'item.dataState',
                         '[attr.data-disabled]': 'item.disabled',
-                        '[attr.disabled]': 'item.disabled ? "" : null',
                         '[attr.data-orientation]': 'item.orientation',
                         '(click)': 'onClick()'
                     }
@@ -272,8 +282,8 @@ class KbqAccordionTrigger {
     enableAnimation() {
         this.icon.getHostElement().style.transition = this.savedTransition;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqAccordionTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: KbqAccordionTrigger, isStandalone: true, selector: "kbq-accordion-trigger, [kbq-accordion-trigger]", host: { properties: { "class.kbq-accordion-trigger_fill": "isFill", "class.kbq-accordion-trigger_hug": "isHug", "class.kbq-accordion-trigger_hug-space-between": "isHugSpaceBetween" }, classAttribute: "kbq-accordion-trigger" }, viewQueries: [{ propertyName: "icon", first: true, predicate: KbqIcon, descendants: true }], hostDirectives: [{ directive: KbqAccordionTriggerDirective }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: KbqAccordionTrigger, isStandalone: true, selector: "kbq-accordion-trigger, [kbq-accordion-trigger]", host: { properties: { "class.kbq-accordion-trigger_fill": "isFill", "class.kbq-accordion-trigger_hug": "isHug", "class.kbq-accordion-trigger_hug-space-between": "isHugSpaceBetween" }, classAttribute: "kbq-accordion-trigger" }, viewQueries: [{ propertyName: "icon", first: true, predicate: KbqIcon, descendants: true }], hostDirectives: [{ directive: KbqAccordionTriggerDirective }], ngImport: i0, template: `
         <i
             kbq-icon="{{ isHugSpaceBetween ? 'kbq-chevron-down-s_16' : 'kbq-chevron-right-s_16' }}"
             class="kbq-accordion-trigger__icon"
@@ -282,7 +292,7 @@ class KbqAccordionTrigger {
         <ng-content />
     `, isInline: true, styles: [".kbq-accordion-trigger{display:flex;flex-direction:row;align-items:center;background:transparent;border:none;outline:none}.kbq-accordion-trigger .kbq-accordion-trigger__icon{box-sizing:initial;align-self:flex-start;padding:var(--kbq-size-xxs);transition:transform .3s ease-out}.kbq-accordion-trigger .kbq-accordion-trigger__badge,.kbq-accordion-trigger .kbq-accordion-trigger__caption{margin-top:var(--kbq-size-xxs);margin-right:var(--kbq-size-s)}.kbq-accordion-trigger .kbq-accordion-trigger__action{padding:var(--kbq-size-xxs) var(--kbq-size-xxs) var(--kbq-size-3xs);margin-bottom:calc(-1 * var(--kbq-size-3xs))}.kbq-accordion-trigger:hover:not([data-disabled=true]){cursor:pointer}.kbq-accordion-trigger:hover:not([data-disabled=true]) .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-hover-icon-color)}.kbq-accordion-trigger.kbq-accordion-trigger_fill{padding:var(--kbq-accordion-size-item-header-variant-fill-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_fill[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(90deg)}.kbq-accordion-trigger.kbq-accordion-trigger_hug{flex-direction:row-reverse;justify-content:flex-end;padding:var(--kbq-accordion-size-item-header-variant-hug-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_hug[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(90deg)}.kbq-accordion-trigger.kbq-accordion-trigger_hug-space-between{flex-direction:row-reverse;justify-content:space-between;padding:var(--kbq-accordion-size-item-header-variant-hug-padding)}.kbq-accordion-trigger.kbq-accordion-trigger_hug-space-between[data-state=open]>.kbq-accordion-trigger__icon{transform:rotate(-180deg)}.kbq-accordion-trigger[data-disabled=true] .kbq-accordion-trigger__icon{color:var(--kbq-accordion-item-states-disabled-icon-color)!important}button.kbq-accordion-trigger{flex:1}\n", ".kbq-accordion{--kbq-accordion-size-item-header-height: 36px;--kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-m);--kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);--kbq-accordion-item-default-background: transparent;--kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);--kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);--kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);--kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);--kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled)}\n"], dependencies: [{ kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqAccordionTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionTrigger, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-accordion-trigger, [kbq-accordion-trigger]', imports: [KbqIcon], template: `
         <i
@@ -450,10 +460,10 @@ class KbqAccordionItem {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.19", type: KbqAccordionItem, isStandalone: true, selector: "kbq-accordion-item, [kbq-accordion-item]", inputs: { expanded: ["expanded", "expanded", booleanAttribute], value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { closed: "closed", opened: "opened", expandedChange: "expandedChange" }, host: { properties: { "attr.data-state": "dataState", "attr.data-disabled": "disabled", "attr.data-orientation": "orientation" }, classAttribute: "kbq-accordion-item" }, queries: [{ propertyName: "trigger", first: true, predicate: KbqAccordionTriggerDirective, descendants: true }, { propertyName: "triggerComponent", first: true, predicate: KbqAccordionTrigger, descendants: true }, { propertyName: "content", first: true, predicate: i0.forwardRef(() => KbqAccordionContentDirective), descendants: true }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.20", type: KbqAccordionItem, isStandalone: true, selector: "kbq-accordion-item, [kbq-accordion-item]", inputs: { expanded: ["expanded", "expanded", booleanAttribute], value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { closed: "closed", opened: "opened", expandedChange: "expandedChange" }, host: { properties: { "attr.data-state": "dataState", "attr.data-disabled": "disabled", "attr.data-orientation": "orientation" }, classAttribute: "kbq-accordion-item" }, queries: [{ propertyName: "trigger", first: true, predicate: KbqAccordionTriggerDirective, descendants: true }, { propertyName: "triggerComponent", first: true, predicate: KbqAccordionTrigger, descendants: true }, { propertyName: "content", first: true, predicate: i0.forwardRef(() => KbqAccordionContentDirective), descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqAccordionItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionItem, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-accordion-item, [kbq-accordion-item]',
@@ -490,6 +500,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
             }] } });
 
 class KbqAccordionContentDirective {
+    /** @docs-private */
+    get contentId() {
+        return `${this.item.id}-content`;
+    }
+    /** @docs-private */
+    get triggerId() {
+        return `${this.item.id}-trigger`;
+    }
     constructor() {
         this.renderer = inject(Renderer2);
         /** @docs-private */
@@ -523,17 +541,19 @@ class KbqAccordionContentDirective {
     enableAnimation() {
         this.nativeElement.style.transition = this.savedTransition;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqAccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: KbqAccordionContentDirective, isStandalone: true, selector: "[kbqAccordionContent]", host: { listeners: { "transitionend": "toggle()" }, properties: { "attr.role": "\"region\"", "attr.hidden": "hidden().toString()", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" } }, exportAs: ["kbqAccordionContent"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: KbqAccordionContentDirective, isStandalone: true, selector: "[kbqAccordionContent]", host: { listeners: { "transitionend": "toggle()" }, properties: { "attr.id": "contentId", "attr.role": "\"region\"", "attr.hidden": "hidden() ? \"\" : null", "attr.aria-labelledby": "triggerId", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" } }, exportAs: ["kbqAccordionContent"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqAccordionContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqAccordionContent]',
                     exportAs: 'kbqAccordionContent',
                     host: {
+                        '[attr.id]': 'contentId',
                         '[attr.role]': '"region"',
-                        '[attr.hidden]': 'hidden().toString()',
+                        '[attr.hidden]': 'hidden() ? "" : null',
+                        '[attr.aria-labelledby]': 'triggerId',
                         '[attr.data-state]': 'item.dataState',
                         '[attr.data-disabled]': 'item.disabled',
                         '[attr.data-orientation]': 'item.orientation',
@@ -543,12 +563,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
         }], ctorParameters: () => [] });
 
 class KbqAccordionContent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqAccordionContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: KbqAccordionContent, isStandalone: true, selector: "kbq-accordion-content, [kbq-accordion-content]", host: { classAttribute: "kbq-accordion-content" }, hostDirectives: [{ directive: KbqAccordionContentDirective }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: KbqAccordionContent, isStandalone: true, selector: "kbq-accordion-content, [kbq-accordion-content]", host: { classAttribute: "kbq-accordion-content" }, hostDirectives: [{ directive: KbqAccordionContentDirective }], ngImport: i0, template: `
         <p><ng-content /></p>
     `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqAccordionContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kbq-accordion-content, [kbq-accordion-content]',
@@ -566,14 +586,16 @@ class KbqAccordionHeaderDirective {
     constructor() {
         this.item = inject(KbqAccordionItem);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqAccordionHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: KbqAccordionHeaderDirective, isStandalone: true, selector: "[kbqAccordionHeader]", host: { properties: { "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: KbqAccordionHeaderDirective, isStandalone: true, selector: "[kbqAccordionHeader]", host: { properties: { "attr.role": "\"heading\"", "attr.aria-level": "2", "attr.data-state": "item.dataState", "attr.data-disabled": "item.disabled", "attr.data-orientation": "item.orientation" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqAccordionHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqAccordionHeader]',
                     host: {
+                        '[attr.role]': '"heading"',
+                        '[attr.aria-level]': '2',
                         '[attr.data-state]': 'item.dataState',
                         '[attr.data-disabled]': 'item.disabled',
                         '[attr.data-orientation]': 'item.orientation'
@@ -582,10 +604,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
         }] });
 
 class KbqAccordionHeader {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqAccordionHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: KbqAccordionHeader, isStandalone: true, selector: "kbq-accordion-header, [kbq-accordion-header]", host: { classAttribute: "kbq-accordion-header" }, hostDirectives: [{ directive: KbqAccordionHeaderDirective }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: KbqAccordionHeader, isStandalone: true, selector: "kbq-accordion-header, [kbq-accordion-header]", host: { classAttribute: "kbq-accordion-header" }, hostDirectives: [{ directive: KbqAccordionHeaderDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqAccordionHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionHeader, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-accordion-header, [kbq-accordion-header]',
@@ -597,8 +619,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
         }] });
 
 class KbqAccordionModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: KbqAccordionModule, imports: [KbqIcon,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionModule, imports: [KbqIcon,
             KbqAccordion,
             KbqAccordionContent,
             KbqAccordionHeader,
@@ -608,10 +630,10 @@ class KbqAccordionModule {
             KbqAccordionHeader,
             KbqAccordionItem,
             KbqAccordionTrigger] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqAccordionModule, imports: [KbqIcon,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionModule, imports: [KbqIcon,
             KbqAccordionTrigger] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqAccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqAccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [