@koobiq/components 18.19.0 → 18.20.0

package/list/list.scss

@@ -1,6 +1,6 @@
 @use '../core/styles/common/list';
 @use '../core/styles/common/tokens' as *;
-
+@use '../core/styles/common/vendor-prefixes';
 @use './list-theme' as *;
 
 .kbq-list,
@@ -11,8 +11,7 @@
 
 .kbq-list-item,
 .kbq-list-option {
-    @include list.kbq-no-select;
-
+    @include vendor-prefixes.user-select(none);
     @include list.kbq-list-item-base();
 
     border-radius: var(--kbq-size-border-radius);

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

@@ -20,7 +20,10 @@ export declare class KbqVerticalNavbar extends KbqFocusableComponent implements
     onKeyDown(event: KeyboardEvent): void;
     private updateExpandedStateForItems;
     private updateTooltipForItems;
-    private setItemsState;
+    private setItemsVerticalStateAndUpdateExpandedState;
+    private setItemVerticalStateAndUpdateExpandedState;
+    private setItemVerticalState;
+    private updateItemExpandedState;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqVerticalNavbar, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqVerticalNavbar, "kbq-vertical-navbar", ["KbqVerticalNavbar"], { "openOver": { "alias": "openOver"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; }, {}, ["bento", "rectangleElements", "items"], ["[kbq-navbar-container], kbq-navbar-container", "[kbq-navbar-toggle], kbq-navbar-toggle"], false, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.19.0",
+    "version": "18.20.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -24,13 +24,13 @@
         "@angular/cdk": "^18.0.0",
         "@angular/core": "^18.0.0",
         "@angular/forms": "^18.0.0",
-        "@koobiq/cdk": "18.19.0",
-        "@koobiq/angular-moment-adapter": "18.19.0",
-        "@koobiq/angular-luxon-adapter": "18.19.0",
+        "@koobiq/cdk": "18.20.0",
+        "@koobiq/angular-moment-adapter": "18.20.0",
+        "@koobiq/angular-luxon-adapter": "18.20.0",
         "@koobiq/date-formatter": "^3.2.3",
-        "@koobiq/icons": "^9.3.0",
+        "@koobiq/icons": "^9.3.1",
         "@koobiq/tokens-builder": "3.11.0",
-        "@koobiq/design-tokens": "3.11.2",
+        "@koobiq/design-tokens": "3.12.1",
         "@radix-ng/primitives": "^0.14.0"
     },
     "dependencies": {

package/radio/radio-tokens.scss

@@ -1,6 +1,6 @@
 .kbq-radio-group {
     --kbq-radio-size-big-vertical-gap: var(--kbq-size-m);
-    --kbq-radio-size-normal-vertical-gap: var(--kbq-size-m);
+    --kbq-radio-size-normal-vertical-gap: var(--kbq-size-s);
     --kbq-radio-size-big-top: var(--kbq-size-3xs);
     /* THEME TOKENS */
     --kbq-radio-theme-default-outer-circle-border: var(--kbq-line-contrast-fade);
@@ -60,12 +60,16 @@
 }
 
 .kbq-radio-button {
-    --kbq-radio-size-normal-outer-size: var(--kbq-size-l);
+    --kbq-radio-size-normal-outer-circle-border-width: var(--kbq-size-border-width);
+    --kbq-radio-size-normal-outer-size: calc(
+        var(--kbq-size-l) - var(--kbq-radio-size-normal-outer-circle-border-width) * 2
+    );
     --kbq-radio-size-normal-inner-size: var(--kbq-size-xs);
     --kbq-radio-size-normal-horizontal-content-padding: var(--kbq-size-s);
     --kbq-radio-size-normal-vertical-content-padding: var(--kbq-size-3xs);
     --kbq-radio-size-normal-top: 0;
-    --kbq-radio-size-big-outer-size: var(--kbq-size-l);
+    --kbq-radio-size-big-outer-circle-border-width: var(--kbq-size-border-width);
+    --kbq-radio-size-big-outer-size: calc(var(--kbq-size-l) - var(--kbq-radio-size-big-outer-circle-border-width) * 2);
     --kbq-radio-size-big-inner-size: var(--kbq-size-xs);
     --kbq-radio-size-big-horizontal-content-padding: var(--kbq-size-s);
     --kbq-radio-size-big-vertical-content-padding: var(--kbq-size-3xs);

package/radio/radio.scss

@@ -17,7 +17,7 @@
 
 // Top-level host container.
 .kbq-radio-button {
-    display: inline-block;
+    display: inline-flex;
 }
 
 .kbq-radio-label {
@@ -33,7 +33,7 @@
 }
 
 .kbq-radio-label-content {
-    display: inline-block;
+    display: inline-flex;
 
     position: relative;
 
@@ -42,7 +42,8 @@
 
     padding-left: kbq-sum-series-css-variables(
         [radio-size-normal-outer-size,
-        radio-size-normal-horizontal-content-padding]
+        radio-size-normal-horizontal-content-padding,
+        calc(var(--kbq-radio-size-normal-outer-circle-border-width) * 2)]
     );
     padding-right: 0;
 
@@ -61,13 +62,15 @@
     }
 
     .kbq-radio-button__outer-circle {
-        border: {
-            width: 1px;
-        }
+        border-width: var(--kbq-radio-size-normal-outer-circle-border-width);
 
         left: 0;
 
-        top: kbq-css-half-difference(typography-text-normal-line-height, radio-size-normal-outer-size, 1px);
+        top: kbq-css-half-difference(
+            typography-text-normal-line-height,
+            radio-size-normal-outer-size,
+            radio-size-normal-outer-circle-border-width
+        );
 
         width: var(--kbq-radio-size-normal-outer-size);
         height: var(--kbq-radio-size-normal-outer-size);
@@ -96,21 +99,22 @@
     }
 }
 
-.kbq-radio-input {
-    position: absolute;
-    outline: none;
-    opacity: 0;
-}
-
 .kbq-radio-button.kbq-radio-button_big {
     .kbq-radio-label-content {
         padding-left: kbq-sum-series-css-variables(
             [radio-size-big-outer-size,
-            radio-size-big-horizontal-content-padding]
+            radio-size-big-horizontal-content-padding,
+            calc(var(--kbq-radio-size-big-outer-circle-border-width) * 2)]
         );
 
         .kbq-radio-button__outer-circle {
-            top: kbq-css-half-difference(typography-text-big-line-height, radio-size-big-outer-size, 1px);
+            border-width: var(--kbq-radio-size-big-outer-circle-border-width);
+
+            top: kbq-css-half-difference(
+                typography-text-big-line-height,
+                radio-size-big-outer-size,
+                radio-size-big-outer-circle-border-width
+            );
 
             width: var(--kbq-radio-size-big-outer-size);
             height: var(--kbq-radio-size-big-outer-size);

package/schematics/ng-add/index.js

@@ -27,13 +27,13 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^18.2.6");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.19.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.19.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.20.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.20.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.2.3");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.2.3");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^9.3.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^9.3.1");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.11.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.11.2");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.12.1");
         utils_packageConfig.addPackageToPackageJson(tree, '@messageformat/core', "^3.0.1");
         utils_packageConfig.addPackageToPackageJson(tree, '@radix-ng/primitives', "^0.20.2");
         utils_packageConfig.addPackageToPackageJson(tree, 'luxon', "^3.4.4");

package/tags/tag.scss

@@ -1,6 +1,9 @@
 @use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/vendor-prefixes';
 
 .kbq-tag {
+    @include vendor-prefixes.user-select(none);
+
     position: relative;
 
     display: inline-block;

package/timezone/timezone-option-tokens.scss

@@ -1,4 +1,5 @@
 @use '../list/list-tokens';
+@use '../core/option/option-tokens';
 
 .kbq-timezone-select__panel {
     --kbq-select-size-single-padding-left: var(--kbq-size-m);
@@ -8,7 +9,7 @@
     --kbq-select-size-multiple-padding-left: var(--kbq-size-xxs);
     --kbq-select-size-multiple-padding-right: var(--kbq-size-xxs);
     --kbq-select-size-multiple-content-gap: var(--kbq-size-xxs);
-    --kbq-timezone-option-size-padding: 6px 10px;
+    --kbq-timezone-option-size-padding: var(--kbq-size-xxs) 10px;
     --kbq-timezone-option-size-column-gap: 16px;
     --kbq-timezone-option-size-height: auto;
     --kbq-timezone-option-size-max-height: 5em;
@@ -20,5 +21,5 @@
     --kbq-timezone-option-caption: var(--kbq-foreground-contrast-secondary);
     --kbq-timezone-option-optgroup-label: var(--kbq-foreground-contrast-secondary);
     /* LIST THEME TOKENS */
-    @include list-tokens.list-theme-tokens;
+    @extend %kbq-option-geometry-tokens;
 }

package/tree/tree-option.scss

@@ -1,8 +1,9 @@
 @use '../core/styles/common';
 @use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/vendor-prefixes';
 
 .kbq-tree-option {
-    @include common.kbq-no-select;
+    @include vendor-prefixes.user-select(none);
 
     box-sizing: border-box;