@koobiq/components 16.0.0-beta.1 → 16.0.0-beta.5

package/LICENSE

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

package/README.md

@@ -1,6 +1,6 @@
-Mosaic
+Koobiq
 =======
 
-The sources for this package are in the main [Mosaic](https://github.com/positive-js/mosaic) repo.
+The sources for this package are in the main [Koobiq](#) repo.
 
 License: MIT

package/autocomplete/autocomplete-origin.directive.d.ts

@@ -8,5 +8,5 @@ export declare class KbqAutocompleteOrigin {
     elementRef: ElementRef<HTMLElement>;
     constructor(elementRef: ElementRef<HTMLElement>);
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAutocompleteOrigin, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAutocompleteOrigin, "[mcAutocompleteOrigin]", ["mcAutocompleteOrigin"], {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAutocompleteOrigin, "[kbqAutocompleteOrigin]", ["kbqAutocompleteOrigin"], {}, {}, never, never, false, never>;
 }

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

@@ -163,5 +163,5 @@ export declare class KbqAutocompleteTrigger implements ControlValueAccessor, OnD
     private resetActiveItem;
     private canOpen;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAutocompleteTrigger, [null, null, null, null, null, null, { optional: true; }, { optional: true; host: true; }, { optional: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAutocompleteTrigger, "input[mcAutocomplete], textarea[mcAutocomplete]", ["mcAutocompleteTrigger"], { "autocomplete": { "alias": "mcAutocomplete"; "required": false; }; "connectedTo": { "alias": "mcAutocompleteConnectedTo"; "required": false; }; "autocompleteAttribute": { "alias": "autocomplete"; "required": false; }; "autocompleteDisabled": { "alias": "mcAutocompleteDisabled"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAutocompleteTrigger, "input[kbqAutocomplete], textarea[kbqAutocomplete]", ["kbqAutocompleteTrigger"], { "autocomplete": { "alias": "kbqAutocomplete"; "required": false; }; "connectedTo": { "alias": "kbqAutocompleteConnectedTo"; "required": false; }; "autocompleteAttribute": { "alias": "autocomplete"; "required": false; }; "autocompleteDisabled": { "alias": "kbqAutocompleteDisabled"; "required": false; }; }, {}, never, never, false, never>;
 }

package/autocomplete/autocomplete.component.d.ts

@@ -69,5 +69,5 @@ export declare class KbqAutocomplete implements AfterContentInit {
     emitSelectEvent(option: KbqOption): void;
     onKeydown(event: KeyboardEvent): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAutocomplete, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAutocomplete, "kbq-autocomplete", ["mcAutocomplete"], { "displayWith": { "alias": "displayWith"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "classList": { "alias": "class"; "required": false; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; }; "openOnFocus": { "alias": "openOnFocus"; "required": false; }; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; }, ["options", "optionGroups"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAutocomplete, "kbq-autocomplete", ["kbqAutocomplete"], { "displayWith": { "alias": "displayWith"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "classList": { "alias": "class"; "required": false; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; }; "openOnFocus": { "alias": "openOnFocus"; "required": false; }; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; }, ["options", "optionGroups"], ["*"], false, never>;
 }

package/autocomplete/autocomplete.scss

@@ -6,9 +6,6 @@
 
 $tokens: meta.module-variables(tokens) !default;
 
-.kbq-autocomplete-trigger {
-    text-overflow: ellipsis;
-}
 
 .kbq-autocomplete-panel {
     visibility: hidden;

package/{core/styles/theming/_badges-theme.scss → badge/_badge-theme.scss}

@@ -1,8 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use 'badges' as badge;
-@use '../typography/typography-utils' as *;
+@use '../core/styles/typography/typography-utils' as *;
 
 
 @mixin kbq-badge-filled-color($badge) {
@@ -26,14 +25,11 @@
 }
 
 @mixin kbq-badge-theme($theme) {
-    $foreground: map.get($theme, foreground);
     $badge: map.get(map.get($theme, components), badge);
 
     $filled: map.get($badge, filled);
     $outline: map.get($badge, outline);
 
-    @include badge.kbq-badge(map.get($theme, tokens));
-
     .kbq-badge-filled {
         $fade-on: map.get($filled, fade-on);
 

package/badge/badge.component.d.ts

@@ -0,0 +1,26 @@
+import { KbqIconItem } from '@koobiq/components/icon';
+import * as i0 from "@angular/core";
+export declare enum KbqBadgeColors {
+    FadeContrast = "fade-contrast",
+    FadeTheme = "fade-theme",
+    FadeSuccess = "fade-success",
+    FadeWarning = "fade-warning",
+    FadeError = "fade-error",
+    Success = "success",
+    Warning = "warning",
+    Error = "error"
+}
+export declare class KbqBadgeCaption {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqBadgeCaption, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqBadgeCaption, "[kbq-badge-caption]", never, {}, {}, never, never, false, never>;
+}
+export declare class KbqBadge {
+    iconItem: KbqIconItem;
+    compact: boolean;
+    outline: boolean;
+    get badgeColor(): string;
+    set badgeColor(value: string | KbqBadgeColors);
+    private _badgeColor;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqBadge, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqBadge, "kbq-badge", never, { "compact": { "alias": "compact"; "required": false; }; "outline": { "alias": "outline"; "required": false; }; "badgeColor": { "alias": "badgeColor"; "required": false; }; }, {}, ["iconItem"], ["*"], false, never>;
+}

package/badge/badge.component.scss

@@ -0,0 +1,55 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+
+.kbq-badge {
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+
+    text-align: center;
+    white-space: nowrap;
+
+    border-style: solid;
+
+    box-sizing: border-box;
+
+    padding:
+        var(--kbq-badge-size-normal-vertical-padding, map.get($tokens, badge-size-normal-vertical-padding))
+        var(--kbq-badge-size-normal-horizontal-padding, map.get($tokens, badge-size-normal-horizontal-padding));
+
+    border: {
+        width: var(--kbq-badge-size-normal-border-width, map.get($tokens, badge-size-normal-border-width));
+        radius: var(--kbq-badge-size-normal-border-radius, map.get($tokens, badge-size-normal-border-radius));
+    }
+
+    & .kbq-badge-caption {
+        padding-left:
+            var(--kbq-badge-size-normal-content-padding, map.get($tokens, badge-size-normal-content-padding));
+    }
+
+    &.kbq-badge_compact {
+        padding:
+            var(--kbq-badge-size-compact-vertical-padding, map.get($tokens, badge-size-compact-vertical-padding))
+            var(
+                --kbq-badge-size-compact-horizontal-padding,
+                map.get($tokens, badge-size-compact-horizontal-padding)
+            );
+
+        border: {
+            width: var(--kbq-badge-size-compact-border-width, map.get($tokens, badge-size-compact-border-width));
+            radius: var(--kbq-badge-size-compact-border-radius, map.get($tokens, badge-size-compact-border-radius));
+        }
+
+        & .kbq-badge-caption {
+            padding-left:
+                var(--kbq-badge-size-compact-content-padding, map.get($tokens, badge-size-compact-content-padding));
+        }
+    }
+}

package/badge/badge.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./badge.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/cdk/a11y";
+import * as i4 from "@angular/cdk/platform";
+export declare class KbqBadgeModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqBadgeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqBadgeModule, [typeof i1.KbqBadge, typeof i1.KbqBadgeCaption], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.KbqBadge, typeof i1.KbqBadgeCaption]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqBadgeModule>;
+}

package/badge/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/badge/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './badge.module';
+export * from './badge.component';

package/button/button.scss

@@ -11,13 +11,16 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-button {
     @extend %kbq-button-base;
 
+    // base padding + compensation (4px) - border-width (2px)
     padding-left: calc(
         var(--kbq-button-size-horizontal-padding, map.get($tokens, button-size-horizontal-padding)) +
-        4px
+        4px -
+        var(--kbq-button-size-border-width, map.get($tokens, button-size-border-width))
     );
     padding-right: calc(
         var(--kbq-button-size-horizontal-padding, map.get($tokens, button-size-horizontal-padding)) +
-        4px
+        4px -
+        var(--kbq-button-size-border-width, map.get($tokens, button-size-border-width))
     );
 
     &.kbq-button-icon_left {

package/checkbox/README.md

@@ -1 +1 @@
-Please see the official documentation at https://github.com/positive-js/mosaic
+Please see the official documentation at #

package/checkbox/checkbox.d.ts

@@ -39,7 +39,7 @@ export declare class KbqCheckboxBase {
 /** @docs-private */
 export declare const KbqCheckboxMixinBase: HasTabIndexCtor & CanColorCtor & CanDisableCtor & typeof KbqCheckboxBase;
 /**
- * A mosaic checkbox component. Supports all of the functionality of an HTML5 checkbox,
+ * A Koobiq checkbox component. Supports all of the functionality of an HTML5 checkbox,
  * and exposes a similar API. A KbqCheckbox can be either checked, unchecked, indeterminate, or
  * disabled. Note that all additional accessibility attributes are taken care of by the component,
  * so there is no need to provide them yourself. However, if you want to omit a label and still

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

@@ -1,7 +1,7 @@
 import { ElementRef } from '@angular/core';
 import { AbstractConstructor, Constructor } from './constructor';
 export interface CanColor {
-    color: KbqComponentColors | ThemePalette;
+    color: KbqComponentColors | ThemePalette | string;
 }
 /** @docs-private */
 export type CanColorCtor = Constructor<CanColor> & AbstractConstructor<CanColor>;

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

@@ -4,7 +4,7 @@ import * as i1 from "@angular/cdk/bidi";
 export declare const KBQ_SANITY_CHECKS: InjectionToken<boolean>;
 export declare function mcSanityChecksFactory(): boolean;
 /**
- * Module that captures anything that should be loaded and/or run for *all* Mosaic
+ * Module that captures anything that should be loaded and/or run for *all* Koobiq
  * components. This includes Bidi, etc.
  *
  * This module should be imported to each top-level component module (e.g., KbqTabsModule).

package/core/forms/_forms-theme.scss

@@ -25,10 +25,10 @@
     $tokens: map.get($config, tokens);
 
     .kbq-form__label {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, forms-font-default-label));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, forms-font-label));
     }
 
-    .kbq-form__legend {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, forms-font-default-legend));
-    }
+    //.kbq-form__legend {
+    //    @include kbq-typography-level-to-styles($config, map.get($tokens, forms-font-default-legend));
+    //}
 }

package/core/forms/_forms.scss

@@ -20,10 +20,8 @@
     .kbq-form-horizontal {
         $config: kbq-typography-config($tokens);
 
-        $line-height: kbq-line-height($config, body);
-
+        $line-height: kbq-line-height($config, map.get($tokens, forms-font-label));
         $form-field-size-height: map.get($tokens, form-field-size-height);
-
         $label-padding-top: calc(($form-field-size-height - $line-height) / 2);
 
         & .kbq-form-row_margin {

package/core/option/_option-theme.scss

@@ -4,33 +4,52 @@
 @use '../styles/typography/typography-utils' as *;
 
 
-@mixin kbq-option-theme($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
+@mixin kbq-option($state) {
+    background: map.get($state, container-background);
+
+    .kbq-option-text {
+        color: map.get($state, text);
+    }
+
+    .kbq-icon {
+        color: map.get($state, icon);
+    }
 
-    $primary: map.get($theme, theme);
+    .kbq-option-action .kbq-icon {
+        color: map.get($state, icon-button);
+    }
+
+    .kbq-option-caption {
+        color: map.get($state, caption);
+    }
+}
+
+@mixin kbq-option-theme($theme) {
+    $list-item: map.get(map.get($theme, components), list-item);
 
     .kbq-option {
-        color: map.get($foreground, text);
+        @include kbq-option(map.get($list-item, default));
 
-        &:hover:not(.kbq-disabled) {
-            .kbq-option-overlay {
-                background: map.get($background, overlay-hover);
-            }
+        &:hover:not(.kbq-disabled):not([disabled]) {
+            @include kbq-option(map.get($list-item, hover));
         }
 
+        &.kbq-focused,
         &.kbq-active {
-            border-color: map.get(map.get($theme, states), focused-color);
+            border-color: map.get(map.get($list-item, focused), focus-outline);
         }
 
         &.kbq-selected {
-            background: map.get(map.get($theme, states), selected-color);
-        }
+            @include kbq-option(map.get($list-item, selected));
 
-        &.kbq-disabled {
-            background: transparent;
+            &:hover:not(.kbq-disabled):not([disabled]) {
+                @include kbq-option(map.get($list-item, selected-hover));
+            }
+        }
 
-            color: map.get($foreground, text-disabled);
+        &.kbq-disabled,
+        &[disabled] {
+            @include kbq-option(map.get($list-item, disabled));
         }
     }
 }
@@ -39,6 +58,10 @@
     $tokens: map.get($config, tokens);
 
     .kbq-option {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, option-font-default));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-text));
+    }
+
+    .kbq-list-option-caption {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-caption));
     }
 }

package/core/option/action.scss

@@ -1,5 +1,5 @@
 .kbq-option-action {
-    box-sizing: unset;
+    box-sizing: border-box;
 
     position: relative;
 
@@ -10,9 +10,8 @@
 
     margin-right: -2px;
 
-    //width 28px for total width 32px (left border + right border);
-    width: 28px;
-    height: 100%;
+    width: 24px;
+    height: 24px;
 
     cursor: pointer;
 

package/core/option/option.scss

@@ -1,62 +1,17 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../styles/tokens';
+@use '../styles/common';
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-option {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    box-sizing: border-box;
-
-    position: relative;
-
-    max-width: 100%;
-
-    height: var(--kbq-option-size-height, map.get($tokens, option-size-height));
-
-    border: var(--kbq-option-size-border-width, map.get($tokens, option-size-border-width)) solid transparent;
-
-    cursor: pointer;
-
-    outline: none;
-
-    padding-left: var(--kbq-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
-    padding-right: var(--kbq-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
-
-    -webkit-tap-highlight-color: transparent;
-
-    &.kbq-disabled {
-        cursor: default;
-    }
-
-    & .kbq-pseudo-checkbox {
-        margin-right: 8px;
-    }
-
-    & .kbq-option-overlay {
-        position: absolute;
-
-        top: calc(-1 * var(--kbq-option-size-border-width, #{map.get($tokens, option-size-border-width)}));
-        left: calc(-1 * var(--kbq-option-size-border-width, #{map.get($tokens, option-size-border-width)}));
-        right: calc(-1 * var(--kbq-option-size-border-width, #{map.get($tokens, option-size-border-width)}));
-        bottom: calc(-1 * var(--kbq-option-size-border-width, #{map.get($tokens, option-size-border-width)}));
-
-        pointer-events: none;
-        border-radius: inherit;
-    }
+    @include common.kbq-list-item-base();
 }
 
 .kbq-option-text {
-    display: inline-block;
-    flex-grow: 1;
+    @include common.kbq-list-text();
 
-    overflow: hidden;
-
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    &:not(.kbq-disabled):not([disabled]) {
+        cursor: pointer;
+    }
 }

package/core/styles/_koobiq-theme.scss

@@ -3,12 +3,12 @@
 @use 'theming/theming' as *;
 @use 'typography/typography' as *;
 
-@use 'theming/badges-theme' as *;
 @use 'theming/scrollbars-theme' as *;
 
 @use '../selection/pseudo-checkbox/pseudo-checkbox-theme' as *;
 @use '../../alert/alert-theme' as *;
 @use '../../autocomplete/autocomplete-theme' as *;
+@use '../../badge/badge-theme' as *;
 @use '../../button/button-theme' as *;
 @use '../../card/card-theme' as *;
 @use '../../checkbox/checkbox-theme' as *;
@@ -30,6 +30,7 @@
 @use '../../progress-bar/progress-bar-theme' as *;
 @use '../../progress-spinner/progress-spinner-theme' as *;
 @use '../../radio/radio-theme' as *;
+@use '../../risk-level/risk-level-theme' as *;
 @use '../../select/select-theme' as *;
 @use '../../sidepanel/sidepanel-theme' as *;
 @use '../../splitter/splitter-theme' as *;
@@ -86,6 +87,7 @@
     @include kbq-progress-spinner-theme($theme);
     @include kbq-pseudo-checkbox-theme($theme);
     @include kbq-radio-theme($theme);
+    @include kbq-risk-level-theme($theme);
     @include kbq-scrollbar-theme($theme);
     @include kbq-select-theme($theme);
     @include kbq-sidepanel-theme($theme);
@@ -136,6 +138,7 @@
     @include kbq-progress-bar-typography($config);
     @include kbq-progress-spinner-typography($config);
     @include kbq-radio-typography($config);
+    @include kbq-risk-level-typography($config);
     @include kbq-select-typography($config);
     @include kbq-sidepanel-typography($config);
     @include kbq-tabs-typography($config);

package/core/styles/_tokens.kbq.import.scss

@@ -1,4 +1,4 @@
-@import '../../../../node_modules/@koobiq/tokens-koobiq/web/variables';
-@import '../../../../node_modules/@koobiq/tokens-koobiq/web/palette';
-@import '../../../../node_modules/@koobiq/tokens-koobiq/web/typography';
-@import '../../../../node_modules/@koobiq/tokens-koobiq/web/md-typography';
+@import '../../../../node_modules/@koobiq/design-tokens/web/variables';
+@import '../../../../node_modules/@koobiq/design-tokens/web/palette';
+@import '../../../../node_modules/@koobiq/design-tokens/web/typography';
+@import '../../../../node_modules/@koobiq/design-tokens/web/md-typography';

package/core/styles/_tokens.scss

@@ -1,6 +1,6 @@
 @use 'sass:color' as *;
 
-@forward '@koobiq/tokens-koobiq/web/variables';
-@forward '@koobiq/tokens-koobiq/web/palette';
-@forward '@koobiq/tokens-koobiq/web/typography';
-@forward '@koobiq/tokens-koobiq/web/md-typography';
+@forward '@koobiq/design-tokens/web/variables';
+@forward '@koobiq/design-tokens/web/palette';
+@forward '@koobiq/design-tokens/web/typography';
+@forward '@koobiq/design-tokens/web/md-typography';

package/core/styles/common/_list.scss

@@ -1,3 +1,9 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../tokens';
+
+
 // This mixin will ensure that lines that overflow the container will hide the overflow and
 // truncate neatly with an ellipsis.
 @mixin kbq-truncate-line() {
@@ -41,6 +47,123 @@
     user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
 }
 
+@mixin kbq-list-text() {
+    $tokens: meta.module-variables(tokens) !default;
+
+    @include kbq-line-wrapper-base();
+    display: inline-block;
+
+    @include kbq-truncate-line();
+
+    padding-top: var(--kbq-list-size-text-padding-vertical, map.get($tokens, list-size-text-padding-vertical));
+    padding-bottom: var(--kbq-list-size-text-padding-vertical, map.get($tokens, list-size-text-padding-vertical));
+}
+
+// This mixin provides all list-item styles, changing font size and height based on whether the list is in dense mode.
+@mixin kbq-list-item-base() {
+    $tokens: meta.module-variables(tokens) !default;
+
+    $outline-width: map.get($tokens, list-size-container-focus-outline-width);
+
+    $padding-vertical: map.get($tokens, list-size-container-padding-vertical);
+    $padding-left: map.get($tokens, list-size-container-padding-left);
+    $padding-right: map.get($tokens, list-size-container-padding-right);
+
+    position: relative;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    box-sizing: border-box;
+
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+
+    min-height: 32px;
+
+    gap: var(
+        --kbq-list-size-container-content-gap-horizontal, map.get($tokens, list-size-container-content-gap-horizontal)
+    );
+
+    border-width: var(--kbq-list-size-container-focus-outline-width, $outline-width);
+    border-style: solid;
+    border-color: transparent;
+
+    padding:
+        calc(
+            var(--kbq-list-size-container-padding-vertical, $padding-vertical) -
+            var(--kbq-list-size-container-focus-outline-width, $outline-width)
+        )
+        calc(
+            var(--kbq-list-size-container-padding-right, $padding-right) -
+            var(--kbq-list-size-container-focus-outline-width, $outline-width)
+        )
+        calc(
+            var(--kbq-list-size-container-padding-vertical, $padding-vertical) -
+            var(--kbq-list-size-container-focus-outline-width, $outline-width)
+        )
+        calc(
+            var(--kbq-list-size-container-padding-left, $padding-left) -
+            var(--kbq-list-size-container-focus-outline-width, $outline-width)
+        );
+
+    .kbq-list-text {
+        @include kbq-list-text();
+    }
+
+    .kbq-list-option-caption {
+        padding-top: var(
+            --kbq-list-size-container-content-gap-vertical,
+            map.get($tokens, list-size-container-content-gap-vertical)
+        );
+    }
+}
+
+@mixin kbq-list-header-base() {
+    $tokens: meta.module-variables(tokens) !default;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    box-sizing: border-box;
+
+    min-height: 32px;
+
+    padding:
+        var(--kbq-list-size-header-padding-top, map.get($tokens, list-size-header-padding-top))
+        var(--kbq-list-size-header-padding-horizontal, map.get($tokens, list-size-header-padding-horizontal))
+        var(--kbq-list-size-header-padding-bottom, map.get($tokens, list-size-header-padding-bottom))
+        var(--kbq-list-size-header-padding-horizontal, map.get($tokens, list-size-header-padding-horizontal));
+
+    .kbq-list-text {
+        @include kbq-list-text();
+    }
+}
+
+@mixin kbq-list-subheading-base() {
+    $tokens: meta.module-variables(tokens) !default;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    box-sizing: border-box;
+
+    min-height: 32px;
+
+    padding:
+        var(--kbq-list-size-subheading-padding-top, map.get($tokens, list-size-subheading-padding-top))
+        var(--kbq-list-size-subheading-padding-horizontal, map.get($tokens, list-size-subheading-padding-horizontal))
+        var(--kbq-list-size-subheading-padding-bottom, map.get($tokens, list-size-subheading-padding-bottom))
+        var(--kbq-list-size-subheading-padding-horizontal, map.get($tokens, list-size-subheading-padding-horizontal));
+
+    .kbq-list-text {
+        @include kbq-list-text();
+    }
+}
+
 .kbq-no-select {
     @include kbq-no-select;
 }