@koobiq/components 17.0.0-rc.9 → 17.0.0

package/progress-bar/_progress-bar-theme.scss

@@ -4,7 +4,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-progress-bar-theme($theme) {
     $progress-bar: map.get(map.get($theme, components), progress-bar);
 

package/progress-bar/progress-bar.scss

@@ -5,7 +5,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
 @keyframes kbq-progress-bar-indeterminate {

package/progress-bar/public-api.d.ts

@@ -1,2 +1,2 @@
-export * from './progress-bar.module';
 export * from './progress-bar.component';
+export * from './progress-bar.module';

package/progress-spinner/_progress-spinner-theme.scss

@@ -4,7 +4,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-progress-spinner-theme($theme) {
     $progress-spinner: map.get(map.get($theme, components), progress-spinner);
 

package/progress-spinner/progress-spinner.scss

@@ -5,7 +5,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
 @keyframes kbq-progress-spinner-indeterminate {

package/progress-spinner/public-api.d.ts

@@ -1,2 +1,2 @@
-export * from './progress-spinner.module';
 export * from './progress-spinner.component';
+export * from './progress-spinner.module';

package/radio/_radio-theme.scss

@@ -4,22 +4,29 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-radio-state($component, $type, $state-name) {
     $state: map.get($component, $type, $state-name);
 
     & .kbq-radio-button__outer-circle {
         border-color: kbq-css-variable(
-            radio-#{$type}-#{$state-name}-outer-circle-border, map.get($state, outer-circle-border));
+            radio-#{$type}-#{$state-name}-outer-circle-border,
+            map.get($state, outer-circle-border)
+        );
         background: kbq-css-variable(
-            radio-#{$type}-#{$state-name}-outer-circle-background, map.get($state, outer-circle-background));
+            radio-#{$type}-#{$state-name}-outer-circle-background,
+            map.get($state, outer-circle-background)
+        );
         box-shadow: kbq-css-variable(
-            radio-#{$type}-#{$state-name}-outer-circle-shadow, map.get($state, outer-circle-shadow));
+            radio-#{$type}-#{$state-name}-outer-circle-shadow,
+            map.get($state, outer-circle-shadow)
+        );
     }
 
     & .kbq-radio-button__inner-circle {
         background: kbq-css-variable(
-            radio-#{$type}-#{$state-name}-inner-circle-background, map.get($state, inner-circle-background));
+            radio-#{$type}-#{$state-name}-inner-circle-background,
+            map.get($state, inner-circle-background)
+        );
     }
 }
 
@@ -51,6 +58,7 @@
 
         & .kbq-radio-label {
             cursor: default;
+            color: map.get($component, $type-name, states-disabled, caption);
         }
 
         & .kbq-hint .kbq-hint__text {

package/radio/public-api.d.ts

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

package/radio/radio.scss

@@ -4,7 +4,6 @@
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-radio-group {
@@ -47,7 +46,10 @@ $tokens: meta.module-variables(tokens) !default;
 
     padding-left: calc(
         var(--kbq-radio-size-normal-outer-size, map.get($tokens, radio-size-normal-outer-size)) +
-        var(--kbq-radio-size-normal-horizontal-content-padding, map.get($tokens, radio-size-normal-horizontal-content-padding))
+            var(
+                --kbq-radio-size-normal-horizontal-content-padding,
+                map.get($tokens, radio-size-normal-horizontal-content-padding)
+            )
     );
     padding-right: 0;
 
@@ -71,7 +73,12 @@ $tokens: meta.module-variables(tokens) !default;
         }
 
         left: 0;
-        top: var(--kbq-radio-size-normal-top, map.get($tokens, radio-size-normal-top));
+        top: calc(
+            (
+                    var(--radio-font-normal-label-line-height, map.get($tokens, radio-font-normal-label-line-height)) -
+                        (var(--radio-size-normal-outer-size, map.get($tokens, radio-size-normal-outer-size)) + 2px)
+                ) / 2
+        );
 
         width: kbq-css-variable(radio-size-normal-outer-size);
         height: kbq-css-variable(radio-size-normal-outer-size);
@@ -110,12 +117,19 @@ $tokens: meta.module-variables(tokens) !default;
     .kbq-radio-label-content {
         padding-left: calc(
             var(--kbq-radio-size-big-outer-size, map.get($tokens, radio-size-big-outer-size)) +
-            var(--kbq-radio-size-big-horizontal-content-padding, map.get($tokens, radio-size-big-horizontal-content-padding))
+                var(
+                    --kbq-radio-size-big-horizontal-content-padding,
+                    map.get($tokens, radio-size-big-horizontal-content-padding)
+                )
         );
 
         .kbq-radio-button__outer-circle {
-            
-            top: var(--kbq-radio-size-big-top, map.get($tokens, radio-size-big-top));
+            top: calc(
+                (
+                        var(--radio-font-big-label-line-height, map.get($tokens, radio-font-big-label-line-height)) -
+                            (var(--radio-size-big-outer-size, map.get($tokens, radio-size-big-outer-size)) + 2px)
+                    ) / 2
+            );
 
             width: kbq-css-variable(radio-size-big-outer-size);
             height: kbq-css-variable(radio-size-big-outer-size);

package/risk-level/_risk-level-theme.scss

@@ -4,7 +4,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-risk-level-filled-color($component, $type, $sub-type, $style-name) {
     $style: map.get($component, $type, $sub-type, $style-name);
     $base: risk-level-#{$type}-#{$sub-type}-#{$style-name};

package/risk-level/public-api.d.ts

@@ -1,2 +1,2 @@
-export * from './risk-level.module';
 export * from './risk-level.component';
+export * from './risk-level.module';

package/risk-level/risk-level.component.scss

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-risk-level {
     box-sizing: border-box;
 
@@ -12,9 +11,7 @@
 
     border-style: solid;
 
-    padding:
-        kbq-css-variable(risk-level-size-padding-vertical)
-        kbq-css-variable(risk-level-size-padding-horizontal);
+    padding: kbq-css-variable(risk-level-size-padding-vertical) kbq-css-variable(risk-level-size-padding-horizontal);
 
     border: {
         width: kbq-css-variable(risk-level-size-border-width);

package/schematics/ng-add/index.js

@@ -52,13 +52,13 @@ function ngAdd(options) {
         }
         // Installing dependencies
         addPackageToPackageJson(tree, '@angular/cdk', "^17.2.0");
-        addPackageToPackageJson(tree, '@koobiq/cdk', "^17.0.0-rc.9");
-        addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^17.0.0-rc.9");
+        addPackageToPackageJson(tree, '@koobiq/cdk', "^17.0.0");
+        addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^17.0.0");
         addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.1.2");
         addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.1.2");
         addPackageToPackageJson(tree, '@koobiq/icons', "^7.1.1");
-        addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.0.0-rc.11");
-        addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.0.0-rc.11");
+        addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.0.0-rc.15");
+        addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.0.0-rc.15");
         addPackageToPackageJson(tree, '@messageformat/core', "^3.0.1");
         addPackageToPackageJson(tree, 'luxon', "^3.4.4");
         addPackageToPackageJson(tree, 'marked', "^9.0.0");

package/scrollbar/_scrollbar-component-theme.scss

@@ -1,7 +1,6 @@
 @use 'sass:map';
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-scrollbar-component-theme($theme) {
     $scrollbar: map.get(map.get($theme, components), scrollbar);
 
@@ -28,8 +27,8 @@
                 }
             }
 
-            /* stylelint-disable no-descending-specificity */
-            .os-scrollbar-track, .os-scrollbar-handle {
+            .os-scrollbar-track,
+            .os-scrollbar-handle {
                 border-style: solid;
                 border-color: kbq-css-variable(scrollbar-track-default, map.get($scrollbar, track, default)) !important;
                 background-color: kbq-css-variable(scrollbar-track-default, map.get($scrollbar, track, default));

package/scrollbar/public-api.d.ts

@@ -1,4 +1,4 @@
-export * from './scrollbar.module';
 export * from './scrollbar.component';
 export * from './scrollbar.directive';
+export * from './scrollbar.module';
 export * from './scrollbar.types';

package/scrollbar/scrollbar.component.scss

@@ -3,8 +3,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
-/* stylelint-disable no-descending-specificity */
 .kbq-scrollbar-component {
     $scrollbar-size-thumb-width: kbq-css-variable(scrollbar-size-thumb-width);
     $padding-vertical: kbq-css-variable(scrollbar-size-track-padding-vertical);
@@ -19,7 +17,11 @@
         width: $kbq-scrollbar-track-width;
 
         .os-scrollbar-handle {
-            transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s;
+            transition:
+                opacity 0.15s,
+                background-color 0.15s,
+                border-color 0.15s,
+                width 0.15s;
             border: $padding-horizontal solid;
             width: 100%;
             min-height: $thumb-min-height;
@@ -37,7 +39,11 @@
         height: $kbq-scrollbar-track-width;
 
         .os-scrollbar-handle {
-            transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, height 0.15s;
+            transition:
+                opacity 0.15s,
+                background-color 0.15s,
+                border-color 0.15s,
+                height 0.15s;
             border: $padding-horizontal solid;
             height: 100%;
             min-width: $thumb-min-height;
@@ -50,14 +56,19 @@
     }
 
     .os-scrollbar {
-        .os-scrollbar-handle, .os-scrollbar-handle::before, .os-scrollbar-track {
+        .os-scrollbar-handle,
+        .os-scrollbar-handle::before,
+        .os-scrollbar-track {
             box-sizing: border-box;
             border-radius: kbq-css-variable(scrollbar-size-thumb-border-radius);
         }
 
         .os-scrollbar-track {
             border-width: $border-width !important;
-            transition: opacity 0.15s, background-color 0.15s, border-color 0.15s;
+            transition:
+                opacity 0.15s,
+                background-color 0.15s,
+                border-color 0.15s;
         }
     }
 }
@@ -68,7 +79,6 @@
     }
 }
 
-
 // core
 .os-size-observer,
 .os-size-observer-listener {
@@ -108,7 +118,7 @@
 }
 
 .os-size-observer::before {
-    content: "";
+    content: '';
     flex: none;
     box-sizing: inherit;
     padding: 10px;
@@ -141,12 +151,13 @@
 }
 
 .os-size-observer-listener:empty::before {
-    content: "";
+    content: '';
     width: 100%;
     height: 100%;
 }
 
-.os-size-observer-listener:empty::before, .os-size-observer-listener > .os-size-observer-listener-item {
+.os-size-observer-listener:empty::before,
+.os-size-observer-listener > .os-size-observer-listener-item {
     display: block;
     position: relative;
     padding: inherit;
@@ -258,7 +269,7 @@
 }
 
 .os-environment.os-environment-flexbox-glue-max div::before {
-    content: "";
+    content: '';
     display: block;
     height: 999px;
     width: 999px;
@@ -273,18 +284,18 @@
 }
 
 [data-overlayscrollbars-initialize],
-[data-overlayscrollbars~=scrollbarHidden],
-[data-overlayscrollbars-viewport~=scrollbarHidden],
+[data-overlayscrollbars~='scrollbarHidden'],
+[data-overlayscrollbars-viewport~='scrollbarHidden'],
 .os-environment-scrollbar-hidden {
     scrollbar-width: none !important;
 }
 
 [data-overlayscrollbars-initialize]::-webkit-scrollbar,
 [data-overlayscrollbars-initialize]::-webkit-scrollbar-corner,
-[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar,
-[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar-corner,
-[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,
-[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,
+[data-overlayscrollbars~='scrollbarHidden']::-webkit-scrollbar,
+[data-overlayscrollbars~='scrollbarHidden']::-webkit-scrollbar-corner,
+[data-overlayscrollbars-viewport~='scrollbarHidden']::-webkit-scrollbar,
+[data-overlayscrollbars-viewport~='scrollbarHidden']::-webkit-scrollbar-corner,
 .os-environment-scrollbar-hidden::-webkit-scrollbar,
 .os-environment-scrollbar-hidden::-webkit-scrollbar-corner {
     -webkit-appearance: none !important;
@@ -309,20 +320,20 @@ html[data-overlayscrollbars] {
     margin: 0;
 }
 
-html[data-overlayscrollbars~=body],
-html[data-overlayscrollbars~=body] > body {
+html[data-overlayscrollbars~='body'],
+html[data-overlayscrollbars~='body'] > body {
     width: 100%;
     height: 100%;
 }
 
-html[data-overlayscrollbars~=viewport] > body {
+html[data-overlayscrollbars~='viewport'] > body {
     overflow: visible;
 }
 
 /**
  * structure setup
  */
-[data-overlayscrollbars~=host],
+[data-overlayscrollbars~='host'],
 [data-overlayscrollbars-padding] {
     display: flex;
     align-items: stretch !important;
@@ -330,8 +341,8 @@ html[data-overlayscrollbars~=viewport] > body {
     flex-wrap: nowrap !important;
 }
 
-[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]::before {
-    content: "";
+[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~='arrange']::before {
+    content: '';
     position: absolute;
     pointer-events: none;
     z-index: -1;
@@ -356,33 +367,33 @@ html[data-overlayscrollbars~=viewport] > body {
     overflow: hidden;
 }
 
-[data-overlayscrollbars~=host],
-[data-overlayscrollbars~=viewport] {
+[data-overlayscrollbars~='host'],
+[data-overlayscrollbars~='viewport'] {
     position: relative;
     overflow: hidden;
 }
 
-[data-overlayscrollbars~=overflowVisible],
-[data-overlayscrollbars-padding~=overflowVisible],
-[data-overlayscrollbars-viewport~=overflowVisible] {
+[data-overlayscrollbars~='overflowVisible'],
+[data-overlayscrollbars-padding~='overflowVisible'],
+[data-overlayscrollbars-viewport~='overflowVisible'] {
     overflow: visible;
 }
 
-[data-overlayscrollbars-overflow-x=hidden] {
+[data-overlayscrollbars-overflow-x='hidden'] {
     overflow-x: hidden;
     overflow-y: hidden;
 }
 
-[data-overlayscrollbars-overflow-x=scroll] {
+[data-overlayscrollbars-overflow-x='scroll'] {
     overflow-x: scroll;
 }
 
-[data-overlayscrollbars-overflow-y=scroll] {
+[data-overlayscrollbars-overflow-y='scroll'] {
     overflow-y: scroll;
 }
 
-[data-overlayscrollbars~=scrollbarPressed],
-[data-overlayscrollbars~=scrollbarPressed] [data-overlayscrollbars-viewport] {
+[data-overlayscrollbars~='scrollbarPressed'],
+[data-overlayscrollbars~='scrollbarPressed'] [data-overlayscrollbars-viewport] {
     scroll-behavior: auto !important;
 }
 
@@ -393,13 +404,9 @@ html[data-overlayscrollbars~=viewport] > body {
 /**
  * Display contents to bridge any flickering during deferred initialization.
  */
-[data-overlayscrollbars-contents]:not(
-[data-overlayscrollbars-padding]
-):not(
-[data-overlayscrollbars-viewport]
-):not(
-[data-overlayscrollbars-content]
-) {
+[data-overlayscrollbars-contents]:not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not(
+        [data-overlayscrollbars-content]
+    ) {
     display: contents;
 }
 
@@ -423,7 +430,13 @@ html[data-overlayscrollbars~=viewport] > body {
     box-sizing: border-box;
     contain: size layout;
     contain: size layout style;
-    transition: opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s;
+    transition:
+        opacity 0.15s,
+        visibility 0.15s,
+        top 0.15s,
+        right 0.15s,
+        bottom 0.15s,
+        left 0.15s;
     pointer-events: none;
     position: absolute;
     opacity: 0;
@@ -535,7 +548,7 @@ body > .os-scrollbar {
 }
 
 .os-scrollbar .os-scrollbar-handle:before {
-    content: "";
+    content: '';
     position: absolute;
     left: 0;
     right: 0;
@@ -545,8 +558,7 @@ body > .os-scrollbar {
 }
 
 /* NONE THEME: */
-[data-overlayscrollbars~=updating] > .os-scrollbar,
+[data-overlayscrollbars~='updating'] > .os-scrollbar,
 .os-theme-none.os-scrollbar {
     display: none !important;
 }
-

package/scrollbar/scrollbar.directive.d.ts

@@ -1,6 +1,6 @@
 import { NgZone, OnDestroy } from '@angular/core';
-import { KbqScrollbarEvents, KbqScrollbarOptions, KbqScrollbarTarget } from './scrollbar.types';
 import { OverlayScrollbars } from 'overlayscrollbars';
+import { KbqScrollbarEvents, KbqScrollbarOptions, KbqScrollbarTarget } from './scrollbar.types';
 import * as i0 from "@angular/core";
 export declare class KbqScrollbarDirective implements OnDestroy {
     private ngZone;

package/scrollbar/scrollbar.types.d.ts

@@ -1,5 +1,5 @@
-import { EventListeners, EventListenerArgs, InitializationTarget, PartialOptions } from 'overlayscrollbars';
 import { InjectionToken, Provider } from '@angular/core';
+import { EventListenerArgs, EventListeners, InitializationTarget, PartialOptions } from 'overlayscrollbars';
 export type KbqScrollbarEvents = EventListeners;
 export type KbqScrollbarEventListenerArgs = EventListenerArgs;
 export type KbqScrollbarOptions = PartialOptions;

package/select/_select-theme.scss

@@ -6,7 +6,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-select-theme($theme) {
     $foreground: map.get($theme, foreground);
 

package/select/public-api.d.ts

@@ -1,3 +1,3 @@
-export * from './select.module';
-export * from './select.component';
 export * from './select-option.directive';
+export * from './select.component';
+export * from './select.module';

package/select/select.component.d.ts

@@ -5,7 +5,7 @@ import { CdkVirtualForOf } from '@angular/cdk/scrolling';
 import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, QueryList, Renderer2, SimpleChanges, TemplateRef } from '@angular/core';
 import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { ActiveDescendantKeyManager } from '@koobiq/cdk/a11y';
-import { CanDisable, CanDisableCtor, CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher, HasTabIndex, HasTabIndexCtor, KbqOptgroup, KbqOption, KbqOptionSelectionChange, KbqLocaleService, KbqOptionBase, KbqSelectTrigger, KbqSelectMatcher, KbqSelectSearch } from '@koobiq/components/core';
+import { CanDisable, CanDisableCtor, CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher, HasTabIndex, HasTabIndexCtor, KbqLocaleService, KbqOptgroup, KbqOption, KbqOptionBase, KbqOptionSelectionChange, KbqSelectMatcher, KbqSelectSearch, KbqSelectTrigger } from '@koobiq/components/core';
 import { KbqCleaner, KbqFormField, KbqFormFieldControl } from '@koobiq/components/form-field';
 import { KbqTag } from '@koobiq/components/tags';
 import { Observable, Subject } from 'rxjs';
@@ -73,6 +73,9 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
      * will fall back to a position above the trigger.
      */
     positions: ConnectedPosition[];
+    /**
+     * Trigger - is a clickable field to open select dropdown panel
+     */
     trigger: ElementRef;
     panel: ElementRef;
     optionsContainer: ElementRef;

package/select/select.scss

@@ -5,7 +5,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-select {
     @extend %kbq-select-base;
 }

package/sidebar/public-api.d.ts

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

package/sidepanel/_sidepanel-theme.scss

@@ -4,7 +4,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-sidepanel-theme($theme) {
     $sidepanel: map.get($theme, components, sidepanel);
 

package/sidepanel/public-api.d.ts

@@ -1,6 +1,6 @@
-export * from './sidepanel-directives';
-export * from './sidepanel.module';
-export * from './sidepanel.service';
 export * from './sidepanel-config';
 export * from './sidepanel-container.component';
+export * from './sidepanel-directives';
 export * from './sidepanel-ref';
+export * from './sidepanel.module';
+export * from './sidepanel.service';

package/sidepanel/sidepanel.scss

@@ -5,7 +5,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-sidepanel-container_top,
@@ -37,6 +36,7 @@ $tokens: meta.module-variables(tokens) !default;
     &.kbq-sidepanel-container_right {
         height: 100%;
         top: 0;
+        max-width: 100%;
 
         &.kbq-sidepanel_small {
             width: kbq-css-variable(sidepanel-size-small-width);
@@ -50,7 +50,6 @@ $tokens: meta.module-variables(tokens) !default;
 
         &.kbq-sidepanel_large {
             width: kbq-css-variable(sidepanel-size-large-width);
-            max-width: kbq-css-variable(sidepanel-size-large-width);
         }
 
         .kbq-sidepanel-indent {
@@ -96,7 +95,6 @@ $tokens: meta.module-variables(tokens) !default;
     }
 }
 
-/* stylelint-disable */
 .kbq-sidepanel-wrapper {
     display: flex;
     flex: 1;
@@ -108,7 +106,6 @@ $tokens: meta.module-variables(tokens) !default;
     display: flex;
     flex: 0 0 auto;
 }
-/* stylelint-enable */
 
 .kbq-sidepanel-content {
     display: flex;
@@ -127,10 +124,8 @@ $tokens: meta.module-variables(tokens) !default;
     flex-flow: row nowrap;
     flex: 0 0 auto;
 
-    padding:
-        kbq-css-variable(sidepanel-size-header-padding-vertical)
-        kbq-css-variable(sidepanel-size-header-padding-right)
-        kbq-css-variable(sidepanel-size-header-padding-vertical)
+    padding: kbq-css-variable(sidepanel-size-header-padding-vertical)
+        kbq-css-variable(sidepanel-size-header-padding-right) kbq-css-variable(sidepanel-size-header-padding-vertical)
         kbq-css-variable(sidepanel-size-header-padding-left);
 
     .kbq-sidepanel-close {
@@ -166,8 +161,7 @@ $tokens: meta.module-variables(tokens) !default;
     flex-flow: row nowrap;
     flex: 0 0 auto;
 
-    padding:
-        kbq-css-variable(sidepanel-size-footer-padding-top)
+    padding: kbq-css-variable(sidepanel-size-footer-padding-top)
         kbq-css-variable(sidepanel-size-footer-padding-horizontal)
         kbq-css-variable(sidepanel-size-footer-padding-bottom);
 
@@ -177,11 +171,11 @@ $tokens: meta.module-variables(tokens) !default;
         flex-direction: row;
         flex: 1;
 
-        &[align="left"] {
+        &[align='left'] {
             justify-content: start;
         }
 
-        &[align="right"] {
+        &[align='right'] {
             justify-content: flex-end;
         }
 

package/splitter/_splitter-theme.scss

@@ -2,7 +2,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-splitter-theme($theme) {
     $background: map.get($theme, states, background);
 

package/splitter/public-api.d.ts

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