@koobiq/components 18.1.0 → 18.2.1

package/navbar/navbar-brand.scss

@@ -15,7 +15,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     display: flex;
 
-    border-radius: kbq-css-variable(size-s);
+    border-radius: var(--kbq-size-s);
 
     &:after {
         position: absolute;
@@ -23,7 +23,7 @@ $tokens: meta.module-variables(tokens) !default;
 
         display: none;
 
-        border-radius: kbq-css-variable(navbar-item-size-content-border-radius);
+        border-radius: var(--kbq-navbar-item-size-content-border-radius);
     }
 
     & .kbq-navbar-title {
@@ -36,21 +36,21 @@ a.kbq-navbar-brand {
 }
 
 .kbq-navbar-brand.kbq-horizontal {
-    padding: kbq-css-variable(size-s) kbq-css-variable(size-xs) kbq-css-variable(size-s) kbq-css-variable(size-xxs);
+    padding: var(--kbq-size-s) var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xxs);
 
     align-items: center;
 
-    gap: kbq-css-variable(size-s);
+    gap: var(--kbq-size-s);
 
     &:after {
-        top: kbq-css-variable(size-xxs);
-        right: kbq-css-variable(size-xxs);
-        bottom: kbq-css-variable(size-xxs);
+        top: var(--kbq-size-xxs);
+        right: var(--kbq-size-xxs);
+        bottom: var(--kbq-size-xxs);
         left: 0;
     }
 
     & .kbq-navbar-title {
-        padding-right: kbq-css-variable(size-m);
+        padding-right: var(--kbq-size-m);
     }
 }
 
@@ -63,10 +63,10 @@ a.kbq-navbar-brand {
         display: block;
         align-items: center;
 
-        padding-top: kbq-css-variable(size-xxs);
-        padding-bottom: kbq-css-variable(size-xxs);
+        padding-top: var(--kbq-size-xxs);
+        padding-bottom: var(--kbq-size-xxs);
 
-        height: kbq-css-variable(size-3xl);
+        height: var(--kbq-size-3xl);
 
         padding-left: 0;
 
@@ -78,10 +78,10 @@ a.kbq-navbar-brand {
     &.kbq-expanded {
         position: relative;
 
-        height: kbq-css-variable(size-4xl);
-        width: kbq-css-variable(size-4xl);
+        height: var(--kbq-size-4xl);
+        width: var(--kbq-size-4xl);
 
-        margin: kbq-css-variable(size-l) kbq-css-variable(size-l) kbq-css-variable(size-4xl);
+        margin: var(--kbq-size-l) var(--kbq-size-l) var(--kbq-size-4xl);
 
         flex-direction: column;
 
@@ -93,7 +93,7 @@ a.kbq-navbar-brand {
         }
 
         & .kbq-navbar-logo {
-            min-height: kbq-css-variable(size-4xl);
+            min-height: var(--kbq-size-4xl);
 
             justify-content: center;
         }
@@ -101,21 +101,21 @@ a.kbq-navbar-brand {
         & .kbq-navbar-title {
             position: absolute;
 
-            left: kbq-css-variable(size-xxs);
-            top: kbq-css-variable(size-4xl);
+            left: var(--kbq-size-xxs);
+            top: var(--kbq-size-4xl);
             max-width: 200px;
         }
     }
 
     &.kbq-collapsed {
-        height: kbq-css-variable(size-5xl);
-        width: kbq-css-variable(size-5xl);
+        height: var(--kbq-size-5xl);
+        width: var(--kbq-size-5xl);
 
         &:after {
-            top: kbq-css-variable(size-xxs);
-            right: kbq-css-variable(size-xxs);
-            bottom: kbq-css-variable(size-xxs);
-            left: kbq-css-variable(size-xxs);
+            top: var(--kbq-size-xxs);
+            right: var(--kbq-size-xxs);
+            bottom: var(--kbq-size-xxs);
+            left: var(--kbq-size-xxs);
         }
 
         & .kbq-navbar-title {

package/navbar/navbar-divider.scss

@@ -7,7 +7,7 @@
 .kbq-navbar-divider.kbq-vertical {
     height: 1px;
 
-    margin: kbq-css-variable(size-s) kbq-css-variable(size-l);
+    margin: var(--kbq-size-s) var(--kbq-size-l);
 }
 
 .kbq-navbar-divider.kbq-horizontal {
@@ -15,6 +15,6 @@
 
     height: 12px;
 
-    margin-left: kbq-css-variable(size-m);
-    margin-right: kbq-css-variable(size-m);
+    margin-left: var(--kbq-size-m);
+    margin-right: var(--kbq-size-m);
 }

package/navbar/navbar-item.component.d.ts

@@ -35,16 +35,15 @@ export declare class KbqNavbarTitle implements AfterViewInit {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarTitle, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarTitle, "kbq-navbar-title, [kbq-navbar-title]", never, {}, {}, never, never, false, never>;
 }
-export declare class KbqNavbarBrand implements AfterContentInit, OnDestroy {
+export declare class KbqNavbarBrand implements AfterContentInit {
     private navbar;
     logo: KbqNavbarLogo;
     title: KbqNavbarTitle;
     hovered: boolean;
     get hasBento(): boolean;
-    private destroyed;
+    private readonly destroyRef;
     constructor(navbar: KbqVerticalNavbar);
     ngAfterContentInit(): void;
-    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarBrand, [{ optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarBrand, "kbq-navbar-brand, [kbq-navbar-brand]", ["kbqNavbarBrand"], {}, {}, ["logo", "title"], ["*"], false, never>;
 }

package/navbar/navbar-item.scss

@@ -13,17 +13,17 @@
     display: flex;
     align-items: center;
 
-    border-radius: kbq-css-variable(navbar-item-size-content-border-radius);
+    border-radius: var(--kbq-navbar-item-size-content-border-radius);
 
     & .kbq-icon {
-        min-width: kbq-css-variable(size-l);
-        min-height: kbq-css-variable(size-l);
+        min-width: var(--kbq-size-l);
+        min-height: var(--kbq-size-l);
     }
 
     & .kbq-button-icon {
         position: absolute;
-        padding-left: kbq-css-variable(size-xs);
-        padding-right: kbq-css-variable(size-xs);
+        padding-left: var(--kbq-size-xs);
+        padding-right: var(--kbq-size-xs);
         top: 50%;
         transform: translateY(-50%);
     }
@@ -39,7 +39,7 @@
 
         display: none;
 
-        border-radius: kbq-css-variable(navbar-item-size-content-border-radius);
+        border-radius: var(--kbq-navbar-item-size-content-border-radius);
     }
 
     &.kbq-horizontal {

package/navbar/navbar.component.d.ts

@@ -6,8 +6,9 @@ import { KbqNavbarFocusableItem, KbqNavbarFocusableItemEvent, KbqNavbarItem, Kbq
 import * as i0 from "@angular/core";
 export type KbqNavbarContainerPositionType = 'left' | 'right';
 export declare class KbqFocusableComponent implements AfterContentInit, OnDestroy {
-    protected changeDetectorRef: ChangeDetectorRef;
-    private focusMonitor;
+    protected readonly changeDetectorRef: ChangeDetectorRef;
+    protected readonly elementRef: ElementRef;
+    protected readonly focusMonitor: FocusMonitor;
     focusableItems: QueryList<KbqNavbarFocusableItem>;
     keyManager: FocusKeyManager<KbqNavbarFocusableItem>;
     get tabIndex(): any;
@@ -15,10 +16,9 @@ export declare class KbqFocusableComponent implements AfterContentInit, OnDestro
     private _tabIndex;
     get optionFocusChanges(): Observable<KbqNavbarFocusableItemEvent>;
     get optionBlurChanges(): Observable<KbqNavbarFocusableItemEvent>;
-    protected readonly destroyed: Subject<void>;
+    private readonly destroyRef;
     private optionFocusSubscription;
     private optionBlurSubscription;
-    private focusMonitorSubscription;
     constructor(changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef, focusMonitor: FocusMonitor);
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
@@ -38,7 +38,9 @@ export declare class KbqNavbarContainer {
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarContainer, "kbq-navbar-container", never, {}, {}, never, never, false, never>;
 }
 export declare class KbqNavbar extends KbqFocusableComponent implements AfterViewInit, AfterContentInit, OnDestroy {
-    private elementRef;
+    protected readonly elementRef: ElementRef;
+    protected readonly changeDetectorRef: ChangeDetectorRef;
+    protected readonly focusMonitor: FocusMonitor;
     rectangleElements: QueryList<KbqNavbarRectangleElement>;
     navbarItems: QueryList<KbqNavbarItem>;
     readonly resizeStream: Subject<Event>;

package/navbar/navbar.scss

@@ -23,7 +23,7 @@
 }
 
 .kbq-navbar .kbq-navbar-container + .kbq-navbar-container {
-    margin-left: kbq-css-variable(size-xxl);
+    margin-left: var(--kbq-size-xxl);
 }
 
 @include kbq-navbar-theme();

package/navbar/vertical-navbar.scss

@@ -12,7 +12,7 @@
     }
 
     & .kbq-navbar-container + .kbq-navbar-container {
-        padding-top: kbq-css-variable(size-xxl);
+        padding-top: var(--kbq-size-xxl);
     }
 
     & .kbq-vertical-navbar__container {
@@ -22,7 +22,7 @@
         height: 100%;
 
         &.kbq-collapsed {
-            width: kbq-css-variable(size-5xl);
+            width: var(--kbq-size-5xl);
         }
 
         &.kbq-expanded {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.1.0",
+    "version": "18.2.1",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -23,13 +23,14 @@
     "peerDependencies": {
         "@angular/cdk": "^18.0.0",
         "@angular/forms": "^18.0.0",
-        "@koobiq/cdk": "18.1.0",
-        "@koobiq/angular-moment-adapter": "18.1.0",
-        "@koobiq/angular-luxon-adapter": "18.1.0",
-        "@koobiq/date-formatter": "^3.1.2",
+        "@koobiq/cdk": "18.2.1",
+        "@koobiq/angular-moment-adapter": "18.2.1",
+        "@koobiq/angular-luxon-adapter": "18.2.1",
+        "@koobiq/date-formatter": "^3.1.3",
         "@koobiq/icons": "^9.0.0",
-        "@koobiq/tokens-builder": "3.6.0",
-        "@koobiq/design-tokens": "3.6.0",
+        "@koobiq/tokens-builder": "3.7.3",
+        "@koobiq/design-tokens": "3.7.3",
+        "@radix-ng/primitives": "^0.14.0",
         "marked": "^9.0.0",
         "overlayscrollbars": "2.7.3",
         "ngx-highlightjs": "^10.0.0"
@@ -65,6 +66,12 @@
         "./package.json": {
             "default": "./package.json"
         },
+        "./accordion": {
+            "types": "./accordion/index.d.ts",
+            "esm2022": "./esm2022/accordion/koobiq-components-accordion.mjs",
+            "esm": "./esm2022/accordion/koobiq-components-accordion.mjs",
+            "default": "./fesm2022/koobiq-components-accordion.mjs"
+        },
         "./alert": {
             "types": "./alert/index.d.ts",
             "esm2022": "./esm2022/alert/koobiq-components-alert.mjs",

package/popover/_popover-theme.scss

@@ -2,28 +2,28 @@
 
 @mixin kbq-popover-theme() {
     .kbq-popover {
-        box-shadow: kbq-css-variable(popover-container-box-shadow);
+        box-shadow: var(--kbq-popover-container-box-shadow);
     }
 
     .kbq-popover__container {
-        background: kbq-css-variable(popover-container-background);
+        background: var(--kbq-popover-container-background);
     }
 
     .kbq-popover__arrow {
-        box-shadow: kbq-css-variable(popover-container-box-shadow);
-        background: kbq-css-variable(popover-container-background);
+        box-shadow: var(--kbq-popover-container-box-shadow);
+        background: var(--kbq-popover-container-background);
     }
 
     .kbq-popover__close {
-        background-color: kbq-css-variable(background-overlay-inverse);
+        background-color: var(--kbq-background-overlay-inverse);
     }
 
     .kbq-popover__header {
-        color: kbq-css-variable(popover-header-text-color);
+        color: var(--kbq-popover-header-text-color);
     }
 
     .kbq-popover__content {
-        color: kbq-css-variable(popover-content-text-color);
+        color: var(--kbq-popover-content-text-color);
     }
 }
 

package/popover/popover.scss

@@ -11,7 +11,7 @@ $trigger-margin: 9px;
 .kbq-popover {
     position: relative;
 
-    border-radius: kbq-css-variable(popover-size-container-border-radius);
+    border-radius: var(--kbq-popover-size-container-border-radius);
 
     box-sizing: border-box;
 
@@ -21,15 +21,15 @@ $trigger-margin: 9px;
     z-index: 1;
 
     &.kbq-popover_small {
-        max-width: kbq-css-variable(popover-size-container-width-small);
+        max-width: var(--kbq-popover-size-container-width-small);
     }
 
     &.kbq-popover_medium {
-        max-width: kbq-css-variable(popover-size-container-width-medium);
+        max-width: var(--kbq-popover-size-container-width-medium);
     }
 
     &.kbq-popover_large {
-        max-width: kbq-css-variable(popover-size-container-width-large);
+        max-width: var(--kbq-popover-size-container-width-large);
     }
 
     @include pop-up.popup-margins(kbq-popover, 8px);
@@ -38,8 +38,8 @@ $trigger-margin: 9px;
 .kbq-popover__content {
     overflow-y: auto;
 
-    padding: kbq-css-variable(popover-size-content-padding-top)
-        kbq-css-variable(popover-size-content-padding-horizontal) kbq-css-variable(popover-size-content-padding-bottom);
+    padding: var(--kbq-popover-size-content-padding-top) var(--kbq-popover-size-content-padding-horizontal)
+        var(--kbq-popover-size-content-padding-bottom);
 }
 
 .kbq-popover__container {
@@ -48,19 +48,19 @@ $trigger-margin: 9px;
     display: flex;
     flex-direction: column;
 
-    max-height: kbq-css-variable(popover-size-container-max-height);
+    max-height: var(--kbq-popover-size-container-max-height);
 
-    border-radius: kbq-css-variable(popover-size-container-border-radius);
+    border-radius: var(--kbq-popover-size-container-border-radius);
 
     &.kbq-popover__container_with-header {
         .kbq-popover__content {
-            padding-top: kbq-css-variable(size-s);
+            padding-top: var(--kbq-size-s);
         }
     }
 
     &.kbq-popover__container_with-footer {
         .kbq-popover__content {
-            padding-bottom: kbq-css-variable(size-s);
+            padding-bottom: var(--kbq-size-s);
         }
     }
 }
@@ -83,8 +83,8 @@ $trigger-margin: 9px;
 
     overflow: hidden;
 
-    padding: kbq-css-variable(popover-size-header-padding-top) kbq-css-variable(popover-size-header-padding-horizontal)
-        kbq-css-variable(popover-size-header-padding-bottom) kbq-css-variable(popover-size-header-padding-horizontal);
+    padding: var(--kbq-popover-size-header-padding-top) var(--kbq-popover-size-header-padding-horizontal)
+        var(--kbq-popover-size-header-padding-bottom) var(--kbq-popover-size-header-padding-horizontal);
 
     & .kbq-popover__header-text {
         @include common.kbq-truncate-line();
@@ -96,12 +96,11 @@ $trigger-margin: 9px;
 }
 
 .kbq-popover__header_with-close-button {
-    padding-right: kbq-css-variable(size-4xl);
+    padding-right: var(--kbq-size-4xl);
 }
 
 .kbq-popover__footer {
-    padding: kbq-css-variable(popover-size-footer-padding-vertical)
-        kbq-css-variable(popover-size-footer-padding-horizontal);
+    padding: var(--kbq-popover-size-footer-padding-vertical) var(--kbq-popover-size-footer-padding-horizontal);
 }
 
 .kbq-popover__footer_bottom-overflow {
@@ -127,9 +126,9 @@ $arrow-padding: calc(18px - $trigger-margin);
 .kbq-popover__close {
     position: absolute;
     z-index: 2;
-    top: kbq-css-variable(size-s);
-    right: kbq-css-variable(size-s);
-    border-radius: kbq-css-variable(button-size-border-radius);
+    top: var(--kbq-size-s);
+    right: var(--kbq-size-s);
+    border-radius: var(--kbq-button-size-border-radius);
 }
 
 @include kbq-popover-theme();