@koobiq/components 17.1.0 → 17.3.0

package/link/_link-theme.scss

@@ -67,19 +67,25 @@
     }
 }
 
-@mixin kbq-link-state($component, $state-name) {
-    $state: map.get($component, $state-name);
+@mixin kbq-link-state($component, $state-name: null) {
+    $state: $component;
+    $base-path: link;
 
-    color: kbq-css-variable(link-#{$state-name}-text, map.get($state, text));
+    @if $state-name {
+        $state: map.get($component, $state-name);
+        $base-path: link-#{$state-name};
+    }
+
+    color: kbq-css-variable(#{$base-path}-text, map.get($state, text));
 
     &.kbq-text-only,
     &.kbq-text-with-icon .kbq-link__text,
     &.kbq-text-with-dot .kbq-link__text {
-        border-bottom-color: kbq-css-variable(link-#{$state-name}-border-bottom, map.get($state, border-bottom));
+        border-bottom-color: kbq-css-variable(#{$base-path}-border-bottom, map.get($state, border-bottom));
     }
 
     & .kbq-icon {
-        color: kbq-css-variable(link-#{$state-name}-text, map.get($state, text)) !important;
+        color: kbq-css-variable(#{$base-path}-text, map.get($state, text)) !important;
     }
 }
 
@@ -91,7 +97,7 @@
     .kbq-link {
         @include kbq-link-geometry($tokens);
 
-        @include kbq-link-state($link, default);
+        @include kbq-link-state($link);
 
         transition: color ease-out 300ms;
 

package/list/_list-theme.scss

@@ -10,19 +10,19 @@
     background: kbq-css-variable(list-#{$state-name}-container-background, map.get($state, container-background));
 
     .kbq-list-text {
-        color: kbq-css-variable(list-#{$state-name}-text, map.get($state, text));
+        color: kbq-css-variable(list-#{$state-name}-text-color, map.get($state, text));
     }
 
     .kbq-icon {
-        color: kbq-css-variable(list-#{$state-name}-icon, map.get($state, icon));
+        color: kbq-css-variable(list-#{$state-name}-icon-color, map.get($state, icon));
     }
 
     .kbq-option-action .kbq-icon {
-        color: kbq-css-variable(list-#{$state-name}-icon-button, map.get($state, icon-button));
+        color: kbq-css-variable(list-#{$state-name}-icon-button-color, map.get($state, icon-button));
     }
 
     .kbq-list-option-caption {
-        color: kbq-css-variable(list-#{$state-name}-caption, map.get($state, caption));
+        color: kbq-css-variable(list-#{$state-name}-caption-color, map.get($state, caption));
     }
 }
 
@@ -37,7 +37,10 @@
         }
 
         &.kbq-focused {
-            border-color: map.get($list-item, states-focused, focus-outline);
+            border-color: kbq-css-variable(
+                list-states-focused-focus-outline-color,
+                map.get($list-item, states-focused, focus-outline)
+            );
         }
 
         &.kbq-selected {

package/list/list.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/common/list';
+@use '../core/styles/common/tokens' as *;
 
 .kbq-list,
 .kbq-list-selection {

package/loader-overlay/_loader-overlay-theme.scss

@@ -7,37 +7,41 @@
 @mixin kbq-loader-overlay-theme($theme) {
     $loader-overlay: map.get(map.get($theme, components), loader-overlay);
 
+    // FIXME: move to unified mixin if necessary
     .kbq-loader-overlay_filled {
         &.kbq-loader-overlay {
             background: kbq-css-variable(
-                loader-overlay-filled-background,
+                loader-overlay-filled-overlay-background,
                 map.get($loader-overlay, filled, background)
             );
         }
 
         & .kbq-loader-overlay-text {
-            color: kbq-css-variable(loader-overlay-filled-text, map.get($loader-overlay, filled, text));
+            color: kbq-css-variable(loader-overlay-filled-text-color, map.get($loader-overlay, filled, text));
         }
 
         & .kbq-loader-overlay-caption {
-            color: kbq-css-variable(loader-overlay-filled-caption, map.get($loader-overlay, filled, caption));
+            color: kbq-css-variable(loader-overlay-filled-caption-color, map.get($loader-overlay, filled, caption));
         }
     }
 
     .kbq-loader-overlay_transparent {
         &.kbq-loader-overlay {
             background: kbq-css-variable(
-                loader-overlay-transparent-background,
+                loader-overlay-transparent-overlay-background,
                 map.get($loader-overlay, transparent, background)
             );
         }
 
         & .kbq-loader-overlay-text {
-            color: kbq-css-variable(loader-overlay-transparent-text, map.get($loader-overlay, transparent, text));
+            color: kbq-css-variable(loader-overlay-transparent-text-color, map.get($loader-overlay, transparent, text));
         }
 
         & .kbq-loader-overlay-caption {
-            color: kbq-css-variable(loader-overlay-transparent-caption, map.get($loader-overlay, transparent, caption));
+            color: kbq-css-variable(
+                loader-overlay-transparent-caption-color,
+                map.get($loader-overlay, transparent, caption)
+            );
         }
     }
 }

package/markdown/_markdown-theme.scss

@@ -64,7 +64,7 @@
             }
 
             &:active {
-                color: kbq-css-variable(markdown-link-state-active-text, map.get($markdown, link-state-active-text));
+                color: kbq-css-variable(markdown-link-state-active, map.get($markdown, link-state-active-text));
             }
 
             &:focus {

package/modal/_modal-theme.scss

@@ -13,29 +13,30 @@
 
         .kbq-modal-header {
             & .kbq-modal-title {
-                color: kbq-css-variable(modal-header, map.get($modal, header));
+                color: kbq-css-variable(modal-header-text-color, map.get($modal, header));
             }
 
             & .kbq-modal-close {
-                color: kbq-css-variable(modal-close-button, map.get($modal, close-button));
+                color: kbq-css-variable(modal-close-button-color, map.get($modal, close-button));
             }
         }
 
         .kbq-modal-content {
-            color: kbq-css-variable(modal-content, map.get($modal, content));
+            color: kbq-css-variable(modal-content-text-color, map.get($modal, content));
         }
 
+        // FIXME: default token doesn't exist
         .kbq-modal-header.kbq-modal-body_top-overflow {
             box-shadow: kbq-css-variable(modal-body-top-shadow, map.get($modal, body-top-shadow));
         }
-
+        // FIXME: default token doesn't exist
         .kbq-modal-footer.kbq-modal-body_bottom-overflow {
             box-shadow: kbq-css-variable(modal-body-bottom-shadow, map.get($modal, body-bottom-shadow));
         }
     }
 
     .kbq-modal-mask {
-        background-color: kbq-css-variable(modal-overlay, map.get($modal, overlay));
+        background-color: kbq-css-variable(modal-overlay-background, map.get($modal, overlay));
     }
 }
 

package/navbar/_navbar-theme.scss

@@ -10,20 +10,20 @@
     &:not(.kbq-navbar-item_has-nested) {
         &:after {
             display: block;
-            background: kbq-css-variable(navbar-item-#{$state-name}-background, map.get($state, background));
+            background: kbq-css-variable(navbar-item-#{$state-name}-content-background, map.get($state, background));
         }
     }
 
     .kbq-navbar-title {
-        color: kbq-css-variable(navbar-item-#{$state-name}-text, map.get($state, text));
+        color: kbq-css-variable(navbar-item-#{$state-name}-content-text, map.get($state, text));
     }
 
     & > .kbq-icon {
-        color: kbq-css-variable(navbar-item-#{$state-name}-icon-left, map.get($state, icon-left)) !important;
+        color: kbq-css-variable(navbar-item-#{$state-name}-content-icon-left, map.get($state, icon-left)) !important;
     }
 
     .kbq-navbar-item__arrow-icon {
-        color: kbq-css-variable(navbar-item-#{$state-name}-icon-right, map.get($state, icon-right)) !important;
+        color: kbq-css-variable(navbar-item-#{$state-name}-content-icon-right, map.get($state, icon-right)) !important;
     }
 }
 
@@ -48,7 +48,7 @@
         @include kbq-navbar-item($item, default);
 
         &:hover:not(.kbq-disabled, .kbq-vertical.kbq-navbar-brand) {
-            @include kbq-navbar-item($item, hover);
+            @include kbq-navbar-item($item, states-hover);
         }
 
         &.cdk-focused.cdk-keyboard-focused {
@@ -63,7 +63,7 @@
 
         &:active:not(.kbq-disabled, .kbq-vertical.kbq-navbar-brand),
         &.kbq-active:not(.kbq-disabled, .kbq-vertical.kbq-navbar-brand) {
-            @include kbq-navbar-item($item, selected);
+            @include kbq-navbar-item($item, states-selected);
         }
 
         &.kbq-navbar-focusable-item {
@@ -71,7 +71,7 @@
         }
 
         &.kbq-disabled {
-            @include kbq-navbar-item($item, disabled);
+            @include kbq-navbar-item($item, states-disabled);
 
             pointer-events: none;
             cursor: default;
@@ -106,7 +106,7 @@ button {
 
 @mixin kbq-navbar-typography($config) {
     .kbq-navbar-title {
-        @include kbq-typography-level-to-styles($config, text-normal-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, text-normal-strong);
     }
 
     .kbq-navbar-brand {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "17.1.0",
+    "version": "17.3.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -19,13 +19,13 @@
     "peerDependencies": {
         "@angular/cdk": "^17.0.0",
         "@angular/forms": "^17.0.0",
-        "@koobiq/cdk": "17.1.0",
-        "@koobiq/angular-moment-adapter": "17.1.0",
-        "@koobiq/angular-luxon-adapter": "17.1.0",
+        "@koobiq/cdk": "17.3.0",
+        "@koobiq/angular-moment-adapter": "17.3.0",
+        "@koobiq/angular-luxon-adapter": "17.3.0",
         "@koobiq/date-formatter": "^3.1.2",
         "@koobiq/icons": "^7.1.0",
-        "@koobiq/tokens-builder": "3.0.0",
-        "@koobiq/design-tokens": "3.0.0",
+        "@koobiq/tokens-builder": "3.3.1",
+        "@koobiq/design-tokens": "3.3.1",
         "marked": "^9.0.0",
         "overlayscrollbars": "^2.2.0",
         "ngx-highlightjs": "^10.0.0"
@@ -88,12 +88,6 @@
             "esm": "./esm2022/button-toggle/koobiq-components-button-toggle.mjs",
             "default": "./fesm2022/koobiq-components-button-toggle.mjs"
         },
-        "./card": {
-            "types": "./card/index.d.ts",
-            "esm2022": "./esm2022/card/koobiq-components-card.mjs",
-            "esm": "./esm2022/card/koobiq-components-card.mjs",
-            "default": "./fesm2022/koobiq-components-card.mjs"
-        },
         "./checkbox": {
             "types": "./checkbox/index.d.ts",
             "esm2022": "./esm2022/checkbox/koobiq-components-checkbox.mjs",

package/popover/_popover-theme.scss

@@ -8,7 +8,7 @@
     $popover: map.get(map.get($theme, components), popover);
 
     .kbq-popover {
-        box-shadow: kbq-css-variable(popover-ontainer-box-shadow, map.get($popover, container, box-shadow));
+        box-shadow: kbq-css-variable(popover-container-box-shadow, map.get($popover, container, box-shadow));
     }
 
     .kbq-popover__container {
@@ -16,16 +16,16 @@
     }
 
     .kbq-popover__arrow {
-        box-shadow: kbq-css-variable(popover-ontainer-box-shadow, map.get($popover, container, box-shadow));
+        box-shadow: kbq-css-variable(popover-container-box-shadow, map.get($popover, container, box-shadow));
         background: kbq-css-variable(popover-container-background, map.get($popover, container, background));
     }
 
     .kbq-popover__header {
-        color: kbq-css-variable(popover-header-text, map.get($popover, header, text));
+        color: kbq-css-variable(popover-header-text-color, map.get($popover, header, text));
     }
 
     .kbq-popover__content {
-        color: kbq-css-variable(popover-content-text, map.get($popover, content, text));
+        color: kbq-css-variable(popover-content-text-color, map.get($popover, content, text));
     }
 }
 

package/popover/popover.component.d.ts

@@ -1,6 +1,6 @@
 import { Directionality } from '@angular/cdk/bidi';
-import { Overlay, OverlayConfig, ScrollDispatcher, ScrollStrategy } from '@angular/cdk/overlay';
-import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, TemplateRef, Type, ViewContainerRef } from '@angular/core';
+import { CdkScrollable, Overlay, OverlayConfig, ScrollDispatcher, ScrollStrategy } from '@angular/cdk/overlay';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, TemplateRef, Type, ViewContainerRef } from '@angular/core';
 import { KbqPopUp, KbqPopUpTrigger, PopUpPlacements, PopUpSizes } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 export declare class KbqPopoverComponent extends KbqPopUp {
@@ -25,7 +25,7 @@ export declare const KBQ_POPOVER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
 };
 /** Creates an error to be thrown if the user supplied an invalid popover position. */
 export declare function getKbqPopoverInvalidPositionError(position: string): Error;
-export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverComponent> {
+export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverComponent> implements AfterContentInit {
     get popoverVisible(): boolean;
     set popoverVisible(value: boolean);
     get popoverPlacement(): PopUpPlacements;
@@ -58,7 +58,7 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
      * The default value is `false`.
      * Use CloseScrollStrategy as alternative
      */
-    get closeOnScroll(): boolean;
+    get closeOnScroll(): boolean | null;
     set closeOnScroll(value: boolean);
     private _closeOnScroll;
     get hasClickTrigger(): boolean;
@@ -68,13 +68,14 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     protected originSelector: string;
     protected get overlayConfig(): OverlayConfig;
     constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality);
+    ngAfterContentInit(): void;
     updateData(): void;
     /** Updates the position of the current popover. */
     updatePosition(reapplyPosition?: boolean): void;
     getOverlayHandleComponentType(): Type<KbqPopoverComponent>;
     updateClassMap(newPlacement?: string): void;
     closingActionsForClick(): import("rxjs").Observable<MouseEvent>[];
-    closingActions(): import("rxjs").Observable<void | MouseEvent | import("@angular/cdk/scrolling").CdkScrollable>;
+    closingActions(): import("rxjs").Observable<void | MouseEvent | CdkScrollable>;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverTrigger, [null, null, null, null, null, null, { optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[kbqPopover]", ["kbqPopover"], { "popoverVisible": { "alias": "kbqPopoverVisible"; "required": false; }; "popoverPlacement": { "alias": "kbqPopoverPlacement"; "required": false; }; "popoverPlacementPriority": { "alias": "kbqPopoverPlacementPriority"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "header": { "alias": "kbqPopoverHeader"; "required": false; }; "content": { "alias": "kbqPopoverContent"; "required": false; }; "footer": { "alias": "kbqPopoverFooter"; "required": false; }; "disabled": { "alias": "kbqPopoverDisabled"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "size": { "alias": "kbqPopoverSize"; "required": false; }; "customClass": { "alias": "kbqPopoverClass"; "required": false; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, false, never>;
 }