Release: 8.2.0

README.md

@@ -26,10 +26,13 @@ Regardless whether you want to create a Travel Blog or an e-commerce shop to sel
 <p>Created by <a href="https://mdbootstrap.com"><img height="30" src="https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-r.png"></a>  
 <a href="https://npmcharts.com/compare/mdbootstrap?minimal=true"> <img src="https://img.shields.io/npm/dm/mdbootstrap.svg?label=NPM%20Downloads" alt="Downloads"></a>
 <a href="https://github.com/mdbootstrap/bootstrap-material-design/blob/master/License.pdf"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a>
-<a href="https://twitter.com/intent/tweet/?text=Thanks+@mdbootstrap+for+creating+amazing+and+free+Material+Design+for+Bootstrap+5+UI+KIT%20https://mdbootstrap.com/docs/jquery/&hashtags=javascript,code,webdesign,bootstrap"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social&label=Let%20us%20know%20you%20were%20here%21&"></a>
-<a href="https://www.youtube.com/watch?v=c9B4TPnak1A"><img alt="YouTube Video Views" src="https://img.shields.io/youtube/views/c9B4TPnak1A?label=Bootstrap%205%20Tutorial%20Views&style=social"></a></p>
+<a href="https://x.com/intent/post?text=Thanks+%40mdbootstrap+for+creating+amazing+and+free+Material+Design+for+Bootstrap+5+UI+KIT+https%3A%2F%2Fmdbootstrap.com%2Fdocs%2Fjquery%2F&hashtags=javascript%2Ccode%2Cwebdesign%2Cbootstrap"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social&label=Let%20us%20know%20you%20were%20here%21&"></a>
+<a href="https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/">
+  <img src="https://img.shields.io/static/v1?label=MDBootstrap&message=Tutorial&labelColor=007bff&color=ffffff&logoColor=007bff&textColor=000000" alt="MDBootstrap tutorial">
+</a></p>
 
-Trusted by <b>2 000 000+</b> developers & designers. Used by companies & institutions like
+
+Trusted by <b>3 000 000+</b> developers & designers. Used by companies & institutions like
 <table>
   <tbody>
     <tr>
@@ -78,37 +81,37 @@ ___
 
 # Bootstrap 5 tutorial
 
-**[>> Learn more about Bootstrap 5](https://mdbootstrap.com/docs/standard/bootstrap-5/)**
+**[>> Learn more about Bootstrap 5](https://mdbootstrap.com/docs/standard/)**
 
 
-**[>> Bootstrap 5 Tutorial](https://mdbootstrap.com/docs/standard/bootstrap-5-tutorial/)**
+**[>> Bootstrap 5 Tutorial](https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/)**
 
-**[>> Subscribe to our YouTube channel with dozens of Bootstrap tutorials](https://www.youtube.com/c/Mdbootstrap?sub_confirmation=1)**
+**[>> Subscribe to our YouTube channel with dozens of Bootstrap tutorials](https://www.youtube.com/c/Mdbootstrap)**
 
 <table>
   <tbody>
     <tr>
       <td align="center">
-         <a href="https://mdbootstrap.com/docs/standard/getting-started/" alt="Bootstrap Tutorials" rel="dofollow">
+         <a href="https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/" alt="Bootstrap Tutorials" rel="dofollow">
           		<img src="https://mdbootstrap.com/wp-content/uploads/2020/12/learnmore-1.png">
           </a>
       </td>
       <td>
-          <a href="https://mdbootstrap.com/docs/standard/bootstrap-5-tutorial/#section-beginner" alt="Bootstrap 5" rel="dofollow">
-          		<img src="https://mdbootstrap.com/wp-content/uploads/2020/12/cover-bootstrap-5-1.png">
+          <a href="https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/#section-beginner" alt="Bootstrap 5" rel="dofollow">
+          		<img src="https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/assets/featured-image.png">
           </a>
       </td>
     </tr>
      <tr>
         <td align="center">
           <p align="center"><b>Start learning from Basics</b></p>
-          <a href="https://mdbootstrap.com/docs/standard/getting-started/" alt="Bootstrap 5" rel="dofollow">
+          <a href="https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/" alt="Bootstrap 5" rel="dofollow">
           		<img src="https://mdbootstrap.com/wp-content/uploads/2020/12/Screenshot_26.png">
           </a>
          </td>
         <td align="center">
           <p align="center"><b>Learn Bootstrap 5 | Crash Course for Beginners in 1.5H</b></p>
-          <a href="https://mdbootstrap.com/docs/standard/bootstrap-5-tutorial/#section-beginner" alt="Bootstrap 5" rel="dofollow">
+          <a href="https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/#section-beginner" alt="Bootstrap 5" rel="dofollow">
           		<img src="https://mdbootstrap.com/wp-content/uploads/2020/12/Screenshot_26.png">
           </a>
          </td>

README.txt

@@ -1,5 +1,5 @@
 MDB5
-Version: FREE 7.3.2
+Version: FREE 8.2.0
 
 Documentation:
 https://mdbootstrap.com/docs/standard/

js/mdb.es.min.js

@@ -6717,7 +6717,6 @@ const DATA_KEY$2 = `mdb.${NAME$2}`;
 const EVENT_KEY = `.${DATA_KEY$2}`;
 const Default$1 = {
   offset: [0, 2],
-  flip: true,
   boundary: "clippingParents",
   reference: "toggle",
   display: "dynamic",
@@ -6726,7 +6725,6 @@ const Default$1 = {
 };
 const DefaultType$1 = {
   offset: "(array|string|function)",
-  flip: "boolean",
   boundary: "(string|element)",
   reference: "(string|element|object)",
   display: "string",
@@ -6803,7 +6801,6 @@ class Dropdown2 extends Dropdown$1 {
         {
           name: "preventOverflow",
           options: {
-            altBoundary: this._config.flip,
             boundary: this._config.boundary
           }
         },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdb-ui-kit",
-  "version": "7.3.2",
+  "version": "8.2.0",
   "type": "module",
   "main": "./js/mdb.umd.min.js",
   "module": "./js/mdb.es.min.js",

src/js/free/dropdown.js

@@ -16,7 +16,6 @@ const EVENT_KEY = `.${DATA_KEY}`;
 
 const Default = {
   offset: [0, 2],
-  flip: true,
   boundary: 'clippingParents',
   reference: 'toggle',
   display: 'dynamic',
@@ -26,7 +25,6 @@ const Default = {
 
 const DefaultType = {
   offset: '(array|string|function)',
-  flip: 'boolean',
   boundary: '(string|element)',
   reference: '(string|element|object)',
   display: 'string',
@@ -121,7 +119,6 @@ class Dropdown extends BSDropdown {
         {
           name: 'preventOverflow',
           options: {
-            altBoundary: this._config.flip,
             boundary: this._config.boundary,
           },
         },

src/js/mdb/perfect-scrollbar/handlers/drag-thumb.js

@@ -1,23 +1,9 @@
-/* eslint-disable */
-
-import * as CSS from '../lib/css';
-import * as DOM from '../lib/dom';
 import cls, { addScrollingClass, removeScrollingClass } from '../lib/class-names';
 import updateGeometry from '../update-geometry';
-import { toInt } from '../lib/util';
 
-export default function (i) {
-  bindMouseScrollHandler(i, [
-    'containerWidth',
-    'contentWidth',
-    'pageX',
-    'railXWidth',
-    'scrollbarX',
-    'scrollbarXWidth',
-    'scrollLeft',
-    'x',
-    'scrollbarXRail',
-  ]);
+let activeSlider = null; // Variable to track the currently active slider
+
+export default function setupScrollHandlers(i) {
   bindMouseScrollHandler(i, [
     'containerHeight',
     'contentHeight',
@@ -29,70 +15,96 @@ export default function (i) {
     'y',
     'scrollbarYRail',
   ]);
+
+  bindMouseScrollHandler(i, [
+    'containerWidth',
+    'contentWidth',
+    'pageX',
+    'railXWidth',
+    'scrollbarX',
+    'scrollbarXWidth',
+    'scrollLeft',
+    'x',
+    'scrollbarXRail',
+  ]);
 }
 
 function bindMouseScrollHandler(
   i,
   [
-    containerHeight,
-    contentHeight,
-    pageY,
-    railYHeight,
-    scrollbarY,
-    scrollbarYHeight,
-    scrollTop,
-    y,
-    scrollbarYRail,
+    containerDimension,
+    contentDimension,
+    pageAxis,
+    railDimension,
+    scrollbarAxis,
+    scrollbarDimension,
+    scrollAxis,
+    axis,
+    scrollbarRail,
   ]
 ) {
   const element = i.element;
-
-  let startingScrollTop = null;
-  let startingMousePageY = null;
+  let startingScrollPosition = null;
+  let startingMousePagePosition = null;
   let scrollBy = null;
 
-  function mouseMoveHandler(e) {
+  function moveHandler(e) {
     if (e.touches && e.touches[0]) {
-      e[pageY] = e.touches[0].pageY;
+      e[pageAxis] = e.touches[0][`page${axis.toUpperCase()}`];
     }
-    element[scrollTop] = startingScrollTop + scrollBy * (e[pageY] - startingMousePageY);
-    addScrollingClass(i, y);
-    updateGeometry(i);
 
-    e.stopPropagation();
-    e.preventDefault();
-  }
+    // Only move if the active slider is the one we started with
+    if (activeSlider === scrollbarAxis) {
+      element[scrollAxis] =
+        startingScrollPosition + scrollBy * (e[pageAxis] - startingMousePagePosition);
+      addScrollingClass(i, axis);
+      updateGeometry(i);
 
-  function mouseUpHandler() {
-    removeScrollingClass(i, y);
-    i[scrollbarYRail].classList.remove(cls.state.clicking);
-    i.event.unbind(i.ownerDocument, 'mousemove', mouseMoveHandler);
-  }
-
-  function bindMoves(e, touchMode) {
-    startingScrollTop = element[scrollTop];
-    if (touchMode && e.touches) {
-      e[pageY] = e.touches[0].pageY;
-    }
-    startingMousePageY = e[pageY];
-    scrollBy = (i[contentHeight] - i[containerHeight]) / (i[railYHeight] - i[scrollbarYHeight]);
-    if (!touchMode) {
-      i.event.bind(i.ownerDocument, 'mousemove', mouseMoveHandler);
-      i.event.once(i.ownerDocument, 'mouseup', mouseUpHandler);
+      e.stopPropagation();
       e.preventDefault();
-    } else {
-      i.event.bind(i.ownerDocument, 'touchmove', mouseMoveHandler);
     }
-
-    i[scrollbarYRail].classList.add(cls.state.clicking);
-
-    e.stopPropagation();
   }
 
-  i.event.bind(i[scrollbarY], 'mousedown', (e) => {
-    bindMoves(e);
-  });
-  i.event.bind(i[scrollbarY], 'touchstart', (e) => {
-    bindMoves(e, true);
-  });
+  function endHandler() {
+    removeScrollingClass(i, axis);
+    i[scrollbarRail].classList.remove(cls.state.clicking);
+    document.removeEventListener('mousemove', moveHandler);
+    document.removeEventListener('mouseup', endHandler);
+    document.removeEventListener('touchmove', moveHandler);
+    document.removeEventListener('touchend', endHandler);
+    activeSlider = null; // Reset active slider when interaction ends
+  }
+
+  function bindMoves(e) {
+    if (activeSlider === null) {
+      // Only bind if no slider is currently active
+      activeSlider = scrollbarAxis; // Set current slider as active
+
+      startingScrollPosition = element[scrollAxis];
+      if (e.touches) {
+        e[pageAxis] = e.touches[0][`page${axis.toUpperCase()}`];
+      }
+      startingMousePagePosition = e[pageAxis];
+      scrollBy =
+        (i[contentDimension] - i[containerDimension]) / (i[railDimension] - i[scrollbarDimension]);
+
+      if (!e.touches) {
+        document.addEventListener('mousemove', moveHandler);
+        document.addEventListener('mouseup', endHandler);
+      } else {
+        document.addEventListener('touchmove', moveHandler, { passive: false });
+        document.addEventListener('touchend', endHandler);
+      }
+
+      i[scrollbarRail].classList.add(cls.state.clicking);
+    }
+
+    e.stopPropagation();
+    if (e.cancelable) {
+      e.preventDefault();
+    }
+  }
+
+  i[scrollbarAxis].addEventListener('mousedown', bindMoves);
+  i[scrollbarAxis].addEventListener('touchstart', bindMoves);
 }

src/js/mdb/perfect-scrollbar/handlers/touch.js

@@ -1,4 +1,3 @@
-/* eslint-disable */
 import updateGeometry from '../update-geometry';
 import cls from '../lib/class-names';
 import * as CSS from '../lib/css';
@@ -11,6 +10,13 @@ export default function (i) {
 
   const element = i.element;
 
+  const state = {
+    startOffset: {},
+    startTime: 0,
+    speed: {},
+    easingLoop: null,
+  };
+
   function shouldPrevent(deltaX, deltaY) {
     const scrollTop = Math.floor(element.scrollTop);
     const scrollLeft = element.scrollLeft;
@@ -18,18 +24,13 @@ export default function (i) {
     const magnitudeY = Math.abs(deltaY);
 
     if (magnitudeY > magnitudeX) {
-      // user is perhaps trying to swipe up/down the page
-
       if (
         (deltaY < 0 && scrollTop === i.contentHeight - i.containerHeight) ||
         (deltaY > 0 && scrollTop === 0)
       ) {
-        // set prevent for mobile Chrome refresh
         return window.scrollY === 0 && deltaY > 0 && env.isChrome;
       }
     } else if (magnitudeX > magnitudeY) {
-      // user is perhaps trying to swipe left/right across the page
-
       if (
         (deltaX < 0 && scrollLeft === i.contentWidth - i.containerWidth) ||
         (deltaX > 0 && scrollLeft === 0)
@@ -48,21 +49,18 @@ export default function (i) {
     updateGeometry(i);
   }
 
-  let startOffset = {};
-  let startTime = 0;
-  let speed = {};
-  let easingLoop = null;
-
   function getTouch(e) {
     if (e.targetTouches) {
       return e.targetTouches[0];
-    } else {
-      // Maybe IE pointer
-      return e;
     }
+    // Maybe IE pointer
+    return e;
   }
 
   function shouldHandle(e) {
+    if (e.target === i.scrollbarX || e.target === i.scrollbarY) {
+      return false;
+    }
     if (e.pointerType && e.pointerType === 'pen' && e.buttons === 0) {
       return false;
     }
@@ -82,13 +80,13 @@ export default function (i) {
 
     const touch = getTouch(e);
 
-    startOffset.pageX = touch.pageX;
-    startOffset.pageY = touch.pageY;
+    state.startOffset.pageX = touch.pageX;
+    state.startOffset.pageY = touch.pageY;
 
-    startTime = new Date().getTime();
+    state.startTime = new Date().getTime();
 
-    if (easingLoop !== null) {
-      clearInterval(easingLoop);
+    if (state.easingLoop !== null) {
+      clearInterval(state.easingLoop);
     }
   }
 
@@ -143,53 +141,57 @@ export default function (i) {
 
       const currentOffset = { pageX: touch.pageX, pageY: touch.pageY };
 
-      const differenceX = currentOffset.pageX - startOffset.pageX;
-      const differenceY = currentOffset.pageY - startOffset.pageY;
+      const differenceX = currentOffset.pageX - state.startOffset.pageX;
+      const differenceY = currentOffset.pageY - state.startOffset.pageY;
 
       if (shouldBeConsumedByChild(e.target, differenceX, differenceY)) {
         return;
       }
 
       applyTouchMove(differenceX, differenceY);
-      startOffset = currentOffset;
+      state.startOffset = currentOffset;
 
       const currentTime = new Date().getTime();
 
-      const timeGap = currentTime - startTime;
+      const timeGap = currentTime - state.startTime;
       if (timeGap > 0) {
-        speed.x = differenceX / timeGap;
-        speed.y = differenceY / timeGap;
-        startTime = currentTime;
+        state.speed.x = differenceX / timeGap;
+        state.speed.y = differenceY / timeGap;
+        state.startTime = currentTime;
       }
 
       if (shouldPrevent(differenceX, differenceY)) {
-        e.preventDefault();
+        // Prevent the default behavior if the event is cancelable
+        if (e.cancelable) {
+          e.preventDefault();
+        }
       }
     }
   }
+
   function touchEnd() {
     if (i.settings.swipeEasing) {
-      clearInterval(easingLoop);
-      easingLoop = setInterval(function () {
+      clearInterval(state.easingLoop);
+      state.easingLoop = setInterval(() => {
         if (i.isInitialized) {
-          clearInterval(easingLoop);
+          clearInterval(state.easingLoop);
           return;
         }
 
-        if (!speed.x && !speed.y) {
-          clearInterval(easingLoop);
+        if (!state.speed.x && !state.speed.y) {
+          clearInterval(state.easingLoop);
           return;
         }
 
-        if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) {
-          clearInterval(easingLoop);
+        if (Math.abs(state.speed.x) < 0.01 && Math.abs(state.speed.y) < 0.01) {
+          clearInterval(state.easingLoop);
           return;
         }
 
-        applyTouchMove(speed.x * 30, speed.y * 30);
+        applyTouchMove(state.speed.x * 30, state.speed.y * 30);
 
-        speed.x *= 0.8;
-        speed.y *= 0.8;
+        state.speed.x *= 0.8;
+        state.speed.y *= 0.8;
       }, 10);
     }
   }

src/scss/free/_flag.scss

@@ -1,13 +1,3 @@
-/*!
- * # Semantic UI 2.4.2 - Flag
- * http://github.com/semantic-org/semantic-ui/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
 /*******************************
              Flag
 *******************************/

src/scss/free/_list-group.scss

@@ -6,6 +6,16 @@
   --#{$prefix}list-group-item-transition-time: #{$list-group-item-transition-time};
 }
 
+.list-group-item {
+  --#{$prefix}list-group-item-active-margin-top: #{$list-group-active-margin-top};
+
+  & + .list-group-item {
+    &.active {
+      margin-top: var(--#{$prefix}list-group-item-active-margin-top);
+    }
+  }
+}
+
 .list-group-item-action {
   transition: var(--#{$prefix}list-group-item-transition-time);
 

src/scss/free/_nav.scss

@@ -54,6 +54,7 @@
 
 .nav-pills {
   margin-left: -$nav-pills-margin;
+  margin-right: -$nav-pills-margin;
 
   .nav-link {
     --#{$prefix}nav-pills-link-border-radius: #{$nav-pills-link-border-radius};

src/scss/free/_progress.scss

@@ -4,3 +4,54 @@
   border-radius: 0;
   box-shadow: none;
 }
+
+.progress-circular {
+  --#{$prefix}progress-circular-size: #{$progress-circular-size};
+  --#{$prefix}progress-circular-bar-width: #{$progress-circular-bar-width};
+  --#{$prefix}progress-circular-color: var(--#{$prefix}emphasis-color);
+
+  position: relative;
+  width: var(--#{$prefix}progress-circular-size);
+  height: var(--#{$prefix}progress-circular-size);
+  background-color: transparent;
+  display: inline-block;
+
+  .progress-bar {
+    background-color: var(--#{$prefix}progress-bar-bg);
+  }
+
+  .progress-bar::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    box-sizing: border-box;
+
+    background: conic-gradient(
+      transparent calc(var(--percentage) * 1%),
+      var(--#{$prefix}progress-bg) 0%
+    );
+    -webkit-mask: radial-gradient(
+      farthest-side,
+      transparent calc(100% - var(--#{$prefix}progress-circular-bar-width)),
+      black calc(100% - var(--#{$prefix}progress-circular-bar-width) + 1px)
+    );
+    mask: radial-gradient(
+      farthest-side,
+      transparent calc(100% - var(--#{$prefix}progress-circular-bar-width)),
+      black calc(100% - var(--#{$prefix}progress-circular-bar-width) + 1px)
+    );
+    background-color: inherit;
+  }
+
+  .progress-label {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--#{$prefix}progress-circular-color);
+  }
+}

src/scss/free/_root.scss

@@ -30,6 +30,7 @@
   --#{$prefix}box-shadow-color: #{$box-shadow-color};
   --#{$prefix}box-shadow-color-rgb: #{to-rgb($box-shadow-color)};
   --#{$prefix}stepper-mobile-bg: #{$stepper-mobile-bg};
+  --#{$prefix}datepicker-cell-in-range-background-color: #{$datepicker-cell-in-range-background-color};
 }
 
 @if $enable-dark-mode {
@@ -57,6 +58,7 @@
     --#{$prefix}box-shadow-color: #{$box-shadow-color-dark};
     --#{$prefix}box-shadow-color-rgb: #{to-rgb($box-shadow-color-dark)};
     --#{$prefix}stepper-mobile-bg: #{$stepper-mobile-bg-dark};
+    --#{$prefix}datepicker-cell-in-range-background-color: #{$datepicker-cell-in-range-bg-dark};
     // scss-docs-end root-dark-mode-vars
   }
 }

src/scss/free/_variables-dark.scss

@@ -68,6 +68,7 @@ $form-control-label-color-dark: $gray-400 !default;
 $form-control-disabled-bg-dark: $gray-700 !default;
 $box-shadow-color-dark: $black !default;
 $stepper-mobile-bg-dark: $body-tertiary-bg-dark !default;
+$datepicker-cell-in-range-bg-dark: $gray-700 !default;
 // scss-docs-start mdb-global-dark-theme-variables
 
 // Accordion

src/scss/free/_variables.scss

@@ -723,6 +723,7 @@ $form-control-label-color: $gray-600 !default;
 $form-control-disabled-bg: $gray-300 !default;
 $box-shadow-color: $black !default;
 $stepper-mobile-bg: $gray-50 !default;
+$datepicker-cell-in-range-background-color: $primary-border-subtle !default;
 // scss-docs-start mdb-global-light-theme-variables
 
 // Body
@@ -1561,6 +1562,8 @@ $alert-border-radius: $border-radius-lg !default;
 // scss-docs-start progress-variables
 $progress-height: 4px !default;
 $progress-bar-color: color-contrast($primary) !default;
+$progress-circular-size: 48px !default;
+$progress-circular-bar-width: 4px !default;
 // scss-docs-end progress-variables
 
 // Range
@@ -1600,6 +1603,7 @@ $list-group-light-active-border-radius: 0.5rem !default;
 $list-group-light-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
 $list-group-light-active-color: var(--#{$prefix}primary-text-emphasis) !default;
 
+$list-group-active-margin-top: 0 !default;
 $list-group-small-item-py: 0.5rem !default;
 // scss-docs-end list-group-variables
 

src/scss/free/forms/_input-group.scss

@@ -133,8 +133,8 @@ TEXTAREA {
     animation-name: onautofillstart;
 
     -webkit-background-clip: text;
-    box-shadow: inset 0 0 20px 20px white;
-    -webkit-box-shadow: 0 0 20px 20px white inset !important;
+    box-shadow: inset 0 0 20px 20px var(--#{$prefix}body-bg);
+    -webkit-box-shadow: 0 0 20px 20px var(--#{$prefix}body-bg) inset !important;
 
     &:hover,
     &:focus,
@@ -142,8 +142,8 @@ TEXTAREA {
       animation-name: onautofillstart;
 
       -webkit-background-clip: text;
-      box-shadow: inset 0 0 20px 20px white;
-      -webkit-box-shadow: 0 0 20px 20px white inset !important;
+      box-shadow: inset 0 0 20px 20px var(--#{$prefix}body-bg);
+      -webkit-box-shadow: 0 0 20px 20px var(--#{$prefix}body-bg) inset !important;
     }
   }
 

src/scss/free/forms/_validation.scss

@@ -89,9 +89,11 @@
           box-shadow: 0 1px 0 0 $color;
         }
         &:focus ~ .form-notch .form-notch-leading {
+          border-color: $color;
           box-shadow: -1px 0 0 0 $color, 0 1px 0 0 $color, 0 -1px 0 0 $color;
         }
         &:focus ~ .form-notch .form-notch-trailing {
+          border-color: $color;
           box-shadow: 1px 0 0 0 $color, 0 -1px 0 0 $color, 0 1px 0 0 $color;
         }