@koobiq/components 17.0.0-rc.8 → 17.0.0

package/core/styles/common/_list.scss

@@ -4,7 +4,6 @@
 @use '../tokens';
 @use './tokens' as *;
 
-
 // This mixin will ensure that lines that overflow the container will hide the overflow and
 // truncate neatly with an ellipsis.
 @mixin kbq-truncate-line() {
@@ -30,7 +29,7 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    box-sizing: border-box;
+    box-sizing: content-box;
     overflow: hidden;
 
     // Must remove wrapper when lines are empty or it takes up horizontal
@@ -49,89 +48,54 @@
 }
 
 @mixin kbq-list-text() {
-    $tokens: meta.module-variables(tokens) !default;
-
     @include kbq-line-wrapper-base();
     display: inline-block;
 
     @include kbq-truncate-line();
-
-    padding-top: kbq-css-variable(list-size-text-padding-vertical);
-    padding-bottom: kbq-css-variable(list-size-text-padding-vertical);
 }
 
 // This mixin provides all list-item styles, changing font size and height based on whether the list is in dense mode.
 @mixin kbq-list-item-base() {
-    $tokens: meta.module-variables(tokens) !default;
-
-    $outline-width: map.get($tokens, list-size-container-focus-outline-width);
-
-    $padding-vertical: map.get($tokens, list-size-container-padding-vertical);
-    $padding-left: map.get($tokens, list-size-container-padding-left);
-    $padding-right: map.get($tokens, list-size-container-padding-right);
-
     position: relative;
-
     display: flex;
     flex-direction: row;
     align-items: center;
-
     box-sizing: border-box;
-
     outline: none;
     -webkit-tap-highlight-color: transparent;
-
     min-height: 32px;
+    gap: kbq-css-variable(size-s);
+
+    border: kbq-css-variable(size-3xs) solid transparent;
 
-    gap: kbq-css-variable(list-size-container-content-gap-horizontal);
-
-    border-width: kbq-css-variable(list-size-container-focus-outline-width);
-    border-style: solid;
-    border-color: transparent;
-
-    padding:
-        calc(
-            var(--kbq-list-size-container-padding-vertical, $padding-vertical) -
-            var(--kbq-list-size-container-focus-outline-width, $outline-width)
-        )
-        calc(
-            var(--kbq-list-size-container-padding-right, $padding-right) -
-            var(--kbq-list-size-container-focus-outline-width, $outline-width)
-        )
-        calc(
-            var(--kbq-list-size-container-padding-vertical, $padding-vertical) -
-            var(--kbq-list-size-container-focus-outline-width, $outline-width)
-        )
-        calc(
-            var(--kbq-list-size-container-padding-left, $padding-left) -
-            var(--kbq-list-size-container-focus-outline-width, $outline-width)
-        );
+    padding-top: kbq-css-variable(size-xxs);
+    padding-left: kbq-css-variable(size-m);
+    padding-right: kbq-css-variable(size-m);
+    padding-bottom: kbq-css-variable(size-xxs);
 
     .kbq-list-text {
         @include kbq-list-text();
     }
 
     .kbq-list-option-caption {
-        padding-top: kbq-css-variable(list-size-container-content-gap-vertical);
+        padding-top: kbq-css-variable(size-3xs);
     }
 }
 
 @mixin kbq-list-header-base() {
-    $tokens: meta.module-variables(tokens) !default;
-
     display: flex;
     flex-direction: row;
     align-items: center;
-
     box-sizing: border-box;
-
     min-height: 32px;
 
-    padding:
-        kbq-css-variable(list-size-header-padding-top)
-        kbq-css-variable(list-size-header-padding-horizontal)
-        kbq-css-variable(list-size-header-padding-bottom)
-        kbq-css-variable(list-size-header-padding-horizontal);
+    border-left: kbq-css-variable(size-3xs) solid transparent;
+    border-right: kbq-css-variable(size-3xs) solid transparent;
+
+    padding-top: kbq-css-variable(size-xs);
+    padding-left: kbq-css-variable(size-m);
+    padding-right: kbq-css-variable(size-m);
+    padding-bottom: kbq-css-variable(size-3xs);
 
     .kbq-list-text {
         @include kbq-list-text();
@@ -139,21 +103,19 @@
 }
 
 @mixin kbq-list-subheading-base() {
-    $tokens: meta.module-variables(tokens) !default;
-
     display: flex;
     flex-direction: row;
     align-items: center;
-
     box-sizing: border-box;
-
     min-height: 32px;
 
-    padding:
-        kbq-css-variable(list-size-subheading-padding-top)
-        kbq-css-variable(list-size-subheading-padding-horizontal)
-        kbq-css-variable(list-size-subheading-padding-bottom)
-        kbq-css-variable(list-size-subheading-padding-horizontal);
+    border-left: kbq-css-variable(size-3xs) solid transparent;
+    border-right: kbq-css-variable(size-3xs) solid transparent;
+
+    padding-top: kbq-css-variable(size-m);
+    padding-left: kbq-css-variable(size-m);
+    padding-right: kbq-css-variable(size-m);
+    padding-bottom: kbq-css-variable(size-xxs);
 
     .kbq-list-text {
         @include kbq-list-text();

package/core/styles/common/_overlay.scss

@@ -6,7 +6,7 @@ $overlay-z-index: 1000 !default;
 $overlay-backdrop-z-index: 1000 !default;
 
 // Background color for all of the backdrops
-$overlay-backdrop-color: rgba(0, 0, 0, 0.50) !default;
+$overlay-backdrop-color: rgba(0, 0, 0, 0.5) !default;
 
 // Default backdrop animation is based on the Material Design swift-ease-out.
 $backdrop-animation-duration: 400ms !default;
@@ -116,7 +116,9 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
 
     .cdk-overlay-transparent-backdrop {
         // Define a transition on the visibility so that the `transitionend` event can fire immediately.
-        transition: visibility 1ms linear, opacity 1ms linear;
+        transition:
+            visibility 1ms linear,
+            opacity 1ms linear;
         visibility: hidden;
         opacity: 1;
 
@@ -174,4 +176,3 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         overflow-y: scroll;
     }
 }
-

package/core/styles/common/_popup.scss

@@ -1,7 +1,6 @@
 @use 'sass:map';
 @use './tokens' as *;
 
-
 @mixin popup-params($theme) {
     $popup: map.get($theme, components, popup);
 

package/core/styles/common/_rtl.scss

@@ -5,7 +5,7 @@
 @mixin rtl($prop, $ltr-value, $rtl-value) {
     #{$prop}: $ltr-value;
 
-    [dir=rtl] & {
+    [dir='rtl'] & {
         #{$prop}: $rtl-value;
     }
 }
@@ -13,7 +13,7 @@
 @mixin rtl-prop($ltr-prop, $rtl-prop, $value, $reset-value) {
     #{$ltr-prop}: $value;
 
-    [dir=rtl] & {
+    [dir='rtl'] & {
         #{$ltr-prop}: $reset-value;
         #{$rtl-prop}: $value;
     }
@@ -22,11 +22,11 @@
 // To reverse padding (top left bottom right) -> (top right bottom left)
 @function rtl-value($list) {
     @if list.length($list) == 4 {
-        @return list.nth($list, 1) list.nth($list, 4) list.nth($list, 3) list.nth($list, 2)
+        @return list.nth($list, 1) list.nth($list, 4) list.nth($list, 3) list.nth($list, 2);
     }
 
     @if list.length($list) == 5 {
-        @return list.nth($list, 1) list.nth($list, 4) list.nth($list, 3) list.nth($list, 2) list.nth($list, 5)
+        @return list.nth($list, 1) list.nth($list, 4) list.nth($list, 3) list.nth($list, 2) list.nth($list, 5);
     }
 
     @return $list;

package/core/styles/common/_select.scss

@@ -5,10 +5,8 @@
 @use '../tokens';
 @use './tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
-
 %kbq-select-base {
     box-sizing: border-box;
 
@@ -46,8 +44,7 @@ $tokens: meta.module-variables(tokens) !default;
         cursor: pointer;
 
         height: calc(
-            var(--kbq-form-field-size-height, $height) -
-            (var(--kbq-form-field-size-border-width, $border-width) * 2)
+            var(--kbq-form-field-size-height, $height) - (var(--kbq-form-field-size-border-width, $border-width) * 2)
         );
     }
 
@@ -56,22 +53,29 @@ $tokens: meta.module-variables(tokens) !default;
         & .kbq-select__matcher {
             $padding-vertical: map.get($tokens, select-size-single-padding-vertical);
 
-            padding:
-                calc(
-                    var(--kbq-select-size-single-padding-vertical, $padding-vertical) -
-                    var(--kbq-form-field-size-border-width, $border-width)
+            padding: calc(
+                    var(--kbq-select-size-single-padding-vertical, $padding-vertical) - var(
+                            --kbq-form-field-size-border-width,
+                            $border-width
+                        )
                 )
                 calc(
-                    var(--kbq-select-size-single-padding-right, map.get($tokens, select-size-single-padding-right)) -
-                    var(--kbq-form-field-size-border-width, $border-width)
+                    var(--kbq-select-size-single-padding-right, map.get($tokens, select-size-single-padding-right)) - var(
+                            --kbq-form-field-size-border-width,
+                            $border-width
+                        )
                 )
                 calc(
-                    var(--kbq-select-size-single-padding-vertical, $padding-vertical) -
-                    var(--kbq-form-field-size-border-width, $border-width)
+                    var(--kbq-select-size-single-padding-vertical, $padding-vertical) - var(
+                            --kbq-form-field-size-border-width,
+                            $border-width
+                        )
                 )
                 calc(
-                    var(--kbq-select-size-single-padding-left, map.get($tokens, select-size-single-padding-left)) -
-                    var(--kbq-form-field-size-border-width, $border-width)
+                    var(--kbq-select-size-single-padding-left, map.get($tokens, select-size-single-padding-left)) - var(
+                            --kbq-form-field-size-border-width,
+                            $border-width
+                        )
                 );
         }
     }
@@ -80,22 +84,29 @@ $tokens: meta.module-variables(tokens) !default;
         & .kbq-select__matcher {
             $padding-vertical: map.get($tokens, select-size-multiple-padding-vertical);
 
-            padding:
-                calc(
-                    var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) -
-                    var(--kbq-form-field-size-border-width, $border-width)
+            padding: calc(
+                    var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) - var(
+                            --kbq-form-field-size-border-width,
+                            $border-width
+                        )
                 )
                 calc(
-                    var(--kbq-select-size-multiple-padding-right, map.get($tokens,select-size-multiple-padding-right)) -
-                    var(--kbq-form-field-size-border-width, $border-width)
+                    var(--kbq-select-size-multiple-padding-right, map.get($tokens, select-size-multiple-padding-right)) - var(
+                            --kbq-form-field-size-border-width,
+                            $border-width
+                        )
                 )
                 calc(
-                    var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) -
-                    var(--kbq-form-field-size-border-width, $border-width)
+                    var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) - var(
+                            --kbq-form-field-size-border-width,
+                            $border-width
+                        )
                 )
                 calc(
-                    var(--kbq-select-size-multiple-padding-left, map.get($tokens, select-size-multiple-padding-left)) -
-                    var(--kbq-form-field-size-border-width, $border-width)
+                    var(--kbq-select-size-multiple-padding-left, map.get($tokens, select-size-multiple-padding-left)) - var(
+                            --kbq-form-field-size-border-width,
+                            $border-width
+                        )
                 );
 
             .kbq-select__match-container {
@@ -109,12 +120,12 @@ $tokens: meta.module-variables(tokens) !default;
 
                 height: calc(
                     var(--kbq-form-field-size-height, $height) -
-                    (var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) * 2)
+                        (var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) * 2)
                 );
 
                 max-height: calc(
                     var(--kbq-form-field-size-height, $height) -
-                    (var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) * 2)
+                        (var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) * 2)
                 );
 
                 gap: kbq-css-variable(select-size-multiple-content-gap);

package/core/styles/common/_tokens.scss

@@ -5,10 +5,8 @@
 
 @use '../tokens';
 
-
 $tokens: meta.module-variables(tokens) !default;
 
-
 @function kbq-css-variable($name, $value: null) {
     @if $value {
         @return var(--kbq-#{$name}, $value);

package/core/styles/functions/_number.scss

@@ -1,17 +1,18 @@
 @use 'sass:math';
-
+@use 'sass:list';
+@use 'sass:string';
 
 @function unit-length($number, $unit) {
     $strings: 'px' 'cm' 'mm' '%' 'ch' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax';
-    $units:   1px  1cm  1mm  1%  1ch  1in  1em  1rem  1pt  1pc  1ex  1vw  1vh  1vmin  1vmax;
-    $index: index($strings, $unit);
+    $units: 1px 1cm 1mm 1% 1ch 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax;
+    $index: list.index($strings, $unit);
 
     @if not $index {
         @warn "Invalid unit `#{$unit}`.";
         @return false;
     }
 
-    @return $number * nth($units, $index);
+    @return $number * list.nth($units, $index);
 }
 
 // @author Hugo Giraudel
@@ -19,7 +20,7 @@
 @function number($string) {
     // Matrices
     $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
-    $numbers:  0   1   2   3   4   5   6   7   8   9;
+    $numbers: 0 1 2 3 4 5 6 7 8 9;
 
     // Result
     $result: 0;
@@ -27,31 +28,25 @@
     $minus: false;
 
     // Looping through all characters
-    @for $i from 1 through str-length($string) {
-        $character: str-slice($string, $i, $i);
-        $index: index($strings, $character);
+    @for $i from 1 through string.length($string) {
+        $character: string.slice($string, $i, $i);
+        $index: list.index($strings, $character);
 
         @if $character == '-' {
             $minus: true;
-        }
-
-        @else if $character == '.' {
+        } @else if $character == '.' {
             $divider: 1;
-        }
-
-        @else {
+        } @else {
             @if not $index {
                 $result: if($minus, $result * -1, $result);
-                @return unit-length($result, str-slice($string, $i));
+                @return unit-length($result, string.slice($string, $i));
             }
 
-            $number: nth($numbers, $index);
+            $number: list.nth($numbers, $index);
 
             @if $divider == 0 {
                 $result: $result * 10;
-            }
-
-            @else {
+            } @else {
                 // Move the decimal dot to the left
                 $divider: $divider * 10;
                 $number: math.div($number, $divider);

package/core/styles/functions/_string.scss

@@ -1,19 +1,18 @@
-@use 'sass:string';
-
-
-/// Replace `$search` with `$replace` in `$string`
-/// @author Kitty Giraudel
-/// @param {String} $string - Initial string
-/// @param {String} $search - Substring to replace
-/// @param {String} $replace ('') - New value
-/// @return {String} - Updated string
-@function str-replace($string, $search, $replace: '') {
-    $index: str-index($string, $search);
-    
-    @if $index {
-        @return str-slice($string, 1, $index - 1) + $replace +
-            str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-    }
-    
-    @return $string;
-}
+@use 'sass:string';
+
+/// Replace `$search` with `$replace` in `$string`
+/// @author Kitty Giraudel
+/// @param {String} $string - Initial string
+/// @param {String} $search - Substring to replace
+/// @param {String} $replace ('') - New value
+/// @return {String} - Updated string
+@function str-replace($string, $search, $replace: '') {
+    $index: string.index($string, $search);
+
+    @if $index {
+        @return string.slice($string, 1, $index - 1) + $replace +
+            str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
+    }
+
+    @return $string;
+}

package/core/styles/functions/_timing.scss

@@ -2,29 +2,29 @@
  * CSS cubic-bezier timing functions
  * http://bourbon.io/docs/#timing-functions
  */
-$ease-in-quad:      cubic-bezier(0.550,  0.085, 0.680, 0.530);
-$ease-in-cubic:     cubic-bezier(0.550,  0.055, 0.675, 0.190);
-$ease-in-quart:     cubic-bezier(0.895,  0.030, 0.685, 0.220);
-$ease-in-quint:     cubic-bezier(0.755,  0.050, 0.855, 0.060);
-$ease-in-sine:      cubic-bezier(0.470,  0.000, 0.745, 0.715);
-$ease-in-expo:      cubic-bezier(0.950,  0.050, 0.795, 0.035);
-$ease-in-circ:      cubic-bezier(0.600,  0.040, 0.980, 0.335);
-$ease-in-back:      cubic-bezier(0.600, -0.280, 0.735, 0.045);
+$ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+$ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+$ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+$ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+$ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
+$ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+$ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+$ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
 
-$ease-out-quad:     cubic-bezier(0.250,  0.460, 0.450, 0.940);
-$ease-out-cubic:    cubic-bezier(0.215,  0.610, 0.355, 1.000);
-$ease-out-quart:    cubic-bezier(0.165,  0.840, 0.440, 1.000);
-$ease-out-quint:    cubic-bezier(0.230,  1.000, 0.320, 1.000);
-$ease-out-sine:     cubic-bezier(0.390,  0.575, 0.565, 1.000);
-$ease-out-expo:     cubic-bezier(0.190,  1.000, 0.220, 1.000);
-$ease-out-circ:     cubic-bezier(0.075,  0.820, 0.165, 1.000);
-$ease-out-back:     cubic-bezier(0.175,  0.885, 0.320, 1.275);
+$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+$ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+$ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+$ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+$ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
+$ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+$ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
+$ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 
-$ease-in-out-quad:  cubic-bezier(0.455,  0.030, 0.515, 0.955);
-$ease-in-out-cubic: cubic-bezier(0.645,  0.045, 0.355, 1.000);
-$ease-in-out-quart: cubic-bezier(0.770,  0.000, 0.175, 1.000);
-$ease-in-out-quint: cubic-bezier(0.860,  0.000, 0.070, 1.000);
-$ease-in-out-sine:  cubic-bezier(0.445,  0.050, 0.550, 0.950);
-$ease-in-out-expo:  cubic-bezier(1.000,  0.000, 0.000, 1.000);
-$ease-in-out-circ:  cubic-bezier(0.785,  0.135, 0.150, 0.860);
-$ease-in-out-back:  cubic-bezier(0.680, -0.550, 0.265, 1.550);
+$ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+$ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+$ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+$ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+$ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
+$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+$ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);