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

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-theme.scss

@@ -5,17 +5,10 @@
 
 
 @mixin kbq-autocomplete-theme($theme) {
-    $foreground: map.get($theme, foreground);
+    $select-panel: map.get(map.get($theme, components), select-panel);
 
     .kbq-autocomplete-panel {
-        @include popup.popup-params($theme);
-
-        color: theming.kbq-color($foreground, text);
-
-        .kbq-selected {
-            $popup: map.get(map.get($theme, components), popup);
-
-            background-color: map.get($popup, background);
-        }
+        box-shadow: map.get($select-panel, shadow);
+        background: map.get($select-panel, background);
     }
 }

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

@@ -1,9 +1,9 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';
 import { ViewportRuler } from '@angular/cdk/scrolling';
-import { ChangeDetectorRef, ElementRef, InjectionToken, NgZone, OnDestroy, ViewContainerRef } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, InjectionToken, NgZone, OnDestroy, ViewContainerRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { KbqOption, KbqOptionSelectionChange } from '@koobiq/components/core';
+import { KbqOption, KbqOptionSelectionChange, KeyboardNavigationHandler } from '@koobiq/components/core';
 import { KbqFormField } from '@koobiq/components/form-field';
 import { Observable } from 'rxjs';
 import { KbqAutocompleteOrigin } from './autocomplete-origin.directive';
@@ -14,8 +14,6 @@ import * as i0 from "@angular/core";
  * to properly calculate the scrollTop of the panel. Because we are not
  * actually focusing the active item, scroll must be handled manually.
  */
-/** The height of each autocomplete option. */
-export declare const AUTOCOMPLETE_OPTION_HEIGHT = 32;
 /** The total height of the autocomplete panel. */
 export declare const AUTOCOMPLETE_PANEL_HEIGHT = 256;
 export declare const AUTOCOMPLETE_BORDER_WIDTH: number;
@@ -37,7 +35,7 @@ export declare const MAT_AUTOCOMPLETE_VALUE_ACCESSOR: any;
  * @docs-private
  */
 export declare function getKbqAutocompleteMissingPanelError(): Error;
-export declare class KbqAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
+export declare class KbqAutocompleteTrigger implements AfterViewInit, ControlValueAccessor, OnDestroy, KeyboardNavigationHandler {
     private elementRef;
     private viewContainerRef;
     private changeDetectorRef;
@@ -92,6 +90,7 @@ export declare class KbqAutocompleteTrigger implements ControlValueAccessor, OnD
     /** Stream of keyboard events that can close the panel. */
     private readonly closeKeyEventStream;
     constructor(elementRef: ElementRef<HTMLInputElement>, viewContainerRef: ViewContainerRef, changeDetectorRef: ChangeDetectorRef, overlay: Overlay, zone: NgZone, scrollStrategy: any, dir: Directionality, formField: KbqFormField, document: any, viewportRuler?: ViewportRuler | undefined);
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /** `View -> model callback called when value changes` */
     onChange: (value: any) => void;
@@ -118,6 +117,7 @@ export declare class KbqAutocompleteTrigger implements ControlValueAccessor, OnD
     handleInput(event: KeyboardEvent): void;
     handleFocus(): void;
     handleClick($event: MouseEvent): void;
+    scrollActiveOptionIntoView(): void;
     /** Stream of clicks outside of the autocomplete panel. */
     private getOutsideClickStream;
     /**
@@ -125,16 +125,6 @@ export declare class KbqAutocompleteTrigger implements ControlValueAccessor, OnD
      * arrow function in order to preserve the context.
      */
     private windowBlurHandler;
-    /**
-     * Given that we are not actually focusing active options, we must manually adjust scroll
-     * to reveal options below the fold. First, we find the offset of the option from the top
-     * of the panel. If that offset is below the fold, the new scrollTop will be the offset -
-     * the panel height + the option height, so the active option will be just visible at the
-     * bottom of the panel. If that offset is above the top of the visible panel, the new scrollTop
-     * will become the offset. If that offset is visible within the panel already, the scrollTop is
-     * not adjusted.
-     */
-    private scrollToOption;
     /**
      * This method listens to a stream of panel closing actions and resets the
      * stream every time the option list changes.
@@ -163,5 +153,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;
@@ -26,11 +23,6 @@ $tokens: meta.module-variables(tokens) !default;
 
     max-height: var(--kbq-autocomplete-size-panel-max-height, map.get($tokens, autocomplete-size-panel-max-height));
 
-    border: {
-        width: 1px;
-        style: solid;
-    }
-
     border-bottom-left-radius: var(
         --kbq-autocomplete-size-panel-border-radius, map.get($tokens, autocomplete-size-panel-border-radius)
     );

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

@@ -1,39 +1,40 @@
 @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) {
+@mixin kbq-badge-style($badge) {
     color: map.get($badge, color);
     background: map.get($badge, background);
-    border: transparent;
 
     & .kbq-badge-caption {
         color: map.get($badge, caption);
     }
+
+    & .kbq-icon {
+        color: map.get($badge, icon) !important;
+    }
+}
+
+@mixin kbq-badge-filled-color($badge) {
+    @include kbq-badge-style($badge);
+
+    border: transparent;
 }
 
 @mixin kbq-badge-outline-color($badge) {
-    color: map.get($badge, color);
-    border-color: map.get($badge, border);
-    background: map.get($badge, background);
+    @include kbq-badge-style($badge);
 
-    & .kbq-badge-caption {
-        color: map.get($badge, caption);
-    }
+    border-color: map.get($badge, border);
 }
 
 @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,44 @@
+import { AfterContentInit, ChangeDetectorRef, ElementRef, QueryList, Renderer2 } from '@angular/core';
+import { KbqIcon, 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 const getNodesWithoutComments: (nodes: NodeList) => Node[];
+export declare const leftIconClassName = "kbq-icon_left";
+export declare const rightIconClassName = "kbq-icon_right";
+export declare const badgeLeftIconClassName = "kbq-badge-icon_left";
+export declare const badgeRightIconClassName = "kbq-badge-icon_right";
+export declare class KbqBadgeCssStyler implements AfterContentInit {
+    private renderer;
+    private cdr;
+    icons: QueryList<KbqIcon>;
+    nativeElement: HTMLElement;
+    isIconButton: boolean;
+    constructor(elementRef: ElementRef, renderer: Renderer2, cdr: ChangeDetectorRef);
+    ngAfterContentInit(): void;
+    updateClassModifierForIcons(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqBadgeCssStyler, [null, null, { skipSelf: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqBadgeCssStyler, "kbq-badge", never, {}, {}, ["icons"], 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,83 @@
+@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-icon_left {
+        margin-right: var(
+            --kbq-badge-size-normal-icon-left-margin-right,
+            map.get($tokens, badge-size-normal-icon-left-margin-right)
+        );
+    }
+
+    & .kbq-icon_right {
+        margin-left: var(
+            --kbq-badge-size-normal-icon-right-margin-left,
+            map.get($tokens, badge-size-normal-icon-right-margin-left)
+        );
+    }
+
+    &.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));
+        }
+
+        & .kbq-icon_left {
+            margin-right: var(
+                --kbq-badge-size-compact-icon-left-margin-right,
+                map.get($tokens, badge-size-compact-icon-left-margin-right)
+            );
+        }
+
+        & .kbq-icon_right {
+            margin-left: var(
+                --kbq-badge-size-compact-icon-right-margin-left,
+                map.get($tokens, badge-size-compact-icon-right-margin-left)
+            );
+        }
+    }
+}

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 i1.KbqBadgeCssStyler], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.KbqBadge, typeof i1.KbqBadgeCaption, typeof i1.KbqBadgeCssStyler]>;
+    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-base.scss

@@ -42,7 +42,7 @@ $tokens: meta.module-variables(tokens) !default;
         outline: none;
     }
 
-    &[disabled] {
+    &.kbq-disabled {
         cursor: default;
     }
 

package/button/_button-theme.scss

@@ -25,18 +25,17 @@
 
     @include _icon(map.get($params, left-icon), map.get($params, right-icon));
 
-    &:hover:not([disabled]),
-    &.kbq-hover:not([disabled]) {
+    &:hover:not(.kbq-disabled),
+    &.kbq-hover:not(.kbq-disabled) {
         background: map.get($params, states_hover_background);
     }
 
-    &:active:not([disabled]),
-    &.kbq-active:not([disabled]) {
+    &:active:not(.kbq-disabled),
+    &.kbq-active:not(.kbq-disabled) {
         background: map.get($params, states_active_background);
     }
 
-    &.kbq-disabled,
-    &[disabled] {
+    &.kbq-disabled {
         color: map.get($params, states_disabled_foreground);
         background: map.get($params, states_disabled_background);
 
@@ -44,25 +43,26 @@
     }
 }
 
-@mixin kbq-outline-button($params) {
+@mixin kbq-outline-button($params, $include-icons: true) {
     border-color: map.get($params, border);
     color: map.get($params, foreground);
     background: map.get($params, background);
 
-    @include _icon(map.get($params, left-icon), map.get($params, right-icon));
+    @if $include-icons {
+        @include _icon(map.get($params, left-icon), map.get($params, right-icon));
+    }
 
-    &:hover:not([disabled]),
-    &.kbq-hover:not([disabled]) {
+    &:hover:not(.kbq-disabled),
+    &.kbq-hover:not(.kbq-disabled) {
         background: map.get($params, states_hover_background);
     }
 
-    &:active:not([disabled]),
-    &.kbq-active:not([disabled]) {
+    &:active:not(.kbq-disabled),
+    &.kbq-active:not(.kbq-disabled) {
         background: map.get($params, states_active_background);
     }
 
-    &.kbq-disabled,
-    &[disabled] {
+    &.kbq-disabled {
         border-color: map.get($params, states_disabled_border);
         color: map.get($params, states_disabled_foreground);
 
@@ -77,18 +77,17 @@
 
     @include _icon(map.get($params, left-icon), map.get($params, right-icon));
 
-    &:hover:not([disabled]),
-    &.kbq-hover:not([disabled]) {
+    &:hover:not(.kbq-disabled),
+    &.kbq-hover:not(.kbq-disabled) {
         background: map.get($params, states_hover_background);
     }
 
-    &:active:not([disabled]),
-    &.kbq-active:not([disabled]) {
+    &:active:not(.kbq-disabled),
+    &.kbq-active:not(.kbq-disabled) {
         background: map.get($params, states_active_background);
     }
 
-    &.kbq-disabled,
-    &[disabled] {
+    &.kbq-disabled {
         border-color: map.get($params, states_disabled_border);
         color: map.get($params, states_disabled_foreground);
 
@@ -130,13 +129,6 @@
 
                 @include kbq-outline-button($outline-theme-fade-on);
             }
-
-            &.kbq-contrast-fade {
-                $outline-contrast-fade-on: map.get(map.get($button, outline), contrast-fade-on);
-
-                @include kbq-outline-button($outline-contrast-fade-on);
-
-            }
         }
 
         &.kbq-button_transparent {
@@ -161,6 +153,22 @@
             }
         }
     }
+
+    .kbq-button_outline {
+        $outline-contrast-fade-on: map.get(map.get($button, outline), contrast-fade-on);
+
+        &.kbq-button {
+            &.kbq-contrast-fade {
+                @include kbq-outline-button($outline-contrast-fade-on);
+            }
+        }
+
+        &.kbq-button-icon {
+            &.kbq-contrast-fade {
+                @include kbq-outline-button($outline-contrast-fade-on, $include-icons: false);
+            }
+        }
+    }
 }
 
 @mixin kbq-button-typography($config) {

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/button-toggle/_button-toggle-theme.scss

@@ -9,10 +9,9 @@
 $tokens: meta.module-variables(tokens) !default;
 
 @mixin kbq-button-toggle-color($state) {
-    & .kbq-button-overlay {
-        background: map.get($state, background);
-        border-color: map.get($state, background);
-    }
+    background: map.get($state, background);
+
+    color: map.get($state, text);
 
     & .kbq-icon {
         color: map.get($state, icon);
@@ -20,73 +19,55 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 @mixin kbq-button-toggle-theme($theme) {
-    $button-toggle-group: map.get(map.get(map.get($theme, components), button-toggle), button-toggle-group);
-    $button-toggle: map.get(map.get(map.get($theme, components), button-toggle), button-toggle);
-    $states: map.get($button-toggle, states);
+    $button-toggle: map.get(map.get($theme, components), button-toggle);
 
     .kbq-button-toggle-group {
-        background: map.get($button-toggle-group, background);
-        border-color:  map.get($button-toggle-group, border);
+        $container: map.get($button-toggle, container);
+
+        background: map.get($container, background);
 
         .kbq-button-toggle {
+            $button: map.get($button-toggle, item);
+
             & > .kbq-button,
             & > .kbq-icon-button {
-                color: map.get($button-toggle, color);
-                border-color: map.get($button-toggle-group, background);
-                background: inherit;
+                @include kbq-button-toggle-color(map.get($button, default));
 
-                & .kbq-icon {
-                    color: map.get($button-toggle, icon);
+                &:hover:not(.kbq-disabled) {
+                    @include kbq-button-toggle-color(map.get($button, hover));
                 }
 
-                .kbq-button-overlay {
-                    background-color: unset;
+                &:active:not(.kbq-disabled) {
+                    @include kbq-button-toggle-color(map.get($button, active));
                 }
 
-                &:hover:not([disabled], .kbq-active) {
-                    @include kbq-button-toggle-color(map.get($states, hover));
-                }
-
-                &:active:not([disabled], .kbq-active) {
-                    @include kbq-button-toggle-color(map.get($states, active));
-                }
+                &.kbq-selected:not(.kbq-disabled) {
+                    @include kbq-button-toggle-color(map.get($button, selected));
 
-                &.kbq-active {
-                    $state: map.get($states, pressed);
-
-                    background: map.get($state, background);
-                    border-color: map.get($state, background);
+                    &:hover {
+                        @include kbq-button-toggle-color(map.get($button, selected-hover));
+                    }
 
-                    & .kbq-icon {
-                        color: map.get($state, icon);
+                    &:active {
+                        @include kbq-button-toggle-color(map.get($button, selected-active));
                     }
                 }
 
-                &.kbq-disabled,
-                &[disabled] {
-                    opacity: map.get(map.get($states, disabled), opacity);
+                &.kbq-disabled {
+                    @include kbq-button-toggle-color(map.get($button, disabled));
                 }
 
                 &.cdk-keyboard-focused {
-                    box-shadow: unset;
+                    border-color: map.get($button, focused);
                 }
             }
-
-            &.cdk-keyboard-focused {
-                box-shadow: 0 0 0 2px map-get(map-get($theme, states), focused-color);
-            }
         }
     }
 }
 
 @mixin kbq-button-toggle-typography($config) {
-    .kbq-button-toggle {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, button-toggle-font-default));
-
-        > .kbq-button,
-        > .kbq-icon-button {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, button-toggle-font-default));
-        }
+    .kbq-button-toggle .kbq-button-toggle-wrapper {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, button-toggle-font-item));
     }
 }
 

package/button-toggle/button-toggle.component.d.ts

@@ -100,7 +100,7 @@ export declare class KbqButtonToggleGroup implements ControlValueAccessor, OnIni
     /** Selects a value if there's a toggle that corresponds to it. */
     private selectValue;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonToggleGroup, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqButtonToggleGroup, "kbq-button-toggle-group", ["mcButtonToggleGroup"], { "vertical": { "alias": "vertical"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["buttonToggles"], never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqButtonToggleGroup, "kbq-button-toggle-group", ["kbqButtonToggleGroup"], { "vertical": { "alias": "vertical"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["buttonToggles"], never, false, never>;
 }
 /** Single button inside of a toggle group. */
 export declare class KbqButtonToggle implements OnInit, AfterContentInit, OnDestroy {
@@ -141,5 +141,5 @@ export declare class KbqButtonToggle implements OnInit, AfterContentInit, OnDest
      */
     markForCheck(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonToggle, [{ optional: true; }, null, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqButtonToggle, "kbq-button-toggle", ["mcButtonToggle"], { "checked": { "alias": "checked"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "change": "change"; }, ["icons"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqButtonToggle, "kbq-button-toggle", ["kbqButtonToggle"], { "checked": { "alias": "checked"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "change": "change"; }, ["icons"], ["*"], false, never>;
 }