@koobiq/components 18.7.1 → 18.9.0

package/tabs/tab-group.scss

@@ -1,7 +1,5 @@
 @use '../core/styles/common/layout';
 
-@use '../core/styles/common/tokens' as *;
-
 .kbq-tab-group {
     display: flex;
     flex-direction: column;
@@ -12,43 +10,43 @@
     &.kbq-tab-group_inverted-header {
         flex-direction: column-reverse;
     }
-}
 
-.kbq-tab-group_vertical {
-    flex-direction: row;
+    &.kbq-tab-group_vertical {
+        flex-direction: row;
 
-    .kbq-tab-list__content {
-        gap: var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical) 0;
-    }
+        .kbq-tab-list__content {
+            gap: var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical) 0;
+        }
 
-    & .kbq-tab-header__content {
-        overflow-y: auto;
+        & .kbq-tab-header__container {
+            overflow-y: auto;
+        }
     }
-}
 
-.kbq-tab-body__wrapper {
-    display: flex;
-    overflow: hidden;
-    position: relative;
-}
+    .kbq-tab-body__wrapper {
+        display: flex;
+        overflow: hidden;
+        position: relative;
+    }
 
-.kbq-tab-body {
-    @include layout.kbq-fill;
+    .kbq-tab-body {
+        @include layout.kbq-fill;
 
-    display: block;
-    overflow: hidden;
+        display: block;
+        overflow: hidden;
 
-    &.kbq-tab-body__active {
-        position: relative;
+        &.kbq-tab-body__active {
+            position: relative;
 
-        overflow-x: hidden;
-        overflow-y: auto;
+            overflow-x: hidden;
+            overflow-y: auto;
 
-        z-index: 1;
-        flex-grow: 1;
-    }
+            z-index: 1;
+            flex-grow: 1;
+        }
 
-    .kbq-tab-group.kbq-tab-group_dynamic-height &.kbq-tab-body__active {
-        overflow-y: hidden;
+        .kbq-tab-group.kbq-tab-group_dynamic-height &.kbq-tab-body__active {
+            overflow-y: hidden;
+        }
     }
 }

package/tabs/tab-header.component.d.ts

@@ -1,7 +1,4 @@
-import { Directionality } from '@angular/cdk/bidi';
-import { Platform } from '@angular/cdk/platform';
-import { ViewportRuler } from '@angular/cdk/scrolling';
-import { ChangeDetectorRef, ElementRef, NgZone, QueryList } from '@angular/core';
+import { ElementRef, QueryList } from '@angular/core';
 import { KbqPaginatedTabHeader } from './paginated-tab-header';
 import { KbqTabLabelWrapper } from './tab-label-wrapper.directive';
 import * as i0 from "@angular/core";
@@ -19,20 +16,17 @@ export type ScrollDirection = 'after' | 'before';
  * @docs-private
  */
 export declare class KbqTabHeader extends KbqPaginatedTabHeader {
-    readonly elementRef: ElementRef;
-    readonly changeDetectorRef: ChangeDetectorRef;
-    /** The index of the active tab. */
-    vertical: boolean;
+    /** Whether the tabs are underlined. */
     underlined: boolean;
-    items: QueryList<KbqTabLabelWrapper>;
-    tabListContainer: ElementRef;
-    tabList: ElementRef;
-    nextPaginator: ElementRef<HTMLElement>;
-    previousPaginator: ElementRef<HTMLElement>;
-    get activeTabOffsetWidth(): string;
-    get activeTabOffsetLeft(): string;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, viewportRuler: ViewportRuler, ngZone: NgZone, platform: Platform, dir: Directionality, animationMode?: string);
-    itemSelected(event: KeyboardEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabHeader, [null, null, null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabHeader, "kbq-tab-header", never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "underlined": { "alias": "underlined"; "required": false; }; }, { "selectFocusedIndex": "selectFocusedIndex"; "indexFocused": "indexFocused"; }, ["items"], ["*"], false, never>;
+    readonly items: QueryList<KbqTabLabelWrapper>;
+    readonly tabListContainer: ElementRef;
+    readonly tabList: ElementRef;
+    readonly nextPaginator: ElementRef<HTMLElement>;
+    readonly previousPaginator: ElementRef<HTMLElement>;
+    protected get activeTabOffsetWidth(): string | null;
+    protected get activeTabOffsetLeft(): string | null;
+    protected itemSelected(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabHeader, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabHeader, "kbq-tab-header", never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "underlined": { "alias": "underlined"; "required": false; }; }, { "selectFocusedIndex": "selectFocusedIndex"; "indexFocused": "indexFocused"; }, ["items"], ["*"], false, never>;
+    static ngAcceptInputType_underlined: unknown;
 }

package/tabs/tab-header.scss

@@ -1,6 +1,7 @@
 @use '../core/styles/common/vendor-prefixes';
-@use 'tabs-common' as *;
-@use '../core/styles/common/tokens' as *;
+@use './tabs-common';
+
+@include tabs-common.paginated-tab-header;
 
 .kbq-tab-header {
     display: flex;
@@ -53,44 +54,21 @@
     transition: all 0.2s ease-in-out;
 }
 
-.kbq-tab-header__pagination {
-    @include vendor-prefixes.user-select(none);
-
-    position: relative;
-    display: none;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    z-index: 2;
-    -webkit-tap-highlight-color: transparent;
-    touch-action: none;
-
-    padding-left: 12px;
-    padding-right: 12px;
-
-    .kbq-tab-header__pagination-controls_enabled & {
-        display: flex;
-    }
-}
-
-.kbq-tab-header__content {
+.kbq-tab-header__container {
     display: flex;
     flex-grow: 1;
-
     z-index: 1;
     overflow: hidden;
 }
 
 .kbq-tab-list {
     position: relative;
-
     width: 100%;
-
     transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);
 }
 
 .kbq-tab-label {
-    @include tab-label;
+    @include tabs-common.tab-label;
     @include vendor-prefixes.user-select(none);
 
     .kbq-tab-group_stretch-labels & {

package/tabs/tab-link.scss

@@ -0,0 +1,14 @@
+@use './tabs-common';
+
+.kbq-tab-link {
+    vertical-align: top;
+    text-decoration: none;
+    -webkit-tap-highlight-color: transparent;
+
+    @include tabs-common.tab-label;
+
+    & .kbq-tab-group_stretch-labels & {
+        flex-basis: 0;
+        flex-grow: 1;
+    }
+}

package/tabs/tab-nav-bar.d.ts

@@ -0,0 +1,92 @@
+import { AfterContentInit, AfterViewInit, ElementRef, OnDestroy, QueryList } from '@angular/core';
+import { KbqPaginatedTabHeader } from './paginated-tab-header';
+import * as i0 from "@angular/core";
+/**
+ * Navigation component matching the styles of the tab group header.
+ */
+export declare class KbqTabNavBar extends KbqPaginatedTabHeader implements AfterContentInit {
+    readonly tabListContainer: ElementRef;
+    readonly tabList: ElementRef;
+    readonly nextPaginator: ElementRef<HTMLElement>;
+    readonly previousPaginator: ElementRef<HTMLElement>;
+    readonly items: QueryList<KbqTabLink>;
+    /** Whether the nav bar background should be transparent. */
+    transparent: boolean;
+    onSurface: boolean;
+    /** Whether the nav bar should be underlined. */
+    underlined: boolean;
+    /**
+     * Associated tab panel controlled by the nav bar.
+     */
+    tabNavPanel?: KbqTabNavPanel;
+    get role(): string | null;
+    protected get activeTabOffsetWidth(): string | null;
+    protected get activeTabOffsetLeft(): string | null;
+    ngAfterContentInit(): void;
+    protected itemSelected(): void;
+    /** Notifies the component that the active link has been changed. */
+    updateActiveLink(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabNavBar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabNavBar, "[kbqTabNavBar], [kbq-tab-nav-bar]", ["kbqTabNavBar"], { "transparent": { "alias": "transparent"; "required": false; }; "onSurface": { "alias": "onSurface"; "required": false; }; "underlined": { "alias": "underlined"; "required": false; }; "tabNavPanel": { "alias": "tabNavPanel"; "required": false; }; }, {}, ["items"], ["*"], true, never>;
+    static ngAcceptInputType_transparent: unknown;
+    static ngAcceptInputType_onSurface: unknown;
+    static ngAcceptInputType_underlined: unknown;
+}
+/**
+ * Link inside of a KbqTabNavBar.
+ */
+export declare class KbqTabLink implements OnDestroy, AfterViewInit {
+    /** Unique id for the link. */
+    id: string;
+    /** Whether the link is active. */
+    get active(): boolean;
+    set active(value: boolean);
+    /** Whether the tab link is active or not. */
+    private _active;
+    get vertical(): boolean;
+    get underlined(): boolean;
+    /** Whether the tab link is disabled. */
+    disabled: boolean;
+    /** Link tab index. */
+    set tabIndex(value: number);
+    get tabIndex(): number;
+    private _tabIndex;
+    /** Link aria-selected attribute value. */
+    protected get ariaSelected(): string | null;
+    /** Link role attribute value. */
+    protected get role(): string | null;
+    /** Link aria-controls attribute value. */
+    protected get ariaControls(): string | null;
+    /** Link aria-current attribute value. */
+    protected get ariaCurrent(): string | null;
+    readonly elementRef: ElementRef<any>;
+    private readonly focusMonitor;
+    private readonly renderer;
+    private readonly tabNavBar;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private addClassModifierForIcons;
+    /** Focuses the tab link. */
+    focus(): void;
+    /** Handles the focus event. */
+    protected handleFocus(): void;
+    /** Handles the keydown event. */
+    protected handleKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabLink, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTabLink, "[kbqTabLink], [kbq-tab-link]", ["kbqTabLink"], { "id": { "alias": "id"; "required": false; }; "active": { "alias": "active"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_active: unknown;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
+}
+/**
+ * Tab panel component associated with KbqTabNav.
+ */
+export declare class KbqTabNavPanel {
+    /** Unique id for the tab panel. */
+    id: string;
+    /** Id of the active tab in the nav bar. */
+    activeTabId?: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabNavPanel, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTabNavPanel, "[kbqTabNavPanel]", ["kbqTabNavPanel"], { "id": { "alias": "id"; "required": false; }; }, {}, never, never, true, never>;
+}

package/tabs/tab-nav-bar.scss

@@ -0,0 +1,36 @@
+@use './tabs-common';
+
+@include tabs-common.paginated-tab-header();
+
+.kbq-tab-nav-bar {
+    display: flex;
+    position: relative;
+
+    .kbq-tab-link__container {
+        display: flex;
+        flex-grow: 1;
+        z-index: 1;
+        overflow: hidden;
+    }
+
+    .kbq-tab-list {
+        position: relative;
+        width: 100%;
+        transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);
+    }
+
+    .kbq-tab-list__content {
+        display: flex;
+    }
+
+    &.kbq-tab-group_vertical {
+        .kbq-tab-link__container {
+            overflow-y: scroll;
+        }
+
+        .kbq-tab-list__content {
+            flex-direction: column;
+            gap: var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical);
+        }
+    }
+}

package/tabs/tab.component.d.ts

@@ -65,4 +65,5 @@ export declare class KbqTab extends KbqTabMixinBase implements OnInit, CanDisabl
     protected setTemplateLabelInput(value: KbqTabLabel): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTab, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqTab, "kbq-tab", ["kbqTab"], { "disabled": { "alias": "disabled"; "required": false; }; "tooltipTitle": { "alias": "tooltipTitle"; "required": false; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; }; "textLabel": { "alias": "label"; "required": false; }; "empty": { "alias": "empty"; "required": false; }; "tabId": { "alias": "tabId"; "required": false; }; }, {}, ["templateLabel", "explicitContent"], ["*"], false, never>;
+    static ngAcceptInputType_empty: unknown;
 }

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/tabs/tabs.module.d.ts

@@ -3,19 +3,19 @@ import * as i1 from "./tab-group.component";
 import * as i2 from "./tab-label.directive";
 import * as i3 from "./tab.component";
 import * as i4 from "./tab-label-wrapper.directive";
-import * as i5 from "./tab-nav-bar/tab-nav-bar";
-import * as i6 from "./tab-body.component";
-import * as i7 from "./tab-header.component";
-import * as i8 from "./tab-content.directive";
-import * as i9 from "@angular/cdk/portal";
-import * as i10 from "@angular/cdk/a11y";
-import * as i11 from "@angular/cdk/scrolling";
-import * as i12 from "@koobiq/components/core";
-import * as i13 from "@koobiq/components/icon";
-import * as i14 from "@koobiq/components/tooltip";
-import * as i15 from "@angular/common";
+import * as i5 from "./tab-body.component";
+import * as i6 from "./tab-header.component";
+import * as i7 from "./tab-content.directive";
+import * as i8 from "@angular/cdk/portal";
+import * as i9 from "@angular/cdk/a11y";
+import * as i10 from "@angular/cdk/scrolling";
+import * as i11 from "@koobiq/components/core";
+import * as i12 from "@koobiq/components/icon";
+import * as i13 from "@koobiq/components/tooltip";
+import * as i14 from "@angular/cdk/observers";
+import * as i15 from "./tab-nav-bar";
 export declare class KbqTabsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTabsModule, [typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i4.KbqTabLabelWrapper, typeof i5.KbqTabNav, typeof i5.KbqTabLink, typeof i6.KbqTabBody, typeof i6.KbqTabBodyPortal, typeof i7.KbqTabHeader, typeof i8.KbqTabContent, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqUnderlinedTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler], [typeof i9.PortalModule, typeof i10.A11yModule, typeof i11.CdkScrollableModule, typeof i12.KbqCommonModule, typeof i13.KbqIconModule, typeof i14.KbqToolTipModule, typeof i15.NgStyle], [typeof i12.KbqCommonModule, typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i5.KbqTabNav, typeof i5.KbqTabLink, typeof i8.KbqTabContent, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqUnderlinedTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTabsModule, [typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i4.KbqTabLabelWrapper, typeof i5.KbqTabBody, typeof i5.KbqTabBodyPortal, typeof i6.KbqTabHeader, typeof i7.KbqTabContent, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler], [typeof i8.PortalModule, typeof i9.A11yModule, typeof i10.CdkScrollableModule, typeof i11.KbqCommonModule, typeof i12.KbqIconModule, typeof i13.KbqToolTipModule, typeof i14.CdkObserveContent, typeof i15.KbqTabNavBar, typeof i15.KbqTabLink, typeof i15.KbqTabNavPanel], [typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i4.KbqTabLabelWrapper, typeof i5.KbqTabBody, typeof i5.KbqTabBodyPortal, typeof i6.KbqTabHeader, typeof i7.KbqTabContent, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler, typeof i15.KbqTabNavBar, typeof i15.KbqTabLink, typeof i15.KbqTabNavPanel]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTabsModule>;
 }

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