@kaizen/components 0.0.0-canary-kz-components-css-layer-pre-release-20250527021003 → 0.0.0-canary-fix-fms-popover-20250603003244

package/src/Input/InputRange/InputRange.module.scss

@@ -1,172 +1,170 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/color';
 
-@layer kz-components {
-  $thumb-color: $color-blue-500;
-  $thumb-color-hover: $color-blue-600;
-  $thumb-radius: 100%;
-  $thumb-border-width: 4px;
-  $thumb-border-color: $color-white;
-  $thumb-height: 26px;
-  $thumb-width: 26px;
-  $thumb-height-with-border: $thumb-height + ($thumb-border-width * 2);
-  $thumb-width-with-border: $thumb-width + ($thumb-border-width * 2);
-
-  // The range
-  $track-color: $color-gray-500;
-  $track-radius: 4px;
-
-  @mixin track {
-    width: auto;
-    height: 0;
-    box-sizing: border-box;
-    border-top: 1px solid $track-color;
-    border-bottom: 2px solid $track-color;
-    border-radius: $track-radius;
-  }
+$thumb-color: $color-blue-500;
+$thumb-color-hover: $color-blue-600;
+$thumb-radius: 100%;
+$thumb-border-width: 4px;
+$thumb-border-color: $color-white;
+$thumb-height: 26px;
+$thumb-width: 26px;
+$thumb-height-with-border: $thumb-height + ($thumb-border-width * 2);
+$thumb-width-with-border: $thumb-width + ($thumb-border-width * 2);
+
+// The range
+$track-color: $color-gray-500;
+$track-radius: 4px;
+
+@mixin track {
+  width: auto;
+  height: 0;
+  box-sizing: border-box;
+  border-top: 1px solid $track-color;
+  border-bottom: 2px solid $track-color;
+  border-radius: $track-radius;
+}
 
-  @mixin thumb {
-    box-sizing: content-box;
-    width: $thumb-width;
-    height: $thumb-height;
-    border: $thumb-border-width solid $thumb-border-color;
-    border-radius: $thumb-radius;
-    background: $thumb-color;
-
-    &:not(:disabled) {
-      transition: all 0.2s;
-      transition-property: background, height, width;
-
-      &:hover {
-        background: $thumb-color-hover;
-        width: $thumb-height + 6px;
-        height: $thumb-width + 6px;
-      }
+@mixin thumb {
+  box-sizing: content-box;
+  width: $thumb-width;
+  height: $thumb-height;
+  border: $thumb-border-width solid $thumb-border-color;
+  border-radius: $thumb-radius;
+  background: $thumb-color;
+
+  &:not(:disabled) {
+    transition: all 0.2s;
+    transition-property: background, height, width;
+
+    &:hover {
+      background: $thumb-color-hover;
+      width: $thumb-height + 6px;
+      height: $thumb-width + 6px;
     }
   }
+}
 
-  @mixin hidden-thumb {
-    width: 0;
-    height: 0;
-    border: none;
-  }
-
-  // extra input[type="range"] is required to override materialize.css in performance-ui
-  input[type='range'].ratingScaleRange {
-    all: unset;
-    appearance: none;
-    width: 100%;
-    margin: 0; // performance-ui materialize override
-
-    &.disabled {
-      opacity: 40%;
-    }
-
-    &::-moz-focus-outer {
-      border: 0;
-    }
-
-    &:focus {
-      outline: 0;
-    }
-
-    &:focus-visible {
-      outline: 2px solid $color-blue-500;
-    }
-
-    &::-webkit-slider-runnable-track {
-      margin: $spacing-sm 0;
+@mixin hidden-thumb {
+  width: 0;
+  height: 0;
+  border: none;
+}
 
-      @include track;
-    }
+// extra input[type="range"] is required to override materialize.css in performance-ui
+input[type='range'].ratingScaleRange {
+  all: unset;
+  appearance: none;
+  width: 100%;
+  margin: 0; // performance-ui materialize override
 
-    &::-moz-range-track {
-      @include track;
-    }
-
-    &::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      margin-top: calc((#{$thumb-height-with-border}/ 2) * -1);
+  &.disabled {
+    opacity: 40%;
+  }
 
-      @include thumb;
-    }
+  &::-moz-focus-outer {
+    border: 0;
+  }
 
-    &::-moz-range-thumb {
-      @include thumb;
-    }
+  &:focus {
+    outline: 0;
+  }
 
-    &.hideThumb::-webkit-slider-thumb {
-      @include hidden-thumb;
-    }
+  &:focus-visible {
+    outline: 2px solid $color-blue-500;
+  }
 
-    &.hideThumb::-moz-range-thumb {
-      @include hidden-thumb;
-    }
+  &::-webkit-slider-runnable-track {
+    margin: $spacing-sm 0;
 
-    &::-ms-track {
-      @include track;
+    @include track;
+  }
 
-      color: transparent;
-      border-width: $thumb-width 0;
-      border-color: transparent;
-      background: transparent;
-    }
+  &::-moz-range-track {
+    @include track;
+  }
 
-    &::-ms-fill-lower {
-      border: none;
-      border-radius: $track-radius * 2;
-      background: $track-color;
-    }
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    margin-top: calc((#{$thumb-height-with-border}/ 2) * -1);
 
-    &::-ms-fill-upper {
-      border: none;
-      border-radius: $track-radius * 2;
-      background: $track-color;
-    }
+    @include thumb;
+  }
 
-    &::-ms-thumb {
-      @include thumb;
-    }
+  &::-moz-range-thumb {
+    @include thumb;
   }
 
-  .spokes {
-    display: flex;
-    justify-content: space-between;
-    padding: 0 calc(#{$thumb-width-with-border}/ 2) $spacing-sm;
+  &.hideThumb::-webkit-slider-thumb {
+    @include hidden-thumb;
   }
 
-  .spokes.disabled {
-    opacity: 40%;
+  &.hideThumb::-moz-range-thumb {
+    @include hidden-thumb;
   }
 
-  .spokeContainer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 1px;
+  &::-ms-track {
+    @include track;
+
+    color: transparent;
+    border-width: $thumb-width 0;
+    border-color: transparent;
+    background: transparent;
   }
 
-  .spoke {
-    width: 0;
-    height: 0;
+  &::-ms-fill-lower {
+    border: none;
+    border-radius: $track-radius * 2;
     background: $track-color;
-    border: 2px solid $track-color;
-    border-radius: 100%;
   }
 
-  .labelsContainer {
-    display: flex;
-    justify-content: center;
-    width: 100%;
+  &::-ms-fill-upper {
+    border: none;
+    border-radius: $track-radius * 2;
+    background: $track-color;
   }
 
-  .sliderLabels {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
+  &::-ms-thumb {
+    @include thumb;
   }
+}
 
-  .sliderLabels.disabled {
-    opacity: 40%;
-  }
+.spokes {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 calc(#{$thumb-width-with-border}/ 2) $spacing-sm;
+}
+
+.spokes.disabled {
+  opacity: 40%;
+}
+
+.spokeContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1px;
+}
+
+.spoke {
+  width: 0;
+  height: 0;
+  background: $track-color;
+  border: 2px solid $track-color;
+  border-radius: 100%;
+}
+
+.labelsContainer {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.sliderLabels {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.sliderLabels.disabled {
+  opacity: 40%;
 }

package/src/Input/InputSearch/InputSearch.module.scss

@@ -3,211 +3,208 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '../../../styles/utils/forms';
 
-@layer kz-components {
-  $input-height: 48px;
-  $input-padding-before-start-icon: 1rem;
-  $input-padding-between-icon-input: $spacing-sm;
-  $input-padding-after-end-icon: $spacing-sm;
-  $input-icon-size: 1.25rem; // 20px
-  $input-padding-with-icon: calc(
-    #{$input-padding-before-start-icon} + #{$input-icon-size} + #{$input-padding-between-icon-input}
-  );
-  $input-disabled-opacity: 0.3;
-  $border-solid-border-radius-curved: $input-height;
-
-  $input-placeholder-opacity--default: 0.7;
-  $start-icon-opacity--default: $input-placeholder-opacity--default;
-  $input-placeholder-opacity--reversed: 0.8;
-  $start-icon-opacity--reversed: $input-placeholder-opacity--reversed;
-
-  // [type="search"] is required to override performance-ui global materialize CSS >:|
-  $classname--input: '.input[type="search"]';
-
-  .wrapper {
-    position: relative;
+$input-height: 48px;
+$input-padding-before-start-icon: 1rem;
+$input-padding-between-icon-input: $spacing-sm;
+$input-padding-after-end-icon: $spacing-sm;
+$input-icon-size: 1.25rem; // 20px
+$input-padding-with-icon: calc(
+  #{$input-padding-before-start-icon} + #{$input-icon-size} + #{$input-padding-between-icon-input}
+);
+$input-disabled-opacity: 0.3;
+$border-solid-border-radius-curved: $input-height;
+
+$input-placeholder-opacity--default: 0.7;
+$start-icon-opacity--default: $input-placeholder-opacity--default;
+$input-placeholder-opacity--reversed: 0.8;
+$start-icon-opacity--reversed: $input-placeholder-opacity--reversed;
+
+// [type="search"] is required to override performance-ui global materialize CSS >:|
+$classname--input: '.input[type="search"]';
+
+.wrapper {
+  position: relative;
+}
+
+#{$classname--input} {
+  @include form-input-reset;
+
+  display: flex;
+  align-items: center;
+  height: $input-height;
+  width: 100%;
+  border: $border-solid-border-width $border-solid-border-style transparent;
+  border-radius: $border-solid-border-radius-curved;
+  padding-block: 0;
+  padding-inline: $input-padding-with-icon $input-padding-after-end-icon;
+  font-size: 1rem;
+  line-height: 1.5;
+
+  @include form-input-placeholder {
+    opacity: 100%;
   }
 
-  #{$classname--input} {
-    @include form-input-reset;
-
-    display: flex;
-    align-items: center;
-    height: $input-height;
-    width: 100%;
-    border: $border-solid-border-width $border-solid-border-style transparent;
-    border-radius: $border-solid-border-radius-curved;
-    padding-block: 0;
-    padding-inline: $input-padding-with-icon $input-padding-after-end-icon;
-    font-size: 1rem;
-    line-height: 1.5;
+  &::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+  }
+
+  .hasEndIconAdornment & {
+    padding-inline-end: calc(
+      #{$input-padding-between-icon-input} + #{$input-icon-size} + #{$input-padding-after-end-icon}
+    );
+  }
 
+  &:focus,
+  &:hover {
     @include form-input-placeholder {
-      opacity: 100%;
+      opacity: 0%;
     }
+  }
 
-    &::-webkit-search-cancel-button {
-      -webkit-appearance: none;
-    }
+  &:focus {
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+    outline-offset: 1px;
+  }
+}
 
-    .hasEndIconAdornment & {
-      padding-inline-end: calc(
-        #{$input-padding-between-icon-input} + #{$input-icon-size} +
-          #{$input-padding-after-end-icon}
-      );
-    }
+@mixin vertically-center-icon {
+  position: absolute;
+  height: $input-icon-size;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+}
 
-    &:focus,
-    &:hover {
-      @include form-input-placeholder {
-        opacity: 0%;
-      }
-    }
+.startIconAdornment {
+  @include vertically-center-icon;
 
-    &:focus {
-      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-        var(--color-blue-500);
-      outline-offset: 1px;
-    }
-  }
+  inset-inline-start: $input-padding-before-start-icon;
+}
 
-  @mixin vertically-center-icon {
-    position: absolute;
-    height: $input-icon-size;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1;
-  }
+.loadingSpinner {
+  margin-top: -2px;
+}
 
-  .startIconAdornment {
-    @include vertically-center-icon;
+.endIconAdornment {
+  @include vertically-center-icon;
 
-    inset-inline-start: $input-padding-before-start-icon;
-  }
+  inset-inline-end: $input-padding-after-end-icon;
+}
 
-  .loadingSpinner {
-    margin-top: -2px;
-  }
+.disabled {
+  pointer-events: none;
+  opacity: $input-disabled-opacity;
+}
 
-  .endIconAdornment {
-    @include vertically-center-icon;
+/* stylelint-disable no-descending-specificity */
+///////////////////////////////////////////////////
+// THEMES
+///////////////////////////////////////////////////
 
-    inset-inline-end: $input-padding-after-end-icon;
-  }
+// Default
+.default {
+  #{$classname--input} {
+    border-color: $color-gray-500;
+    background-color: $color-white;
+    color: $color-purple-800;
 
-  .disabled {
-    pointer-events: none;
-    opacity: $input-disabled-opacity;
+    @include form-input-placeholder {
+      color: $color-purple-800;
+      opacity: $input-placeholder-opacity--default;
+    }
   }
 
-  /* stylelint-disable no-descending-specificity */
-  ///////////////////////////////////////////////////
-  // THEMES
-  ///////////////////////////////////////////////////
+  .startIconAdornment {
+    color: $color-purple-800;
+    opacity: $start-icon-opacity--default;
+  }
 
-  // Default
-  .default {
+  &:hover,
+  &:focus-within {
     #{$classname--input} {
-      border-color: $color-gray-500;
-      background-color: $color-white;
-      color: $color-purple-800;
+      border-color: $color-gray-600;
+      background-color: $color-gray-200;
 
       @include form-input-placeholder {
-        color: $color-purple-800;
-        opacity: $input-placeholder-opacity--default;
+        opacity: 100%;
       }
     }
 
     .startIconAdornment {
-      color: $color-purple-800;
-      opacity: $start-icon-opacity--default;
+      opacity: 100%;
     }
+  }
+}
 
-    &:hover,
-    &:focus-within {
-      #{$classname--input} {
-        border-color: $color-gray-600;
-        background-color: $color-gray-200;
-
-        @include form-input-placeholder {
-          opacity: 100%;
-        }
-      }
+// Secondary
+.secondary {
+  #{$classname--input} {
+    border-color: transparent;
+    background-color: $color-gray-200;
+    color: $color-purple-800;
 
-      .startIconAdornment {
-        opacity: 100%;
-      }
+    @include form-input-placeholder {
+      color: $color-purple-800;
+      opacity: $input-placeholder-opacity--default;
     }
   }
 
-  // Secondary
-  .secondary {
+  .startIconAdornment {
+    color: $color-purple-800;
+    opacity: $start-icon-opacity--default;
+  }
+
+  &:hover,
+  &:focus-within {
     #{$classname--input} {
       border-color: transparent;
-      background-color: $color-gray-200;
-      color: $color-purple-800;
+      background-color: $color-gray-300;
 
       @include form-input-placeholder {
-        color: $color-purple-800;
-        opacity: $input-placeholder-opacity--default;
+        opacity: 100%;
       }
     }
 
     .startIconAdornment {
-      color: $color-purple-800;
-      opacity: $start-icon-opacity--default;
-    }
-
-    &:hover,
-    &:focus-within {
-      #{$classname--input} {
-        border-color: transparent;
-        background-color: $color-gray-300;
-
-        @include form-input-placeholder {
-          opacity: 100%;
-        }
-      }
-
-      .startIconAdornment {
-        opacity: 100%;
-      }
+      opacity: 100%;
     }
   }
+}
 
-  // Reversed
-  .reversed {
-    #{$classname--input} {
-      background: rgba($color-white-rgb, 0.1);
-      color: $color-white;
-
-      @include form-input-placeholder {
-        color: $color-white;
-        opacity: $input-placeholder-opacity--reversed;
-      }
+// Reversed
+.reversed {
+  #{$classname--input} {
+    background: rgba($color-white-rgb, 0.1);
+    color: $color-white;
 
-      &:focus {
-        outline-color: var(--color-blue-300);
-      }
+    @include form-input-placeholder {
+      color: $color-white;
+      opacity: $input-placeholder-opacity--reversed;
     }
 
-    .startIconAdornment {
-      color: $color-white;
-      opacity: $start-icon-opacity--reversed;
+    &:focus {
+      outline-color: var(--color-blue-300);
     }
+  }
 
-    &:hover,
-    &:focus-within {
-      #{$classname--input} {
-        border-color: transparent;
-        background-color: rgba($color-white-rgb, 0.2);
-      }
+  .startIconAdornment {
+    color: $color-white;
+    opacity: $start-icon-opacity--reversed;
+  }
+
+  &:hover,
+  &:focus-within {
+    #{$classname--input} {
+      border-color: transparent;
+      background-color: rgba($color-white-rgb, 0.2);
     }
+  }
 
-    &.default {
-      #{$classname--input} {
-        border-color: rgba($color-white-rgb, 0.65);
-      }
+  &.default {
+    #{$classname--input} {
+      border-color: rgba($color-white-rgb, 0.65);
     }
   }
-  /* stylelint-enable no-descending-specificity */
 }
+/* stylelint-enable no-descending-specificity */