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

package/tags/tag-input.d.ts

@@ -5,7 +5,7 @@ import { KbqTagsDefaultOptions } from './tag-default-options';
 import { KbqTagList } from './tag-list.component';
 import { KbqTagTextControl } from './tag-text-control';
 import * as i0 from "@angular/core";
-/** Represents an input event on a `mcTagInput`. */
+/** Represents an input event on a `kbqTagInput`. */
 export interface KbqTagInputEvent {
     /** The native `<input>` element that the event is being fired for. */
     input: HTMLInputElement;
@@ -83,5 +83,5 @@ export declare class KbqTagInput implements KbqTagTextControl, OnChanges {
     /** Checks whether a keycode is one of the configured separators. */
     private isSeparatorKey;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagInput, [null, null, null, { optional: true; self: true; }, { optional: true; self: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagInput, "input[mcTagInputFor]", ["mcTagInput", "mcTagInputFor"], { "separatorKeyCodes": { "alias": "mcTagInputSeparatorKeyCodes"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tagList": { "alias": "mcTagInputFor"; "required": false; }; "addOnBlur": { "alias": "mcTagInputAddOnBlur"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "tagEnd": "mcTagInputTokenEnd"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagInput, "input[kbqTagInputFor]", ["kbqTagInput", "kbqTagInputFor"], { "separatorKeyCodes": { "alias": "kbqTagInputSeparatorKeyCodes"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tagList": { "alias": "kbqTagInputFor"; "required": false; }; "addOnBlur": { "alias": "kbqTagInputAddOnBlur"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "tagEnd": "kbqTagInputTokenEnd"; }, never, never, false, never>;
 }

package/tags/tag-list.component.d.ts

@@ -80,7 +80,7 @@ export declare class KbqTagList extends KbqTagListMixinBase implements KbqFormFi
      */
     get placeholder(): string;
     set placeholder(value: string);
-    /** Whether any tags or the mcTagInput inside of this tag-list has focus. */
+    /** Whether any tags or the kbqTagInput inside of this tag-list has focus. */
     get focused(): boolean;
     /**
      * Implemented as part of KbqFormFieldControl.
@@ -241,6 +241,7 @@ export declare class KbqTagList extends KbqTagListMixinBase implements KbqFormFi
     private syncTagsDisabledState;
     /** Revalidate control. */
     private revalidate;
+    private propagateSelectableToChildren;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagList, [null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTagList, "kbq-tag-list", ["mcTagList"], { "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["cleaner", "tags"], ["*", "kbq-cleaner"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTagList, "kbq-tag-list", ["kbqTagList"], { "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["cleaner", "tags"], ["*", "kbq-cleaner"], false, never>;
 }

package/tags/tag-list.scss

@@ -11,6 +11,10 @@ $tokens: meta.module-variables(tokens) !default;
     flex-direction: row;
 
     box-sizing: border-box;
+
+    &:focus-visible {
+        outline: none;
+    }
 }
 
 .kbq-tag-input {
@@ -18,7 +22,14 @@ $tokens: meta.module-variables(tokens) !default;
     outline: none;
     background: transparent;
 
-    min-height: 22px;
+    text-overflow: ellipsis;
+
+    min-height: unset;
+
+    padding-top: var(--kbq-tag-size-padding-vertical, map.get($tokens, tag-size-padding-vertical));
+    padding-bottom: var(--kbq-tag-size-padding-vertical, map.get($tokens, tag-size-padding-vertical));
+    padding-left: 4px;
+    padding-right: unset;
 }
 
 .kbq-tags-list__list-container {
@@ -36,8 +47,6 @@ $tokens: meta.module-variables(tokens) !default;
         max-width: 100%;
 
         flex: 1 1 auto;
-
-        margin-left: var(--kbq-tag-input-size-content-gap, map.get($tokens, tag-input-size-content-gap));
     }
 }
 
@@ -49,18 +58,19 @@ $tokens: meta.module-variables(tokens) !default;
 
 .kbq-form-field-type-tag-list {
     & .kbq-form-field__container {
-        padding-top: calc(
-            var(--kbq-tag-input-size-padding-vertical, map.get($tokens, tag-input-size-padding-vertical)) -
-            var(--kbq-form-field-size-border-width, map.get($tokens, form-field-size-border-width))
-        );
-
-        padding-bottom: calc(
-            var(--kbq-tag-input-size-padding-vertical, map.get($tokens, tag-input-size-padding-vertical)) -
-            var(--kbq-form-field-size-border-width, map.get($tokens, form-field-size-border-width))
-        );
-
-        padding-left: var(
-            --kbq-tag-input-size-padding-left, map.get($tokens, tag-input-size-padding-left)
-        );
+        $padding-vertical: map.get($tokens, tag-input-size-padding-vertical);
+        $border-width: map.get($tokens, form-field-size-border-width);
+
+        padding:
+            calc(
+                var(--kbq-tag-input-size-padding-vertical, #{$padding-vertical}) -
+                var(--kbq-form-field-size-border-width, $border-width)
+            )
+            var(--kbq-tag-input-size-padding-right, map.get($tokens, tag-input-size-padding-right))
+            calc(
+                var(--kbq-tag-input-size-padding-vertical, #{$padding-vertical}) -
+                var(--kbq-form-field-size-border-width, $border-width)
+            )
+            var(--kbq-tag-input-size-padding-left, map.get($tokens, tag-input-size-padding-left));
     }
 }

package/tags/tag.component.d.ts

@@ -20,7 +20,7 @@ export declare class KbqTagSelectionChange {
  */
 export declare class KbqTagAvatar {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagAvatar, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagAvatar, "kbq-tag-avatar, [mcTagAvatar]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagAvatar, "kbq-tag-avatar, [kbqTagAvatar]", never, {}, {}, never, never, false, never>;
 }
 /**
  * Dummy directive to add CSS class to tag trailing icon.
@@ -28,7 +28,7 @@ export declare class KbqTagAvatar {
  */
 export declare class KbqTagTrailingIcon {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagTrailingIcon, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagTrailingIcon, "kbq-tag-trailing-icon, [mcTagTrailingIcon]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagTrailingIcon, "kbq-tag-trailing-icon, [kbqTagTrailingIcon]", never, {}, {}, never, never, false, never>;
 }
 /** @docs-private */
 export declare class KbqTagBase {
@@ -111,19 +111,19 @@ export declare class KbqTag extends KbqTagMixinBase implements IFocusableOption,
      * Informs any listeners of the removal request. Does not remove the tag from the DOM.
      */
     remove(): void;
-    handleClick(event: Event): void;
+    handleMousedown(event: Event): void;
     handleKeydown(event: KeyboardEvent): void;
     blur(): void;
     private dispatchSelectionChange;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTag, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTag, "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", ["mcTag"], { "color": { "alias": "color"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "selectionChange": "selectionChange"; "destroyed": "destroyed"; "removed": "removed"; }, ["avatar", "trailingIcon", "removeIcon", "contentChildren"], ["[kbq-icon]:not([mcTagRemove])", "*", "[mcTagRemove]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTag, "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", ["kbqTag"], { "color": { "alias": "color"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "selectionChange": "selectionChange"; "destroyed": "destroyed"; "removed": "removed"; }, ["avatar", "trailingIcon", "removeIcon", "contentChildren"], ["[kbq-icon]:not([kbqTagRemove])", "*", "[kbqTagRemove]"], false, never>;
 }
 /**
  *
  * Example:
  *
  *     `<kbq-tag>
- *       <kbq-icon mcTagRemove>cancel</kbq-icon>
+ *       <kbq-icon kbqTagRemove>cancel</kbq-icon>
  *     </kbq-tag>`
  *
  * You *may* use a custom icon, but you may need to override the `kbq-tag-remove` positioning
@@ -136,5 +136,5 @@ export declare class KbqTagRemove {
     /** Calls the parent tag's public `remove()` method if applicable. */
     handleClick(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagRemove, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagRemove, "[mcTagRemove]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagRemove, "[kbqTagRemove]", never, {}, {}, never, never, false, never>;
 }

package/textarea/textarea.component.d.ts

@@ -110,5 +110,5 @@ export declare class KbqTextarea extends KbqTextareaMixinBase implements KbqForm
     /** Checks whether the textarea is invalid based on the native validation. */
     protected isBadInput(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTextarea, [null, { optional: true; self: true; }, { optional: true; }, { optional: true; }, null, { optional: true; self: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTextarea, "textarea[mcTextarea]", ["mcTextarea"], { "canGrow": { "alias": "canGrow"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTextarea, "textarea[kbqTextarea]", ["kbqTextarea"], { "canGrow": { "alias": "canGrow"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, false, never>;
 }

package/timepicker/timepicker.directive.d.ts

@@ -62,7 +62,7 @@ export declare class KbqTimepicker<D> implements KbqFormFieldControl<D>, Control
     get value(): D | null;
     set value(value: D | null);
     private _value;
-    set mcValidationTooltip(tooltip: KbqWarningTooltipTrigger);
+    set kbqValidationTooltip(tooltip: KbqWarningTooltipTrigger);
     incorrectInput: EventEmitter<void>;
     get hasSelection(): boolean;
     get isFullFormat(): boolean;
@@ -137,5 +137,5 @@ export declare class KbqTimepicker<D> implements KbqFormFieldControl<D>, Control
     private setControl;
     private validatorOnChange;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimepicker<any>, [null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTimepicker<any>, "input[mcTimepicker]", ["mcTimepicker"], { "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "required": { "alias": "required"; "required": false; }; "format": { "alias": "format"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "value": { "alias": "value"; "required": false; }; "mcValidationTooltip": { "alias": "mcValidationTooltip"; "required": false; }; }, { "incorrectInput": "incorrectInput"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTimepicker<any>, "input[kbqTimepicker]", ["kbqTimepicker"], { "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "required": { "alias": "required"; "required": false; }; "format": { "alias": "format"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "value": { "alias": "value"; "required": false; }; "kbqValidationTooltip": { "alias": "kbqValidationTooltip"; "required": false; }; }, { "incorrectInput": "incorrectInput"; }, never, never, false, never>;
 }

package/timezone/timezone-option.component.d.ts

@@ -11,5 +11,5 @@ export declare class KbqTimezoneOption extends KbqOption {
     private _timezone;
     get viewValue(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimezoneOption, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTimezoneOption, "kbq-timezone-option", ["mcTimezoneOption"], { "highlightText": { "alias": "highlightText"; "required": false; }; "timezone": { "alias": "timezone"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTimezoneOption, "kbq-timezone-option", ["kbqTimezoneOption"], { "highlightText": { "alias": "highlightText"; "required": false; }; "timezone": { "alias": "timezone"; "required": false; }; }, {}, never, never, false, never>;
 }

package/timezone/timezone-select.component.d.ts

@@ -10,5 +10,5 @@ export declare class KbqTimezoneSelect extends KbqSelect {
     cleaner: KbqCleaner;
     search: KbqSelectSearch;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimezoneSelect, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTimezoneSelect, "kbq-timezone-select", ["mcTimezoneSelect"], {}, {}, ["customTrigger", "cleaner", "search"], ["kbq-timezone-select-trigger", "kbq-cleaner", "[mcSelectSearch]", "[kbq-select-search-empty-result]", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTimezoneSelect, "kbq-timezone-select", ["kbqTimezoneSelect"], {}, {}, ["customTrigger", "cleaner", "search"], ["kbq-timezone-select-trigger", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*"], false, never>;
 }

package/title/title.directive.d.ts

@@ -27,5 +27,5 @@ export declare class KbqTitleDirective extends KbqTooltipTrigger implements Afte
     hideTooltip(): void;
     private createMutationObserver;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTitleDirective, [null, null, null, null, null, null, null, { optional: true; }, { optional: true; host: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTitleDirective, "[kbq-title]", ["mcTitle"], {}, {}, ["childContainer", "parentContainer"], never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTitleDirective, "[kbq-title]", ["kbqTitle"], {}, {}, ["childContainer", "parentContainer"], never, false, never>;
 }

package/toast/_toast-theme.scss

@@ -4,43 +4,35 @@
 @use '../core/styles/typography/typography-utils' as *;
 
 
-@mixin kbq-toast-theme($theme) {
-    $foreground: map.get($theme, foreground);
-
-    $toast: map.get(map.get($theme, components), toast);
-
-    .kbq-toast {
-        &.kbq-toast_info .kbq-toast__icon {
-            color: map.get($toast, icon_info);
-        }
+@mixin kbq-toast($toast) {
+    box-shadow: map.get($toast, box-shadow);
 
-        &.kbq-toast_success .kbq-toast__icon {
-            color: map.get($toast, icon_success);
-        }
+    background: map.get($toast, background);
 
-        &.kbq-toast_warning .kbq-toast__icon {
-            color: map.get($toast, icon_warning);
-        }
+    .kbq-toast__title {
+        color: map.get($toast, title);
+    }
 
-        &.kbq-toast_error .kbq-toast__icon {
-            color: map.get($toast, icon_error);
-        }
+    .kbq-toast__text {
+        color: map.get($toast, text);
     }
+}
 
-    .kbq-toast__wrapper {
-        border-color: map.get($toast, border);
 
-        background: map.get($toast, background);
+@mixin kbq-toast-theme($theme) {
+    $toast: map.get(map.get($theme, components), toast);
 
-        box-shadow: map.get($toast, shadow);
-    }
+    $contrast: map.get($toast, contrast);
+    $error: map.get($toast, error);
 
-    .kbq-toast__title {
-        color: map.get($toast, text);
-    }
+    .kbq-toast {
+        &.kbq-toast_contrast {
+            @include kbq-toast($contrast);
+        }
 
-    .kbq-toast__caption {
-        color: map.get($toast, text-caption);
+        &.kbq-toast_error {
+            @include kbq-toast($error);
+        }
     }
 }
 
@@ -48,14 +40,10 @@
     $tokens: map.get($config, tokens);
 
     .kbq-toast {
-        @include kbq-typography-level-to-styles($config, body);
+        @include kbq-typography-level-to-styles($config, map.get($tokens, toast-font-text));
     }
 
     .kbq-toast__title {
         @include kbq-typography-level-to-styles($config, map.get($tokens, toast-font-title));
     }
-
-    .kbq-toast__caption {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, toast-font-caption));
-    }
 }

package/toast/toast-animations.d.ts

@@ -2,3 +2,4 @@ import { AnimationTriggerMetadata } from '@angular/animations';
 export declare const mcToastAnimations: {
     readonly toastState: AnimationTriggerMetadata;
 };
+export declare const toastState: AnimationTriggerMetadata;

package/toast/toast-container.component.d.ts

@@ -1,15 +1,19 @@
-import { ChangeDetectorRef, ComponentRef, EmbeddedViewRef, Injector, TemplateRef, ViewContainerRef, ViewRef } from '@angular/core';
+import { CdkScrollable, ScrollDispatcher } from '@angular/cdk/overlay';
+import { ChangeDetectorRef, ComponentRef, ElementRef, EmbeddedViewRef, Injector, NgZone, TemplateRef, ViewContainerRef, ViewRef } from '@angular/core';
+import { KbqToastService } from './toast.service';
 import { KbqToastData } from './toast.type';
 import * as i0 from "@angular/core";
-export declare class KbqToastContainerComponent {
+export declare class KbqToastContainerComponent extends CdkScrollable {
     private injector;
     private changeDetectorRef;
+    readonly service: KbqToastService;
     viewContainer: ViewContainerRef;
-    constructor(injector: Injector, changeDetectorRef: ChangeDetectorRef);
+    constructor(injector: Injector, changeDetectorRef: ChangeDetectorRef, service: KbqToastService, elementRef: ElementRef<HTMLElement>, scrollDispatcher: ScrollDispatcher, ngZone: NgZone);
     createToast<C>(data: KbqToastData, componentType: any, onTop: boolean): ComponentRef<C>;
     createTemplate<C>(data: KbqToastData, template: TemplateRef<any>, onTop: boolean): EmbeddedViewRef<C>;
     remove(viewRef: ViewRef): void;
     getInjector(data: KbqToastData): Injector;
+    dispatchScrollEvent: () => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqToastContainerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqToastContainerComponent, "kbq-toast-container", never, {}, {}, never, never, false, never>;
 }

package/toast/toast-container.component.scss

@@ -11,8 +11,9 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-toast-container {
     display: flex;
     flex-direction: column;
+    align-items: flex-end;
 
-    gap: var(--kbq-toast-size-gap, map.get($tokens, toast-size-gap));
+    gap: 12px;
 }
 
 .cdk-overlay-container {

package/toast/toast.component.d.ts

@@ -1,3 +1,4 @@
+import { AnimationEvent } from '@angular/animations';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { ElementRef, OnDestroy } from '@angular/core';
 import { ThemePalette } from '@koobiq/components/core';
@@ -5,6 +6,10 @@ import { BehaviorSubject } from 'rxjs';
 import { KbqToastService } from './toast.service';
 import { KbqToastData } from './toast.type';
 import * as i0 from "@angular/core";
+export declare class KbqToastCloseButton {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqToastCloseButton, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqToastCloseButton, "[kbq-toast-close-button]", never, {}, {}, never, never, false, never>;
+}
 export declare class KbqToastComponent implements OnDestroy {
     readonly data: KbqToastData;
     readonly service: KbqToastService;
@@ -21,13 +26,13 @@ export declare class KbqToastComponent implements OnDestroy {
     get toastStyle(): {
         [x: string]: boolean;
     };
-    get hasDismiss(): boolean;
     get isFocusedOrHovered(): boolean;
     private destroyed;
     constructor(data: KbqToastData, service: KbqToastService, elementRef: ElementRef, focusMonitor: FocusMonitor);
     ngOnDestroy(): void;
     close(): void;
     isTemplateRef(value: any): boolean;
+    onAnimation($event: AnimationEvent): void;
     private runFocusMonitor;
     private stopFocusMonitor;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqToastComponent, never>;

package/toast/toast.component.scss

@@ -9,42 +9,38 @@
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-toast {
+    display: flex;
     box-sizing: border-box;
 
     z-index: $z-index-toast;
 
-    max-height: 200px;
-    height: auto;
-}
-
-.kbq-toast__wrapper {
-    box-sizing: border-box;
+    min-width: var(--kbq-toast-size-container-min-width, map.get($tokens, toast-size-container-min-width));
+    max-width: 480px;
 
-    display: flex;
-    flex: 1 1 auto;
+    height: auto;
 
-    width: var(--kbq-toast-size-width, map.get($tokens, toast-size-width));
+    border-radius: var(--kbq-toast-size-container-border-radius, map.get($tokens, toast-size-container-border-radius));
 
-    padding-right: var(--kbq-toast-size-padding-right, map.get($tokens, toast-size-padding-right));
-    padding-left: var(--kbq-toast-size-padding-left, map.get($tokens, toast-size-padding-left));
+    padding:
+        var(--kbq-toast-size-container-padding-vertical, map.get($tokens, toast-size-container-padding-vertical))
+        var(--kbq-toast-size-container-padding-horizontal, map.get($tokens, toast-size-container-padding-horizontal));
 
-    border-width: var(--kbq-toast-size-border-width, map.get($tokens, toast-size-border-width));
-    border-style: solid;
-    border-radius: var(--kbq-toast-size-border-radius, map.get($tokens, toast-size-border-radius));
-}
-
-.kbq-toast__icon-container {
-    padding-right: var(--kbq-toast-size-icon-margin, map.get($tokens, toast-size-icon-margin));
-
-    padding-top: var(--kbq-toast-size-padding-vertical, map.get($tokens, toast-size-padding-vertical));
-    padding-bottom: var(--kbq-toast-size-padding-vertical, map.get($tokens, toast-size-padding-vertical));
+    gap: var(
+        --kbq-toast-size-container-content-gap-horizontal,
+        map.get($tokens, toast-size-container-content-gap-horizontal)
+    );
 }
 
 .kbq-toast__container {
-    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    flex: 1;
 
-    padding-top: var(--kbq-toast-size-padding-vertical, map.get($tokens, toast-size-padding-vertical));
-    padding-bottom: var(--kbq-toast-size-padding-vertical, map.get($tokens, toast-size-padding-vertical));
+    gap: var(
+        --kbq-toast-size-container-content-gap-vertical,
+        map.get($tokens, toast-size-container-content-gap-vertical)
+    )
 }
 
 .kbq-toast__title {
@@ -53,24 +49,35 @@ $tokens: meta.module-variables(tokens) !default;
     }
 }
 
+.kbq-toast__text {
+    display: flex;
+    flex: 1;
+    align-items: center;
+}
+
 .kbq-toast__content {
     display: flex;
     flex-direction: column;
 }
 
 .kbq-toast__actions {
-    margin-top: var(--kbq-toast-size-actionbar-margin, map.get($tokens, toast-size-actionbar-margin));
+    display: flex;
 
-    & > * {
-        margin-right: var(--kbq-toast-size-actionbar-gap, map.get($tokens, toast-size-actionbar-gap));
-    }
-}
+    padding-top: var(--kbq-toast-size-button-stack-padding-top, map.get($tokens, toast-size-button-stack-padding-top));
 
-.kbq-toast__close {
-    float: right;
+    gap: var(
+        --kbq-toast-size-button-stack-content-gap-horizontal,
+        map.get($tokens, toast-size-button-stack-content-gap-horizontal)
+    );
 
-    width: var(--kbq-toast-size-close-button-width, map.get($tokens, toast-size-close-button-width));
-    height: var(--kbq-toast-size-close-button-width, map.get($tokens, toast-size-close-button-width));
+    & * + .kbq-link {
+        margin-left: 12px;
+    }
+}
 
-    margin: -6px -8px -6px 8px;
+.kbq-toast__close-button {
+    margin-top: var(--kbq-toast-size-close-button-margin-top, map.get($tokens, toast-size-close-button-margin-top));
+    margin-right: var(
+        --kbq-toast-size-close-button-margin-right, map.get($tokens, toast-size-close-button-margin-right)
+    );
 }

package/toast/toast.module.d.ts

@@ -8,6 +8,6 @@ import * as i6 from "@koobiq/components/icon";
 import * as i7 from "@koobiq/components/button";
 export declare class KbqToastModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqToastModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqToastModule, [typeof i1.KbqToastComponent, typeof i2.KbqToastContainerComponent], [typeof i3.CommonModule, typeof i4.OverlayModule, typeof i5.A11yModule, typeof i6.KbqIconModule, typeof i7.KbqButtonModule], never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqToastModule, [typeof i1.KbqToastComponent, typeof i2.KbqToastContainerComponent, typeof i1.KbqToastCloseButton], [typeof i3.CommonModule, typeof i4.OverlayModule, typeof i5.A11yModule, typeof i6.KbqIconModule, typeof i7.KbqButtonModule], [typeof i1.KbqToastComponent, typeof i2.KbqToastContainerComponent, typeof i1.KbqToastCloseButton]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqToastModule>;
 }

package/toast/toast.service.d.ts

@@ -1,3 +1,4 @@
+import { AnimationEvent } from '@angular/animations';
 import { Overlay } from '@angular/cdk/overlay';
 import { Injector, ComponentRef, TemplateRef, EmbeddedViewRef, InjectionToken } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
@@ -15,6 +16,7 @@ export declare class KbqToastService<T extends KbqToastComponent = KbqToastCompo
     get templates(): EmbeddedViewRef<T>[];
     readonly hovered: BehaviorSubject<boolean>;
     readonly focused: BehaviorSubject<boolean>;
+    readonly animation: BehaviorSubject<AnimationEvent | null>;
     private containerInstance;
     private overlayRef;
     private portal;

package/toast/toast.type.d.ts

@@ -1,5 +1,8 @@
 import { TemplateRef, InjectionToken } from '@angular/core';
-export type KbqToastStyle = 'default' | 'confirm' | 'custom' | 'success' | 'error' | 'warning' | 'info';
+export declare enum KbqToastStyle {
+    Contrast = "contrast",
+    Error = "error"
+}
 export declare enum KbqToastPosition {
     TOP_RIGHT = "top-right",
     TOP_LEFT = "top-left",
@@ -10,13 +13,13 @@ export declare enum KbqToastPosition {
     CENTER = "center"
 }
 export declare class KbqToastData {
-    style: KbqToastStyle;
-    title: string | TemplateRef<any>;
-    icon?: TemplateRef<any>;
+    title?: string | TemplateRef<any>;
+    style?: KbqToastStyle | string;
+    icon?: TemplateRef<any> | boolean;
     caption?: string | TemplateRef<any>;
     content?: string | TemplateRef<any>;
     actions?: TemplateRef<any>;
-    hasDismiss?: boolean;
+    closeButton?: TemplateRef<any> | boolean;
 }
 export interface KbqToastConfig {
     position: KbqToastPosition;

package/toggle/_toggle-theme.scss

@@ -67,7 +67,7 @@
     $toggle-error: map.get($toggle, error);
 
     .kbq-toggle {
-        color: map.get($foreground, text);
+        color: map.get($foreground, contrast);
 
         @include kbq-toggle-color($toggle-theme);
 
@@ -86,6 +86,10 @@
         & .kbq-hint {
             @include kbq-typography-level-to-styles($config, map.get($tokens, toggle-font-normal-caption));
         }
+
+        & .kbq-toggle-bar-container {
+            height: kbq-line-height($config, map.get($tokens, toggle-font-normal-label));
+        }
     }
 
     .kbq-toggle.kbq-toggle_big {
@@ -94,5 +98,9 @@
         & .kbq-hint {
             @include kbq-typography-level-to-styles($config, map.get($tokens, toggle-font-big-caption));
         }
+
+        & .kbq-toggle-bar-container {
+            height: kbq-line-height($config, map.get($tokens, toggle-font-big-label));
+        }
     }
 }

package/toggle/toggle.component.d.ts

@@ -52,6 +52,6 @@ export declare class KbqToggleComponent extends KbqToggleMixinBase implements Co
     private updateModelValue;
     private emitChangeEvent;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqToggleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqToggleComponent, "kbq-toggle", ["mcToggle"], { "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "big": { "alias": "big"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; }, { "change": "change"; }, never, ["*", "kbq-hint"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqToggleComponent, "kbq-toggle", ["kbqToggle"], { "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "big": { "alias": "big"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; }, { "change": "change"; }, never, ["*", "kbq-hint"], false, never>;
 }
 export {};

package/toggle/toggle.scss

@@ -32,6 +32,11 @@ $tokens: meta.module-variables(tokens) !default;
         }
     }
 
+    .kbq-toggle-bar-container {
+        display: flex;
+        align-items: center;
+    }
+
     .kbq-toggle-bar {
         position: relative;
         box-sizing: border-box;
@@ -80,8 +85,6 @@ $tokens: meta.module-variables(tokens) !default;
 
 .kbq-toggle.kbq-toggle_big {
     & .kbq-toggle-bar {
-        margin-top: 2px;
-
         height: var(--kbq-toggle-size-big-height, map.get($tokens, toggle-size-big-height));
         width: var(--kbq-toggle-size-big-width, map.get($tokens, toggle-size-big-width));
     }

package/tooltip/tooltip.animations.d.ts

@@ -3,6 +3,6 @@ import { AnimationTriggerMetadata } from '@angular/animations';
  * Animations used by KbqTooltip.
  * @docs-private
  */
-export declare const mcTooltipAnimations: {
+export declare const kbqTooltipAnimations: {
     readonly tooltipState: AnimationTriggerMetadata;
 };