@koobiq/components 18.8.0 → 18.9.0

package/risk-level/risk-level-tokens.scss

@@ -3,38 +3,7 @@
     --kbq-risk-level-size-padding-horizontal: var(--kbq-size-s);
     --kbq-risk-level-size-border-width: var(--kbq-size-border-width);
     --kbq-risk-level-size-border-radius: var(--kbq-size-xxs);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-risk-level-filled-fade-off-success-background: var(--kbq-background-success);
-    --kbq-risk-level-filled-fade-off-success-text: var(--kbq-foreground-white);
-    --kbq-risk-level-filled-fade-off-warning-background: var(--kbq-background-warning);
-    --kbq-risk-level-filled-fade-off-warning-text: var(--kbq-foreground-white);
-    --kbq-risk-level-filled-fade-off-error-background: var(--kbq-background-error);
-    --kbq-risk-level-filled-fade-off-error-text: var(--kbq-foreground-white);
-    --kbq-risk-level-filled-fade-on-contrast-background: var(--kbq-background-contrast-fade);
-    --kbq-risk-level-filled-fade-on-contrast-text: var(--kbq-foreground-contrast);
-    --kbq-risk-level-filled-fade-on-success-background: var(--kbq-background-success-fade);
-    --kbq-risk-level-filled-fade-on-success-text: var(--kbq-foreground-success);
-    --kbq-risk-level-filled-fade-on-warning-background: var(--kbq-background-warning-fade);
-    --kbq-risk-level-filled-fade-on-warning-text: var(--kbq-foreground-warning);
-    --kbq-risk-level-filled-fade-on-error-background: var(--kbq-background-error-fade);
-    --kbq-risk-level-filled-fade-on-error-text: var(--kbq-foreground-error);
-    --kbq-risk-level-outline-fade-on-contrast-background: transparent;
-    --kbq-risk-level-outline-fade-on-contrast-text: var(--kbq-foreground-contrast);
-    --kbq-risk-level-outline-fade-on-contrast-border: var(--kbq-line-contrast-fade);
-    --kbq-risk-level-outline-fade-on-success-background: transparent;
-    --kbq-risk-level-outline-fade-on-success-text: var(--kbq-foreground-success);
-    --kbq-risk-level-outline-fade-on-success-border: var(--kbq-line-success-fade);
-    --kbq-risk-level-outline-fade-on-warning-background: transparent;
-    --kbq-risk-level-outline-fade-on-warning-text: var(--kbq-foreground-warning);
-    --kbq-risk-level-outline-fade-on-warning-border: var(--kbq-line-warning-fade);
-    --kbq-risk-level-outline-fade-on-error-background: transparent;
-    --kbq-risk-level-outline-fade-on-error-text: var(--kbq-foreground-error);
-    --kbq-risk-level-outline-fade-on-error-border: var(--kbq-line-error-fade);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    /* THEME TOKENS */
     --kbq-risk-level-filled-fade-off-success-background: var(--kbq-background-success);
     --kbq-risk-level-filled-fade-off-success-text: var(--kbq-foreground-white);
     --kbq-risk-level-filled-fade-off-warning-background: var(--kbq-background-warning);

package/schematics/ng-add/index.js

@@ -23,7 +23,6 @@ const VERSIONS = {
     MESSAGEFORMAT_CORE: '^0.0.0',
     RADIX_NG: '^0.0.0',
     LUXON: '^0.0.0',
-    OVERLAYSCROLLBARS: '^0.0.0',
     NGX_HIGHLIGHTJS: '^0.0.0'
 };
 /**
@@ -42,18 +41,16 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^18.2.6");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.8.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.8.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.9.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.9.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.1.4");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.1.4");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^9.1.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^9.2.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.8.1");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.8.1");
         utils_packageConfig.addPackageToPackageJson(tree, '@messageformat/core', "^3.0.1");
         utils_packageConfig.addPackageToPackageJson(tree, '@radix-ng/primitives', VERSIONS.RADIX_NG);
         utils_packageConfig.addPackageToPackageJson(tree, 'luxon', "^3.4.4");
-        utils_packageConfig.addPackageToPackageJson(tree, 'overlayscrollbars', "^2.7.3");
-        utils_packageConfig.addPackageToPackageJson(tree, 'ngx-highlightjs', "^10.0.0");
     };
 }
 

package/scrollbar/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/select/select-tokens.scss

@@ -10,14 +10,7 @@
     --kbq-select-size-multiple-content-gap: var(--kbq-size-xxs);
     --kbq-select-panel-size-border-radius: var(--kbq-size-border-radius);
     --kbq-select-panel-size-max-height: 256px;
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-select-panel-dropdown-background: var(--kbq-background-card);
-    --kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    /* THEME TOKENS */
     --kbq-select-panel-dropdown-background: var(--kbq-background-card);
     --kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup);
 }

package/select/select.component.d.ts

@@ -1,8 +1,8 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { SelectionModel } from '@angular/cdk/collections';
-import { CdkConnectedOverlay, ConnectedPosition, OverlayContainer } from '@angular/cdk/overlay';
+import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedPosition, OverlayContainer } from '@angular/cdk/overlay';
 import { CdkVirtualForOf } from '@angular/cdk/scrolling';
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, QueryList, Renderer2, SimpleChanges, TemplateRef } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, InjectionToken, NgZone, OnChanges, OnDestroy, OnInit, Provider, QueryList, Renderer2, SimpleChanges, TemplateRef } from '@angular/core';
 import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { ActiveDescendantKeyManager } from '@koobiq/cdk/a11y';
 import { CanDisable, CanDisableCtor, CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher, HasTabIndex, HasTabIndexCtor, KbqLocaleService, KbqOptgroup, KbqOption, KbqOptionBase, KbqOptionSelectionChange, KbqSelectMatcher, KbqSelectSearch, KbqSelectTrigger } from '@koobiq/components/core';
@@ -16,6 +16,26 @@ export declare class KbqSelectChange {
     value: any;
     constructor(source: KbqSelect, value: any);
 }
+/** Select panel width type. */
+export type KbqSelectPanelWidth = 'auto' | number | null;
+/** Options for the `kbq-select` that can be configured using the `KBQ_SELECT_OPTIONS` injection token. */
+export type KbqSelectOptions = Partial<{
+    /**
+     * Width of the panel. If set to `auto`, the panel will match the trigger width.
+     * If set to null or an empty string, the panel will grow to match the longest option's text.
+     */
+    panelWidth: KbqSelectPanelWidth;
+}>;
+/** Injection token that can be used to provide the default options for the `kbq-select`. */
+export declare const KBQ_SELECT_OPTIONS: InjectionToken<Partial<{
+    /**
+     * Width of the panel. If set to `auto`, the panel will match the trigger width.
+     * If set to null or an empty string, the panel will grow to match the longest option's text.
+     */
+    panelWidth: KbqSelectPanelWidth;
+}>>;
+/** Utility provider for `KBQ_SELECT_OPTIONS`. */
+export declare const kbqSelectOptionsProvider: (options: KbqSelectOptions) => Provider;
 /** @docs-private */
 export declare class KbqSelectBase {
     elementRef: ElementRef;
@@ -42,11 +62,12 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
     private readonly parentFormField;
     private readonly scrollStrategyFactory;
     protected localeService?: KbqLocaleService | undefined;
+    private readonly defaultOptions;
     /** A name for this control that can be used by `kbq-form-field`. */
     controlType: string;
     hiddenItems: number;
     /** The last measured value for the trigger's client bounding rect. */
-    triggerRect: ClientRect;
+    triggerRect: DOMRect;
     /** The cached font-size of the trigger element. */
     triggerFontSize: number;
     /** Deals with the selection logic. */
@@ -141,6 +162,11 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
      */
     get compareWith(): (o1: any, o2: any) => boolean;
     set compareWith(fn: (o1: any, o2: any) => boolean);
+    /**
+     * Width of the panel. If set to `auto`, the panel will match the trigger width.
+     * If set to null or an empty string, the panel will grow to match the longest option's text.
+     */
+    panelWidth: KbqSelectPanelWidth;
     /** Value of the select control. */
     get value(): any;
     set value(newValue: any);
@@ -171,6 +197,14 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
     /** Unique id for this input. */
     private readonly uid;
     private visibleChanges;
+    /** Width of the overlay panel. */
+    protected overlayWidth: string | number;
+    /** Min width of the overlay panel. */
+    protected overlayMinWidth: string | number;
+    /** Overlay panel class. */
+    protected readonly overlayPanelClass = "kbq-select-overlay";
+    /** Origin for the overlay panel. */
+    protected overlayOrigin?: CdkOverlayOrigin | ElementRef;
     private readonly destroyRef;
     constructor(_changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, _renderer: Renderer2, defaultErrorStateMatcher: ErrorStateMatcher, elementRef: ElementRef, overlayContainer: OverlayContainer, _dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, parentFormField: KbqFormField, ngControl: NgControl, scrollStrategyFactory: any, localeService?: KbqLocaleService | undefined);
     ngOnInit(): void;
@@ -301,12 +335,14 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
     private calculateOverlayXPosition;
     private resetOverlay;
     private getOverlayRect;
+    /** Gets how wide the overlay panel should be. */
     private getOverlayWidth;
     /** Comparison function to specify which option is displayed. Defaults to object equality. */
     private _compareWith;
     private getTotalVisibleItems;
     private buildTriggerClone;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelect, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["footer", "cdkVirtualForOf", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "options", "optionGroups"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["footer", "cdkVirtualForOf", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "options", "optionGroups"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], false, never>;
+    static ngAcceptInputType_multiple: unknown;
 }
 export {};

package/select/select.scss

@@ -19,6 +19,26 @@
 .kbq-select__content {
     @extend %kbq-select-content;
 
+    .kbq-option {
+        position: relative;
+
+        &:before,
+        &:after {
+            position: absolute;
+            content: '';
+            width: var(--kbq-size-xxs);
+            height: calc(100% + var(--kbq-size-3xs) * 2); // outline size * 2
+        }
+
+        &:before {
+            right: calc(100% + var(--kbq-size-3xs)); // outline size
+        }
+
+        &:after {
+            left: calc(100% + var(--kbq-size-3xs)); // outline size
+        }
+    }
+
     &:not(:has(> .kbq-select__no-options-message)) .cdk-virtual-scroll-viewport {
         min-height: var(--kbq-select-panel-size-max-height, 256px);
         max-height: var(--kbq-select-panel-size-max-height, 256px);

package/sidepanel/sidepanel-tokens.scss

@@ -12,17 +12,7 @@
     --kbq-sidepanel-size-footer-padding-bottom: var(--kbq-size-3xl);
     --kbq-sidepanel-size-footer-padding-horizontal: var(--kbq-size-3xl);
     --kbq-sidepanel-size-footer-content-gap-horizontal: var(--kbq-size-l);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-sidepanel-overlay-background: var(--kbq-background-overlay);
-    --kbq-sidepanel-container-background: var(--kbq-background-card);
-    --kbq-sidepanel-container-shadow: var(--kbq-shadow-overlay);
-    --kbq-sidepanel-header-text-color: var(--kbq-foreground-contrast);
-    --kbq-sidepanel-content-text-color: var(--kbq-foreground-contrast);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    /* THEME TOKENS */
     --kbq-sidepanel-overlay-background: var(--kbq-background-overlay);
     --kbq-sidepanel-container-background: var(--kbq-background-card);
     --kbq-sidepanel-container-shadow: var(--kbq-shadow-overlay);

package/tabs/tabs-tokens.scss

@@ -7,98 +7,7 @@
     --kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);
     --kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);
     --kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-tabs-tab-item-filled-on-background-default-background: transparent;
-    --kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);
-    --kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);
-    --kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);
-    --kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
-    --kbq-tabs-tab-item-filled-on-background-states-selected-background: var(
-        --kbq-states-background-transparent-active
-    );
-    --kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var(
-        --kbq-states-background-transparent-active
-    );
-    --kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var(
-        --kbq-states-background-transparent-active
-    );
-    --kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);
-    --kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);
-    --kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;
-    --kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);
-    --kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);
-    --kbq-tabs-tab-item-filled-on-surface-default-background: transparent;
-    --kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);
-    --kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);
-    --kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);
-    --kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
-    --kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);
-    --kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var(
-        --kbq-states-background-transparent-active
-    );
-    --kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var(
-        --kbq-states-background-transparent-active
-    );
-    --kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);
-    --kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);
-    --kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;
-    --kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);
-    --kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);
-    --kbq-tabs-tab-item-transparent-on-background-default-background: transparent;
-    --kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);
-    --kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);
-    --kbq-tabs-tab-item-transparent-on-background-states-hover-background: var(
-        --kbq-states-background-transparent-hover
-    );
-    --kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var(
-        --kbq-states-line-focus-theme
-    );
-    --kbq-tabs-tab-item-transparent-on-background-states-selected-background: var(
-        --kbq-states-background-transparent-active
-    );
-    --kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var(
-        --kbq-states-background-transparent-active
-    );
-    --kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var(
-        --kbq-states-background-transparent-active
-    );
-    --kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var(
-        --kbq-states-foreground-disabled
-    );
-    --kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);
-    --kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;
-    --kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);
-    --kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);
-    --kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;
-    --kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);
-    --kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);
-    --kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);
-    --kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
-    --kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var(
-        --kbq-states-background-transparent-active
-    );
-    --kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var(
-        --kbq-states-background-transparent-active
-    );
-    --kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var(
-        --kbq-states-background-transparent-active
-    );
-    --kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var(
-        --kbq-states-foreground-disabled
-    );
-    --kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);
-    --kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;
-    --kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);
-    --kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);
-    --kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);
-    --kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);
-    --kbq-tabs-tab-stack-transparent-on-background-background: transparent;
-    --kbq-tabs-tab-stack-transparent-on-surface-background: transparent;
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    /* THEME TOKENS */
     --kbq-tabs-tab-item-filled-on-background-default-background: transparent;
     --kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);
     --kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);

package/tags/tag-tokens.scss

@@ -7,63 +7,7 @@
     --kbq-tag-size-content-gap-horizontal: var(--kbq-size-3xs);
     --kbq-tag-size-icon-margin-left: var(--kbq-size-3xs);
     --kbq-tag-size-close-button-margin-right: var(--kbq-size-3xs);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-tag-theme-fade-on-default-background: var(--kbq-background-theme-fade);
-    --kbq-tag-theme-fade-on-default-text: var(--kbq-foreground-theme);
-    --kbq-tag-theme-fade-on-default-icon: var(--kbq-icon-theme);
-    --kbq-tag-theme-fade-on-default-close-button: var(--kbq-icon-theme);
-    --kbq-tag-theme-fade-on-states-hover-background: var(--kbq-states-background-theme-fade-hover);
-    --kbq-tag-theme-fade-on-states-hover-text: var(--kbq-foreground-theme);
-    --kbq-tag-theme-fade-on-states-hover-icon: var(--kbq-icon-theme);
-    --kbq-tag-theme-fade-on-states-hover-close-button: var(--kbq-icon-theme);
-    --kbq-tag-theme-fade-on-states-focus-background: var(--kbq-background-theme-fade);
-    --kbq-tag-theme-fade-on-states-focus-text: var(--kbq-foreground-theme);
-    --kbq-tag-theme-fade-on-states-focus-icon: var(--kbq-icon-theme);
-    --kbq-tag-theme-fade-on-states-focus-close-button: var(--kbq-icon-theme);
-    --kbq-tag-theme-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);
-    --kbq-tag-theme-fade-on-states-disabled-background: var(--kbq-states-background-disabled);
-    --kbq-tag-theme-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);
-    --kbq-tag-theme-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);
-    --kbq-tag-theme-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);
-    --kbq-tag-contrast-fade-on-default-background: var(--kbq-background-contrast-fade);
-    --kbq-tag-contrast-fade-on-default-text: var(--kbq-foreground-contrast);
-    --kbq-tag-contrast-fade-on-default-icon: var(--kbq-icon-contrast-fade);
-    --kbq-tag-contrast-fade-on-default-close-button: var(--kbq-icon-contrast-fade);
-    --kbq-tag-contrast-fade-on-states-hover-background: var(--kbq-states-background-contrast-fade-hover);
-    --kbq-tag-contrast-fade-on-states-hover-text: var(--kbq-foreground-contrast);
-    --kbq-tag-contrast-fade-on-states-hover-icon: var(--kbq-icon-contrast-fade);
-    --kbq-tag-contrast-fade-on-states-hover-close-button: var(--kbq-icon-contrast-fade);
-    --kbq-tag-contrast-fade-on-states-focus-background: var(--kbq-background-contrast-fade);
-    --kbq-tag-contrast-fade-on-states-focus-text: var(--kbq-foreground-contrast);
-    --kbq-tag-contrast-fade-on-states-focus-icon: var(--kbq-icon-contrast-fade);
-    --kbq-tag-contrast-fade-on-states-focus-close-button: var(--kbq-icon-contrast-fade);
-    --kbq-tag-contrast-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);
-    --kbq-tag-contrast-fade-on-states-disabled-background: var(--kbq-states-background-disabled);
-    --kbq-tag-contrast-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);
-    --kbq-tag-contrast-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);
-    --kbq-tag-contrast-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);
-    --kbq-tag-error-fade-on-default-background: var(--kbq-background-error-fade);
-    --kbq-tag-error-fade-on-default-text: var(--kbq-foreground-error);
-    --kbq-tag-error-fade-on-default-icon: var(--kbq-icon-error);
-    --kbq-tag-error-fade-on-default-close-button: var(--kbq-icon-error);
-    --kbq-tag-error-fade-on-states-hover-background: var(--kbq-states-background-error-fade-hover);
-    --kbq-tag-error-fade-on-states-hover-text: var(--kbq-foreground-error);
-    --kbq-tag-error-fade-on-states-hover-icon: var(--kbq-icon-error);
-    --kbq-tag-error-fade-on-states-hover-close-button: var(--kbq-icon-error);
-    --kbq-tag-error-fade-on-states-focus-background: var(--kbq-background-error-fade);
-    --kbq-tag-error-fade-on-states-focus-text: var(--kbq-foreground-error);
-    --kbq-tag-error-fade-on-states-focus-icon: var(--kbq-icon-error);
-    --kbq-tag-error-fade-on-states-focus-close-button: var(--kbq-icon-error);
-    --kbq-tag-error-fade-on-states-focus-outline: var(--kbq-states-line-focus-error);
-    --kbq-tag-error-fade-on-states-disabled-background: var(--kbq-states-background-disabled);
-    --kbq-tag-error-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);
-    --kbq-tag-error-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);
-    --kbq-tag-error-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    /* THEME TOKENS */
     --kbq-tag-theme-fade-on-default-background: var(--kbq-background-theme-fade);
     --kbq-tag-theme-fade-on-default-text: var(--kbq-foreground-theme);
     --kbq-tag-theme-fade-on-default-icon: var(--kbq-icon-theme);
@@ -115,21 +59,4 @@
     --kbq-tag-error-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);
     --kbq-tag-error-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);
     --kbq-tag-error-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);
-    --kbq-tag-warning-fade-on-default-background: var(--kbq-background-warning-fade);
-    --kbq-tag-warning-fade-on-default-text: var(--kbq-foreground-warning);
-    --kbq-tag-warning-fade-on-default-icon: var(--kbq-icon-warning);
-    --kbq-tag-warning-fade-on-default-close-button: var(--kbq-icon-warning);
-    --kbq-tag-warning-fade-on-states-hover-background: var(--kbq-states-background-warning-fade-hover);
-    --kbq-tag-warning-fade-on-states-hover-text: var(--kbq-foreground-warning);
-    --kbq-tag-warning-fade-on-states-hover-icon: var(--kbq-icon-warning);
-    --kbq-tag-warning-fade-on-states-hover-close-button: var(--kbq-icon-warning);
-    --kbq-tag-warning-fade-on-states-focus-background: var(--kbq-background-warning-fade);
-    --kbq-tag-warning-fade-on-states-focus-text: var(--kbq-foreground-warning);
-    --kbq-tag-warning-fade-on-states-focus-icon: var(--kbq-icon-warning);
-    --kbq-tag-warning-fade-on-states-focus-close-button: var(--kbq-icon-warning);
-    --kbq-tag-warning-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);
-    --kbq-tag-warning-fade-on-states-disabled-background: var(--kbq-states-background-disabled);
-    --kbq-tag-warning-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);
-    --kbq-tag-warning-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);
-    --kbq-tag-warning-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);
 }

package/timezone/timezone-option-tokens.scss

@@ -1,3 +1,5 @@
+@use '../list/list-tokens';
+
 .kbq-timezone-select__panel {
     --kbq-select-size-single-padding-left: var(--kbq-size-m);
     --kbq-select-size-single-padding-right: var(--kbq-size-xxs);
@@ -11,20 +13,12 @@
     --kbq-timezone-option-size-height: auto;
     --kbq-timezone-option-size-max-height: 5em;
     --kbq-timezone-option-size-optgroup-label-padding: 12px 12px 4px 12px;
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-select-panel-dropdown-background: var(--kbq-background-card);
-    --kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup);
-    --kbq-timezone-option-text: var(--kbq-foreground-contrast);
-    --kbq-timezone-option-caption: var(--kbq-foreground-contrast-secondary);
-    --kbq-timezone-option-optgroup-label: var(--kbq-foreground-contrast-secondary);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    /* THEME TOKENS */
     --kbq-select-panel-dropdown-background: var(--kbq-background-card);
     --kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup);
     --kbq-timezone-option-text: var(--kbq-foreground-contrast);
     --kbq-timezone-option-caption: var(--kbq-foreground-contrast-secondary);
     --kbq-timezone-option-optgroup-label: var(--kbq-foreground-contrast-secondary);
+    /* LIST THEME TOKENS */
+    @include list-tokens.list-theme-tokens;
 }

package/toast/toast-tokens.scss

@@ -17,28 +17,7 @@
     --kbq-toast-size-close-button-margin-right: var(--kbq-size-xxs);
     --kbq-toast-size-button-stack-padding-top: var(--kbq-size-s);
     --kbq-toast-size-button-stack-content-gap-horizontal: var(--kbq-size-m);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-toast-contrast-container-background: var(--kbq-background-card);
-    --kbq-toast-contrast-container-title: var(--kbq-foreground-contrast);
-    --kbq-toast-contrast-container-text: var(--kbq-foreground-contrast-secondary);
-    --kbq-toast-contrast-container-shadow: var(--kbq-shadow-popup);
-    --kbq-toast-error-container-background: var(--kbq-background-card);
-    --kbq-toast-error-container-title: var(--kbq-foreground-contrast);
-    --kbq-toast-error-container-text: var(--kbq-foreground-contrast-secondary);
-    --kbq-toast-error-container-shadow: var(--kbq-shadow-popup);
-    --kbq-toast-warning-container-background: var(--kbq-background-card);
-    --kbq-toast-warning-container-title: var(--kbq-foreground-contrast);
-    --kbq-toast-warning-container-text: var(--kbq-foreground-contrast-secondary);
-    --kbq-toast-warning-container-shadow: var(--kbq-shadow-popup);
-    --kbq-toast-success-container-background: var(--kbq-background-card);
-    --kbq-toast-success-container-title: var(--kbq-foreground-contrast);
-    --kbq-toast-success-container-text: var(--kbq-foreground-contrast-secondary);
-    --kbq-toast-success-container-shadow: var(--kbq-shadow-popup);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    /* THEME TOKENS */
     --kbq-toast-contrast-container-background: var(--kbq-background-card);
     --kbq-toast-contrast-container-title: var(--kbq-foreground-contrast);
     --kbq-toast-contrast-container-text: var(--kbq-foreground-contrast-secondary);

package/toggle/toggle-tokens.scss

@@ -7,58 +7,7 @@
     --kbq-toggle-size-big-width: 28px;
     --kbq-toggle-size-big-horizontal-content-padding: var(--kbq-size-s);
     --kbq-toggle-size-big-vertical-content-padding: var(--kbq-size-s);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-toggle-theme-default-border: var(--kbq-line-contrast-fade);
-    --kbq-toggle-theme-default-background: var(--kbq-background-bg);
-    --kbq-toggle-theme-default-circle-background: var(--kbq-icon-contrast);
-    --kbq-toggle-theme-states-hover-border: var(--kbq-line-contrast-fade);
-    --kbq-toggle-theme-states-hover-background: var(--kbq-states-background-transparent-hover);
-    --kbq-toggle-theme-states-hover-circle-background: var(--kbq-icon-contrast);
-    --kbq-toggle-theme-states-checked-border: transparent;
-    --kbq-toggle-theme-states-checked-background: var(--kbq-background-theme);
-    --kbq-toggle-theme-states-checked-circle-background: var(--kbq-icon-white);
-    --kbq-toggle-theme-states-checked-hover-border: transparent;
-    --kbq-toggle-theme-states-checked-hover-background: var(--kbq-states-background-theme-hover);
-    --kbq-toggle-theme-states-checked-hover-circle-background: var(--kbq-icon-white);
-    --kbq-toggle-theme-states-focused-border: var(--kbq-states-line-focus-theme);
-    --kbq-toggle-theme-states-focused-background: var(--kbq-background-bg);
-    --kbq-toggle-theme-states-focused-circle-background: var(--kbq-icon-contrast);
-    --kbq-toggle-theme-states-focused-focus-outline: var(--kbq-states-line-focus-theme);
-    --kbq-toggle-theme-states-checked-focused-border: var(--kbq-states-line-focus-theme);
-    --kbq-toggle-theme-states-checked-focused-background: var(--kbq-background-theme);
-    --kbq-toggle-theme-states-checked-focused-circle-background: var(--kbq-icon-white);
-    --kbq-toggle-theme-states-checked-focused-focus-outline: var(--kbq-states-line-focus-theme);
-    --kbq-toggle-theme-states-disabled-border: var(--kbq-states-line-disabled);
-    --kbq-toggle-theme-states-disabled-background: var(--kbq-states-background-disabled);
-    --kbq-toggle-theme-states-disabled-circle-background: var(--kbq-states-icon-disabled);
-    --kbq-toggle-error-default-border: var(--kbq-line-error);
-    --kbq-toggle-error-default-background: var(--kbq-background-error-less);
-    --kbq-toggle-error-default-circle-background: var(--kbq-icon-error);
-    --kbq-toggle-error-states-hover-border: var(--kbq-line-error);
-    --kbq-toggle-error-states-hover-background: var(--kbq-states-background-error-fade-hover);
-    --kbq-toggle-error-states-hover-circle-background: var(--kbq-icon-error);
-    --kbq-toggle-error-states-checked-border: var(--kbq-line-error);
-    --kbq-toggle-error-states-checked-background: var(--kbq-background-error);
-    --kbq-toggle-error-states-checked-circle-background: var(--kbq-icon-white);
-    --kbq-toggle-error-states-checked-hover-border: var(--kbq-line-error);
-    --kbq-toggle-error-states-checked-hover-background: var(--kbq-states-background-error-hover);
-    --kbq-toggle-error-states-checked-hover-circle-background: var(--kbq-icon-white);
-    --kbq-toggle-error-states-focused-border: var(--kbq-states-line-focus-error);
-    --kbq-toggle-error-states-focused-background: var(--kbq-states-background-error-less);
-    --kbq-toggle-error-states-focused-circle-background: var(--kbq-icon-error);
-    --kbq-toggle-error-states-focused-focus-outline: var(--kbq-states-line-focus-error);
-    --kbq-toggle-error-states-checked-focused-border: var(--kbq-states-line-focus-error);
-    --kbq-toggle-error-states-checked-focused-background: var(--kbq-background-error);
-    --kbq-toggle-error-states-checked-focused-circle-background: var(--kbq-icon-white);
-    --kbq-toggle-error-states-checked-focused-focus-outline: var(--kbq-states-line-focus-error);
-    --kbq-toggle-error-states-disabled-border: var(--kbq-states-line-disabled);
-    --kbq-toggle-error-states-disabled-background: var(--kbq-states-background-disabled);
-    --kbq-toggle-error-states-disabled-circle-background: var(--kbq-states-icon-disabled);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    /* THEME TOKENS */
     --kbq-toggle-theme-default-border: var(--kbq-line-contrast-fade);
     --kbq-toggle-theme-default-background: var(--kbq-background-bg);
     --kbq-toggle-theme-default-circle-background: var(--kbq-icon-contrast);

package/tooltip/tooltip-tokens.scss

@@ -4,27 +4,7 @@
     --kbq-tooltip-size-padding-horizontal: var(--kbq-size-m);
     --kbq-tooltip-size-padding-vertical: var(--kbq-size-s);
     --kbq-tooltip-size-arrow-size: var(--kbq-size-m);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-tooltip-contrast-fade-on-background: var(--kbq-background-card);
-    --kbq-tooltip-contrast-fade-on-text: var(--kbq-foreground-contrast);
-    --kbq-tooltip-contrast-fade-on-shadow: var(--kbq-shadow-popup);
-    --kbq-tooltip-contrast-fade-off-background: var(--kbq-background-night);
-    --kbq-tooltip-contrast-fade-off-text: var(--kbq-foreground-white);
-    --kbq-tooltip-contrast-fade-off-shadow: var(--kbq-shadow-popup);
-    --kbq-tooltip-theme-fade-off-background: var(--kbq-background-theme);
-    --kbq-tooltip-theme-fade-off-text: var(--kbq-foreground-white);
-    --kbq-tooltip-theme-fade-off-shadow: var(--kbq-shadow-popup);
-    --kbq-tooltip-warning-fade-off-background: var(--kbq-background-warning);
-    --kbq-tooltip-warning-fade-off-text: var(--kbq-foreground-white);
-    --kbq-tooltip-warning-fade-off-shadow: var(--kbq-shadow-popup);
-    --kbq-tooltip-error-fade-off-background: var(--kbq-background-error);
-    --kbq-tooltip-error-fade-off-text: var(--kbq-foreground-white);
-    --kbq-tooltip-error-fade-off-shadow: var(--kbq-shadow-popup);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    /* THEME TOKENS */
     --kbq-tooltip-contrast-fade-on-background: var(--kbq-background-card);
     --kbq-tooltip-contrast-fade-on-text: var(--kbq-foreground-contrast);
     --kbq-tooltip-contrast-fade-on-shadow: var(--kbq-shadow-popup);

package/tree/tree-option.scss

@@ -16,6 +16,7 @@
     border-width: var(--kbq-tree-size-container-focus-outline-width);
     border-style: solid;
     border-color: transparent;
+    border-radius: var(--kbq-size-border-radius);
 
     padding-top: kbq-difference-series-css-variables(
         [ tree-size-container-padding-vertical,
@@ -67,4 +68,14 @@
             display: flex;
         }
     }
+
+    &: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;
+    }
 }