@koobiq/components 18.8.0 → 18.9.1

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

@@ -122,9 +122,7 @@
     --kbq-code-block-font-hljs-variable-constant-font-weight: null;
     --kbq-code-block-font-hljs-variable-language-font-style: null;
     --kbq-code-block-font-hljs-variable-language-font-weight: null;
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    /* THEME TOKENS */
     --kbq-code-block-filled-container-background: var(--kbq-background-bg-secondary);
     --kbq-code-block-filled-container-border-color: transparent;
     --kbq-code-block-filled-header-background: var(--kbq-background-bg-secondary);
@@ -259,139 +257,3 @@
     --kbq-code-block-hljs-variable-language-background: null;
     --kbq-code-block-hljs-variable-language-color: null;
 }
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
-    --kbq-code-block-filled-container-background: var(--kbq-background-bg-secondary);
-    --kbq-code-block-filled-container-border-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));
-    --kbq-code-block-filled-header-background: var(--kbq-background-bg-secondary);
-    --kbq-code-block-filled-header-scroll-shadow: var(--kbq-shadow-overflow-normal-bottom);
-    --kbq-code-block-filled-actionbar-fade-gradient: linear-gradient(
-        90deg,
-        transparent,
-        var(--kbq-background-bg-secondary)
-    );
-    --kbq-code-block-filled-actionbar-background: var(--kbq-background-bg-secondary);
-    --kbq-code-block-filled-collapse-expanded-background: transparent;
-    --kbq-code-block-filled-collapse-collapsed-background: linear-gradient(
-        180deg,
-        hsla(229, 15%, 15%, 0%) 0%,
-        hsla(229, 15%, 15%, 1%) 100%
-    );
-    --kbq-code-block-filled-collapse-button-expand-background: var(--kbq-background-bg-secondary);
-    --kbq-code-block-outline-container-background: var(--kbq-background-card);
-    --kbq-code-block-outline-container-border-color: transparent;
-    --kbq-code-block-outline-header-background: var(--kbq-background-card);
-    --kbq-code-block-outline-header-scroll-shadow: var(--kbq-shadow-overflow-normal-bottom);
-    --kbq-code-block-outline-actionbar-fade-gradient: linear-gradient(90deg, transparent, var(--kbq-background-card));
-    --kbq-code-block-outline-actionbar-background: var(--kbq-background-card);
-    --kbq-code-block-outline-collapse-expanded-background: transparent;
-    --kbq-code-block-outline-collapse-collapsed-background: linear-gradient(
-        180deg,
-        hsla(229, 15%, 12%, 0%) 0%,
-        hsla(229, 15%, 12%, 1%) 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-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: null;
-    --kbq-code-block-hljs-bullet-background: null;
-    --kbq-code-block-hljs-bullet-color: null;
-    --kbq-code-block-hljs-char-escape-background: null;
-    --kbq-code-block-hljs-char-escape-color: null;
-    --kbq-code-block-hljs-class-background: null;
-    --kbq-code-block-hljs-class-color: null;
-    --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-doctag-background: null;
-    --kbq-code-block-hljs-doctag-color: null;
-    --kbq-code-block-hljs-emphasis-background: null;
-    --kbq-code-block-hljs-emphasis-color: null;
-    --kbq-code-block-hljs-formula-background: null;
-    --kbq-code-block-hljs-formula-color: null;
-    --kbq-code-block-hljs-function-background: null;
-    --kbq-code-block-hljs-function-color: null;
-    --kbq-code-block-hljs-keyword-background: null;
-    --kbq-code-block-hljs-keyword-color: null;
-    --kbq-code-block-hljs-line-numbers-color: var(--kbq-foreground-contrast-secondary);
-    --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-60);
-    --kbq-code-block-hljs-meta-background: null;
-    --kbq-code-block-hljs-meta-color: var(--kbq-palette-blue-65);
-    --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-65);
-    --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-65);
-    --kbq-code-block-hljs-number-background: null;
-    --kbq-code-block-hljs-number-color: var(--kbq-palette-purple-60);
-    --kbq-code-block-hljs-operator-background: null;
-    --kbq-code-block-hljs-operator-color: null;
-    --kbq-code-block-hljs-params-background: null;
-    --kbq-code-block-hljs-params-color: null;
-    --kbq-code-block-hljs-property-background: null;
-    --kbq-code-block-hljs-property-color: null;
-    --kbq-code-block-hljs-punctuation-background: null;
-    --kbq-code-block-hljs-punctuation-color: null;
-    --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-40);
-    --kbq-code-block-hljs-section-background: null;
-    --kbq-code-block-hljs-section-color: null;
-    --kbq-code-block-hljs-selector-attr-background: null;
-    --kbq-code-block-hljs-selector-attr-color: null;
-    --kbq-code-block-hljs-selector-class-background: null;
-    --kbq-code-block-hljs-selector-class-color: null;
-    --kbq-code-block-hljs-selector-id-background: null;
-    --kbq-code-block-hljs-selector-id-color: null;
-    --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-65);
-    --kbq-code-block-hljs-string-background: null;
-    --kbq-code-block-hljs-string-color: var(--kbq-palette-green-40);
-    --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-65);
-    --kbq-code-block-hljs-tag-background: null;
-    --kbq-code-block-hljs-tag-color: null;
-    --kbq-code-block-hljs-template-tag-background: null;
-    --kbq-code-block-hljs-template-tag-color: null;
-    --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-65);
-    --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;
-    --kbq-code-block-hljs-title-class-inherited-color: null;
-    --kbq-code-block-hljs-title-function-background: null;
-    --kbq-code-block-hljs-title-function-color: null;
-    --kbq-code-block-hljs-title-function-invoke-background: null;
-    --kbq-code-block-hljs-title-function-invoke-color: null;
-    --kbq-code-block-hljs-type-background: null;
-    --kbq-code-block-hljs-type-color: null;
-    --kbq-code-block-hljs-variable-background: null;
-    --kbq-code-block-hljs-variable-color: null;
-    --kbq-code-block-hljs-variable-constant-background: null;
-    --kbq-code-block-hljs-variable-constant-color: null;
-    --kbq-code-block-hljs-variable-language-background: null;
-    --kbq-code-block-hljs-variable-language-color: null;
-}

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

@@ -4,7 +4,7 @@ import { AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, Renderer2 } fr
 import { KbqLocaleService } from '@koobiq/components/core';
 import { KbqTabChangeEvent, KbqTabGroup } from '@koobiq/components/tabs';
 import { Subject } from 'rxjs';
-import { KbqCodeBlockConfiguration, KbqCodeFile } from './code-block.types';
+import { KbqCodeBlockConfiguration, KbqCodeBlockFile } from './code-block.types';
 import * as i0 from "@angular/core";
 export declare const COPIED_MESSAGE_TOOLTIP_TIMEOUT = 100;
 export declare const DEFAULT_EXTENSION = "txt";
@@ -34,14 +34,15 @@ export declare class KbqCodeBlockComponent implements AfterViewInit, OnDestroy {
     private focusMonitor;
     protected configuration?: KbqCodeBlockConfiguration | undefined;
     protected localeService?: KbqLocaleService | undefined;
+    protected readonly document: Document;
     tabGroup: KbqTabGroup;
     lineNumbers: boolean;
     filled: boolean;
     maxHeight: number;
     softWrap: boolean;
     canLoad: boolean;
-    get codeFiles(): KbqCodeFile[];
-    set codeFiles(files: KbqCodeFile[]);
+    get codeFiles(): KbqCodeBlockFile[];
+    set codeFiles(files: KbqCodeBlockFile[]);
     private _codeFiles;
     get noHeader(): any;
     get singleFile(): boolean;
@@ -90,6 +91,8 @@ export declare class KbqCodeBlockComponent implements AfterViewInit, OnDestroy {
     private updateMultiline;
     private getFullFileName;
     private subscribeToHover;
+    /** Use defaultView of injected document if available or fallback to global window reference */
+    private getWindow;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCodeBlockComponent, [null, null, null, null, null, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqCodeBlockComponent, "kbq-code-block", ["kbqCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; }; "filled": { "alias": "filled"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; "canLoad": { "alias": "canLoad"; "required": false; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -4,10 +4,10 @@ import * as i2 from "./actionbar.component";
 import * as i3 from "@koobiq/components/button";
 import * as i4 from "@koobiq/components/tooltip";
 import * as i5 from "@koobiq/components/icon";
-import * as i6 from "ngx-highlightjs";
-import * as i7 from "@koobiq/components/tabs";
+import * as i6 from "@koobiq/components/tabs";
+import * as i7 from "./code-block-content";
 export declare class KbqCodeBlockModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCodeBlockModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqCodeBlockModule, [typeof i1.KbqCodeBlockComponent, typeof i2.KbqActionBarComponent], [typeof i3.KbqButtonModule, typeof i4.KbqToolTipModule, typeof i5.KbqIconModule, typeof i6.HighlightModule, typeof i7.KbqTabsModule], [typeof i1.KbqCodeBlockComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqCodeBlockModule, [typeof i1.KbqCodeBlockComponent, typeof i2.KbqActionBarComponent], [typeof i3.KbqButtonModule, typeof i4.KbqToolTipModule, typeof i5.KbqIconModule, typeof i6.KbqTabsModule, typeof i7.KbqCodeBlockContent], [typeof i1.KbqCodeBlockComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqCodeBlockModule>;
 }

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

@@ -20,9 +20,17 @@ export interface KbqCodeBlockConfiguration {
     viewLessText: string;
     openExternalSystemTooltip: string;
 }
-export interface KbqCodeFile {
+/** Code block file type. */
+export type KbqCodeBlockFile = {
     filename: string;
     content: string;
+    /**
+     * File language
+     *
+     * @link https://highlightjs.readthedocs.io/en/stable/supported-languages.html
+     */
     language: string;
     link?: string;
-}
+};
+/** @deprecated Will be removed in next major release, use `KbqCodeBlockFile` instead. */
+export type KbqCodeFile = KbqCodeBlockFile;

package/core/common-behaviors/common-module.d.ts

@@ -11,14 +11,14 @@ export declare function mcSanityChecksFactory(): boolean;
  */
 export declare class KbqCommonModule {
     private _sanityChecksEnabled;
+    protected readonly document: Document;
     private hasDoneGlobalChecks;
-    private _document;
-    private _window;
     constructor(_sanityChecksEnabled: boolean);
     private areChecksEnabled;
     private isTestEnv;
     private checkDoctypeIsDefined;
     private checkThemeIsPresent;
+    private getWindow;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCommonModule, [{ optional: true; }]>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<KbqCommonModule, never, [typeof i1.BidiModule], [typeof i1.BidiModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqCommonModule>;

package/core/forms/forms-tokens.scss

@@ -5,18 +5,11 @@
     --kbq-forms-size-horizontal-legend-margin-bottom: var(--kbq-size-l);
     --kbq-forms-size-vertical-row-margin-bottom: var(--kbq-size-l);
     --kbq-forms-size-vertical-label-padding-top: 0;
-    --kbq-forms-size-vertical-label-padding-bottom: var(--kbq-size-s);
+    --kbq-forms-size-vertical-label-padding-bottom: var(--kbq-size-xs);
     --kbq-forms-size-vertical-control-padding-left: var(--kbq-size-xxl);
     --kbq-forms-size-vertical-legend-margin-top: var(--kbq-size-3xl);
     --kbq-forms-size-vertical-legend-margin-bottom: var(--kbq-size-m);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-forms-label: var(--kbq-foreground-contrast);
-    --kbq-forms-legend: var(--kbq-foreground-contrast);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    /* THEME TOKENS */
     --kbq-forms-label: var(--kbq-foreground-contrast);
     --kbq-forms-legend: var(--kbq-foreground-contrast);
 }

package/core/option/_option-theme.scss

@@ -40,6 +40,16 @@
         &.kbq-disabled {
             @include kbq-option(states-disabled);
         }
+
+        &:is(.kbq-selected, .kbq-focused, .kbq-active):has(+ :is(.kbq-selected, .kbq-focused, .kbq-active)) {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        &:is(.kbq-selected, .kbq-focused, .kbq-active) + :is(.kbq-selected, .kbq-focused, .kbq-active) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
     }
 }
 

package/core/option/option-tokens.scss

@@ -1,5 +1,9 @@
+@use '../../list/list-tokens';
+
 .kbq-option {
     --kbq-option-size-horizontal-padding: var(--kbq-size-m);
     --kbq-option-size-height: var(--kbq-size-3xl);
     --kbq-option-size-border-width: 2px;
+    /* LIST THEME TOKENS */
+    @include list-tokens.list-theme-tokens;
 }

package/core/selection/pseudo-checkbox/pseudo-checkbox-tokens.scss

@@ -11,9 +11,7 @@
     --kbq-checkbox-size-big-horizontal-content-padding: var(--kbq-size-s);
     --kbq-checkbox-size-big-vertical-content-padding: var(--kbq-size-3xs);
     --kbq-checkbox-size-big-top: var(--kbq-size-xxs);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    /* THEME TOKENS */
     --kbq-checkbox-theme-default-border: var(--kbq-line-contrast-fade);
     --kbq-checkbox-theme-default-color: var(--kbq-icon-white);
     --kbq-checkbox-theme-default-text: var(--kbq-foreground-contrast);
@@ -59,50 +57,3 @@
     --kbq-checkbox-error-states-disabled-background: var(--kbq-states-background-disabled);
     --kbq-checkbox-error-states-disabled-caption: var(--kbq-states-icon-disabled);
 }
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
-    --kbq-checkbox-theme-default-border: var(--kbq-line-contrast-fade);
-    --kbq-checkbox-theme-default-color: var(--kbq-icon-white);
-    --kbq-checkbox-theme-default-text: var(--kbq-foreground-contrast);
-    --kbq-checkbox-theme-default-background: var(--kbq-background-bg);
-    --kbq-checkbox-theme-default-caption: var(--kbq-foreground-contrast-secondary);
-    --kbq-checkbox-theme-states-hover-border: var(--kbq-line-contrast-fade);
-    --kbq-checkbox-theme-states-hover-background: var(--kbq-states-background-transparent-hover);
-    --kbq-checkbox-theme-states-checked-border: transparent;
-    --kbq-checkbox-theme-states-checked-background: var(--kbq-background-theme);
-    --kbq-checkbox-theme-states-checked-hover-border: transparent;
-    --kbq-checkbox-theme-states-checked-hover-background: var(--kbq-states-background-theme-hover);
-    --kbq-checkbox-theme-states-focused-border: var(--kbq-states-line-focus-theme);
-    --kbq-checkbox-theme-states-focused-background: var(--kbq-background-bg);
-    --kbq-checkbox-theme-states-focused-outline: 1px solid var(--kbq-states-line-focus-theme);
-    --kbq-checkbox-theme-states-checked-focused-border: var(--kbq-states-line-focus-theme);
-    --kbq-checkbox-theme-states-checked-focused-background: var(--kbq-background-theme);
-    --kbq-checkbox-theme-states-checked-focused-outline: 1px solid var(--kbq-states-line-focus-theme);
-    --kbq-checkbox-theme-states-disabled-border: var(--kbq-line-contrast-fade);
-    --kbq-checkbox-theme-states-disabled-color: var(--kbq-states-icon-disabled);
-    --kbq-checkbox-theme-states-disabled-text: var(--kbq-states-foreground-disabled);
-    --kbq-checkbox-theme-states-disabled-background: var(--kbq-states-background-disabled);
-    --kbq-checkbox-theme-states-disabled-caption: var(--kbq-states-icon-disabled);
-    --kbq-checkbox-error-default-border: var(--kbq-line-error);
-    --kbq-checkbox-error-default-color: var(--kbq-icon-white);
-    --kbq-checkbox-error-default-text: var(--kbq-foreground-contrast);
-    --kbq-checkbox-error-default-background: var(--kbq-states-background-error-less);
-    --kbq-checkbox-error-default-caption: var(--kbq-foreground-contrast-secondary);
-    --kbq-checkbox-error-states-hover-border: var(--kbq-line-error);
-    --kbq-checkbox-error-states-hover-background: var(--kbq-states-background-error-fade-hover);
-    --kbq-checkbox-error-states-checked-border: transparent;
-    --kbq-checkbox-error-states-checked-background: var(--kbq-background-error);
-    --kbq-checkbox-error-states-checked-hover-border: transparent;
-    --kbq-checkbox-error-states-checked-hover-background: var(--kbq-states-background-error-hover);
-    --kbq-checkbox-error-states-focused-border: var(--kbq-line-error);
-    --kbq-checkbox-error-states-focused-background: var(--kbq-states-background-error-less);
-    --kbq-checkbox-error-states-focused-outline: 1px solid var(--kbq-states-line-focus-error);
-    --kbq-checkbox-error-states-checked-focused-border: var(--kbq-states-line-focus-error);
-    --kbq-checkbox-error-states-checked-focused-background: var(--kbq-background-error);
-    --kbq-checkbox-error-states-checked-focused-outline: 1px solid var(--kbq-states-line-focus-error);
-    --kbq-checkbox-error-states-disabled-border: var(--kbq-line-contrast-fade);
-    --kbq-checkbox-error-states-disabled-color: var(--kbq-states-icon-disabled);
-    --kbq-checkbox-error-states-disabled-text: var(--kbq-states-foreground-disabled);
-    --kbq-checkbox-error-states-disabled-background: var(--kbq-states-background-disabled);
-    --kbq-checkbox-error-states-disabled-caption: var(--kbq-states-icon-disabled);
-}

package/core/services/measure-scrollbar.service.d.ts

@@ -1,10 +1,10 @@
 import * as i0 from "@angular/core";
 export declare class KbqMeasureScrollbarService {
-    private document;
+    protected readonly document: Document;
     get scrollBarWidth(): number;
     private _scrollBarWidth;
     private scrollbarMeasure;
-    constructor(document: any);
+    constructor();
     initScrollBarWidth(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqMeasureScrollbarService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<KbqMeasureScrollbarService>;

package/core/services/theme.service.d.ts

@@ -24,12 +24,13 @@ export declare enum KbqThemeSelector {
 }
 export declare const KbqDefaultThemes: KbqTheme[];
 export declare class ThemeService<T extends KbqTheme | null = KbqTheme> implements OnDestroy {
-    private rendererFactory;
+    protected readonly document: Document;
+    protected readonly rendererFactory: RendererFactory2;
+    protected renderer: Renderer2;
     current: BehaviorSubject<T>;
     themes: T[];
-    protected renderer: Renderer2;
     protected subscription: Subscription;
-    constructor(rendererFactory: RendererFactory2);
+    constructor();
     ngOnDestroy(): void;
     setThemes(items: T[]): void;
     setTheme(value: T | number): void;

package/core/styles/_koobiq-theme.scss

@@ -3,7 +3,7 @@
 
 @use 'theming/scrollbar-theme' as *;
 
-@use '../../link/link-theme' as *;
+@use '../../link/link-theme';
 @use '../../markdown/markdown-theme' as *;
 @use '../../tabs/tabs-theme' as *;
 @use '../../tags/tag-theme' as *;
@@ -17,7 +17,7 @@
     @include kbq-forms-theme();
     @include kbq-highlight-theme();
     // link is a directive, so styles for it should be applied globally
-    @include kbq-link-theme();
+    @include link-theme.kbq-link-theme();
     @include kbq-markdown-theme();
     @include kbq-scrollbar-theme();
     @include kbq-tabs-theme();
@@ -29,6 +29,7 @@
     @include kbq-markdown-base-typography();
     @include kbq-markdown-typography();
 
+    @include link-theme.kbq-link-typography();
     @include kbq-forms-typography();
     @include kbq-tabs-typography();
     @include kbq-tag-typography();

package/core/styles/common/_list.scss

@@ -64,11 +64,9 @@
     gap: var(--kbq-size-s);
 
     border: var(--kbq-size-3xs) solid transparent;
+    border-radius: var(--kbq-size-border-radius);
 
-    padding-top: var(--kbq-size-xxs);
-    padding-left: var(--kbq-size-m);
-    padding-right: var(--kbq-size-m);
-    padding-bottom: var(--kbq-size-xxs);
+    padding: var(--kbq-size-xxs) kbq-difference-series-css-variables([size-m, size-3xs]);
 
     .kbq-list-text {
         @include kbq-list-text();
@@ -90,8 +88,8 @@
     border-right: var(--kbq-size-3xs) solid transparent;
 
     padding-top: var(--kbq-size-xs);
-    padding-left: var(--kbq-size-m);
-    padding-right: var(--kbq-size-m);
+    padding-left: kbq-difference-series-css-variables([size-m, size-3xs]);
+    padding-right: kbq-difference-series-css-variables([size-m, size-3xs]);
     padding-bottom: var(--kbq-size-3xs);
 
     .kbq-list-text {
@@ -110,8 +108,8 @@
     border-right: var(--kbq-size-3xs) solid transparent;
 
     padding-top: var(--kbq-size-m);
-    padding-left: var(--kbq-size-m);
-    padding-right: var(--kbq-size-m);
+    padding-left: kbq-difference-series-css-variables([size-m, size-3xs]);
+    padding-right: kbq-difference-series-css-variables([size-m, size-3xs]);
     padding-bottom: var(--kbq-size-xxs);
 
     .kbq-list-text {

package/core/styles/common/_select.scss

@@ -165,6 +165,7 @@
     }
 
     .kbq-select__search-container {
+        padding: var(--kbq-size-xxs);
         border-bottom: {
             width: 1px;
             style: solid;
@@ -174,7 +175,7 @@
 
 %kbq-select-content {
     max-height: var(--kbq-select-panel-size-max-height, 256px);
-    padding: 4px 0;
+    padding: var(--kbq-size-xxs);
     overflow: hidden auto;
 }
 
@@ -188,5 +189,5 @@
     border-top-width: 1px;
     border-top-style: solid;
 
-    padding: var(--kbq-size-xxs) var(--kbq-size-m);
+    padding: var(--kbq-size-xxs) var(--kbq-size-l);
 }

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

@@ -5,22 +5,7 @@
     --kbq-scrollbar-size-thumb-width: var(--kbq-size-s);
     --kbq-scrollbar-size-thumb-min-size: var(--kbq-size-xl);
     --kbq-scrollbar-size-thumb-border-radius: var(--kbq-size-s);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-scrollbar-thumb-default-background: var(--kbq-icon-contrast-fade);
-    --kbq-scrollbar-thumb-hover-background: var(--kbq-states-icon-contrast-fade-hover);
-    --kbq-scrollbar-thumb-active-background: var(--kbq-states-icon-contrast-fade-active);
-    --kbq-scrollbar-thumb-disabled-background: var(--kbq-states-icon-disabled);
-    --kbq-scrollbar-track-default-border: transparent;
-    --kbq-scrollbar-track-default-background: transparent;
-    --kbq-scrollbar-track-hover-border: transparent;
-    --kbq-scrollbar-track-hover-background: transparent;
-    --kbq-scrollbar-track-active-border: transparent;
-    --kbq-scrollbar-track-active-background: transparent;
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    /* THEME TOKENS */
     --kbq-scrollbar-thumb-default-background: var(--kbq-icon-contrast-fade);
     --kbq-scrollbar-thumb-hover-background: var(--kbq-states-icon-contrast-fade-hover);
     --kbq-scrollbar-thumb-active-background: var(--kbq-states-icon-contrast-fade-active);

package/datepicker/datepicker-tokens.scss

@@ -9,9 +9,7 @@
     --kbq-datepicker-size-grid-cell-padding-horizontal: var(--kbq-size-s);
     --kbq-datepicker-size-grid-cell-padding-vertical: var(--kbq-size-s);
     --kbq-datepicker-size-grid-cell-border-radius: var(--kbq-size-s);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    /* THEME TOKENS */
     --kbq-datepicker-container-background: var(--kbq-background-card);
     --kbq-datepicker-container-shadow: var(--kbq-shadow-popup);
     --kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);
@@ -28,21 +26,3 @@
     --kbq-datepicker-grid-cell-states-disabled-background: transparent;
     --kbq-datepicker-grid-cell-states-disabled-text: var(--kbq-states-foreground-disabled);
 }
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
-    --kbq-datepicker-container-background: var(--kbq-background-card);
-    --kbq-datepicker-container-shadow: var(--kbq-shadow-popup);
-    --kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);
-    --kbq-datepicker-header-divider: var(--kbq-line-contrast-less);
-    --kbq-datepicker-grid-cell-default-background: transparent;
-    --kbq-datepicker-grid-cell-default-text: var(--kbq-foreground-contrast);
-    --kbq-datepicker-grid-cell-today-background: transparent;
-    --kbq-datepicker-grid-cell-today-text: var(--kbq-foreground-theme);
-    --kbq-datepicker-grid-cell-states-hover-background: var(--kbq-states-background-transparent-hover);
-    --kbq-datepicker-grid-cell-states-active-background: var(--kbq-states-background-transparent-active);
-    --kbq-datepicker-grid-cell-states-selected-background: var(--kbq-background-contrast);
-    --kbq-datepicker-grid-cell-states-selected-text: var(--kbq-foreground-on-contrast);
-    --kbq-datepicker-grid-cell-states-selected-hover-background: var(--kbq-states-background-contrast-active);
-    --kbq-datepicker-grid-cell-states-disabled-background: transparent;
-    --kbq-datepicker-grid-cell-states-disabled-text: var(--kbq-states-foreground-disabled);
-}

package/datepicker/datepicker.component.d.ts

@@ -49,7 +49,7 @@ export declare class KbqDatepicker<D> implements OnDestroy {
     private viewContainerRef;
     private readonly dateAdapter;
     private dir;
-    private document;
+    protected readonly document: Document;
     get hasBackdrop(): boolean;
     set hasBackdrop(value: boolean);
     private _hasBackdrop;
@@ -115,7 +115,7 @@ export declare class KbqDatepicker<D> implements OnDestroy {
     /** Subscription to value changes in the associated input element. */
     private inputSubscription;
     private closeSubscription;
-    constructor(overlay: Overlay, ngZone: NgZone, viewContainerRef: ViewContainerRef, scrollStrategy: any, dateAdapter: DateAdapter<D>, dir: Directionality, document: any);
+    constructor(overlay: Overlay, ngZone: NgZone, viewContainerRef: ViewContainerRef, scrollStrategy: any, dateAdapter: DateAdapter<D>, dir: Directionality);
     ngOnDestroy(): void;
     /** Selects the given date */
     select(date: D): void;
@@ -143,6 +143,6 @@ export declare class KbqDatepicker<D> implements OnDestroy {
     private closingActions;
     /** Create the popup PositionStrategy. */
     private createPopupPositionStrategy;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqDatepicker<any>, [null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqDatepicker<any>, [null, null, null, null, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqDatepicker<any>, "kbq-datepicker", ["kbqDatepicker"], { "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; }, { "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "openedStream": "opened"; "closedStream": "closed"; }, never, never, false, never>;
 }

package/divider/divider-tokens.scss

@@ -3,12 +3,6 @@
     --kbq-divider-size-horizontal-margin-vertical: var(--kbq-size-xxs);
     --kbq-divider-size-vertical-width: 1px;
     --kbq-divider-size-vertical-margin-horizontal: var(--kbq-size-xxs);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-divider-color: var(--kbq-line-contrast-less);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    /* THEME TOKENS */
     --kbq-divider-color: var(--kbq-line-contrast-less);
 }

package/dl/dl-tokens.scss

@@ -3,14 +3,7 @@
     --kbq-description-list-size-horizontal-gap-vertical: var(--kbq-size-l);
     --kbq-description-list-size-vertical-content-gap-vertical: var(--kbq-size-3xs);
     --kbq-description-list-size-vertical-gap-vertical: var(--kbq-size-m);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-description-list-term-color: var(--kbq-foreground-contrast-secondary);
-    --kbq-description-list-description-color: var(--kbq-foreground-contrast);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    /* THEME TOKENS */
     --kbq-description-list-term-color: var(--kbq-foreground-contrast-secondary);
     --kbq-description-list-description-color: var(--kbq-foreground-contrast);
 }

package/dl/dl.scss

@@ -37,7 +37,7 @@
             grid-column: 1;
         }
 
-        .kbq-dd {
+        .kbq-dd:not(:last-child) {
             margin-bottom: var(--kbq-description-list-size-vertical-gap-vertical);
         }
     }

package/dropdown/_dropdown-theme.scss

@@ -43,6 +43,16 @@
         &.kbq-disabled {
             @include kbq-dropdown-item-state(states-disabled);
         }
+
+        &:is(.kbq-selected, .cdk-keyboard-focused):has(+ :is(.kbq-selected, .cdk-keyboard-focused)) {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        &:is(.kbq-selected, .cdk-keyboard-focused) + :is(.kbq-selected, .cdk-keyboard-focused) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
     }
 
     .kbq-dropdown__group-header {

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

@@ -10,12 +10,12 @@ export declare class KbqDropdownContent implements OnDestroy {
     private appRef;
     private injector;
     private viewContainerRef;
-    private document;
+    protected readonly document: Document;
     /** Emits when the dropdown content has been attached. */
     attached: Subject<void>;
     private portal;
     private outlet;
-    constructor(template: TemplateRef<any>, componentFactoryResolver: ComponentFactoryResolver, appRef: ApplicationRef, injector: Injector, viewContainerRef: ViewContainerRef, document: any);
+    constructor(template: TemplateRef<any>, componentFactoryResolver: ComponentFactoryResolver, appRef: ApplicationRef, injector: Injector, viewContainerRef: ViewContainerRef);
     /**
      * Attaches the content with a particular context.
      * @docs-private